文章目录
1，指令修饰符
跟在指令后面，具有特殊的功能。
事件修饰符：
.enter：只有enter键能触发事件。
.stop：阻止事件冒泡。
.prevent：阻止默认行为。
v-model修饰符：
.trim：自动去除首尾的空格。
.number：自动转换成数字。
比如说：
阻止a标签的默认跳转行为。
<a href="" @click.prevent="">链接</a>
按回车键清空。
<input type="text" v-model="msg" @keyup.enter="msg=''" />
data: {
msg: ""
}
2，样式控制
class写成对象。键为类名，值为真假。
为真则具有该类名，为假则没有。
<div :class="{abc:msg}">你好，世界！</div>
data: {
msg: true
}
style写成对象。属性名小驼峰。
<div :style="{color:msg}">你好，世界！</div>
data: {
msg: 'red'
}
3，v-model进阶
复选框，值为真假。
<input type="checkbox" v-model="msg">
data: {
msg: true
}
单选框，
name将多个单选框分为一组。
value作为当前单选框的值。
值为value中的一个。
<input type="radio" name="gender" value='1' v-model=msg />
<input type="radio" name="gender" value='2' v-model=msg />
data: {
msg: '1'
}
下拉框，
值为value中的一个。
<select v-model="msg">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
data: {
msg: '1'
}
4，计算属性
由data计算出来的属性，称为计算属性。
在computed里面声明。
写成函数，返回值就是计算属性的值。
比如说：两数之和。
<input type="text" v-model.number="a"><br />
<input type="text" v-model.number="b"><br />
{{a}}<br />
{{b}}<br />
{{abc}}
const vm = new Vue({
el: "#app",
data: {
a: 0,
b: 0
},
computed: {
abc() {
return this.a + this.b
}
}
})
还有一种写法。能够读取和修改计算属性。
<input type="text" v-model.number="a"><br />
<input type="text" v-model.number="b"><br />
{{a}}<br />
{{b}}<br />
{{abc}}
<button @click="abc=''">清空</button>
const vm = new Vue({
el: "#app",
data: {
a: 0,
b: 0
},
computed: {
abc: {
get() {
return this.a + this.b
},
set(v) {
this.a = 0
this.b = 0
}
}
}
})
5，监视器
用于当数据变化时，执行某些操作。
{{a}}
<button @click="a++">+</button>
const vm = new Vue({
el: "#app",
data: {
a: 0
},
watch: {
a(newV, oldV) {
console.log(newV, oldV);
}
}
})
如果要监视对象的属性，加引号即可。
{{a.b}}
<button @click="a.b++">+</button>
const vm = new Vue({
el: "#app",
data: {
a: {
b: 0
}
},
watch: {
'a.b'(newV, oldV) {
console.log(newV, oldV);
}
}
})
如果要监视对象的所有属性，加配置项。
{{a.b}}
<button @click="a.b++">+</button>
{{a.c}}
<button @click="a.c++">+</button>
const vm = new Vue({
el: "#app",
data: {
a: {
b: 0,
c: 0
}
},
watch: {
a: {
deep: true,
handler(newV, oldV) {
console.log(newV.b, newV.c);
}
}
}
})
一进入页面，可以选择立即执行一次。
watch: {
a: {
deep: true,
immediate: true,
handler(newV, oldV) {
console.log(newV.b, newV.c);
}
}
}
6，生命周期
四个阶段：创建，挂载，更新，销毁。
八个函数。
{{a}}
<button @click="a++">+</button>
const vm = new Vue({
el: "#app",
data: {
a: 0
},
beforeCreate() {
console.log(1);
},
created() {
console.log(2);
},
beforeMount() {
console.log(3);
},
mounted() {
console.log(4);
},
beforeUpdate() {
console.log(5);
},
updated() {
console.log(6);
},
beforeDestroy() {
console.log(7);
},
destroyed() {
console.log(8);
}
})
手动卸载实例的方法：控制台输入代码。
vm.$destroy()
