1.指令修饰符
通过“.”指明一些指令后缀,不同的后缀封装了不同的处理操作 —> 简化代码
@keyup.enter ->按键回车监听
<input @keyup.enter="fn" v-model="username" type="text">
@v-model.trim ->去除首尾空格
<input v-model.trim="username" type="text">
@v-model.number ->转数字
<input v-model.number="age" type="text">
事件修饰符:
@事件名.stop ->阻止冒泡
<div @click="fatherFn" class="father">
<div @click.stop="sonFn" class="son">儿子</div>
</div>
@事件名.prevent ->阻止默认行为
<a @click.prevent href="http://www.baidu.com">阻止默认行为</a>
2.v-bind对样式控制的增强-操作class
语法:class="对象/数组"
1、对象->键就是类名,值是布尔值。if为true,有这个类,否则无。
<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>
2、当class动态绑定的是数组时 → 数组中所有的类,都会添加到盒子上,本质就是一个 class 列表
<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>
3.v-bind对有样式控制的增强-操作style
语法:style="样式对象"
<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>
4.v-model应用于其他表单元素
常见的表单元素都可以用 v-model 绑定关联 → 快速 获取 或 设置 表单元素的值
它会根据 控件类型 自动选取 正确的方法 来更新元素
输入框 input:text ——> value
文本域 textarea ——> value
复选框 input:checkbox ——> checked
单选框 input:radio ——> checked
下拉菜单 select ——> value
5.computed 计算属性
基于现有的数据,计算出来的新属性。依赖的数据变化,自动重新计算。
-
声明在 computed 配置项中,一个计算属性对应一个函数
-
使用起来和普通属性一样使用 {{ 计算属性名}}
需要注意:
-
computed配置项和data配置项是同级的
-
computed中的计算属性虽然是函数的写法,但他依然是个属性
-
computed中的计算属性不能和data中的属性同名
-
使用computed中的计算属性和使用data中的属性是一样的用法
-
computed中计算属性内部的this依然指向的是Vue实例
6.computed计算属性和methods方法的区别
1.computed计算属性
作用:封装了一段对于数据的处理,求得一个结果
语法:
-
写在computed配置项中
-
作为属性,直接使用
-
js中使用计算属性: this.计算属性
-
模板中使用计算属性:{{计算属性}}
-
2.methods计算属性
作用:给Vue实例提供一个方法,调用以处理业务逻辑。
语法:
-
写在methods配置项中
-
作为方法调用
-
js中调用:this.方法名()
-
模板中调用 {{方法名()}} 或者 @事件名=“方法名”
-
3.计算属性的优势
-
缓存特性(提升性能)
计算属性会对计算出来的结果缓存,再次使用直接读取缓存,
依赖项变化了,会自动重新计算 → 并再次缓存
-
methods没有缓存特性
7.计算属性的完整写法
<script>
const app = new Vue({
el: '#app',
data: {
},
computed: {
计算属性名:{
get(){
一段代码逻辑(计算逻辑)
return 结果
},
set(修改的值){
一段代码逻辑(修改逻辑)
}
}
},
methods: {
}
})
</script>
8.watch侦听器(监视器)
监视数据变化,执行一些业务逻辑或异步操作
语法:
-
watch同样声明在跟data同级的配置项中
-
简单写法: 简单类型数据直接监视
-
完整写法:添加额外配置项
<script>
data: {
words: '苹果',
obj: {
words: '苹果'
}
},
watch: {
// 该方法会在数据变化时,触发执行
数据属性名 (newValue, oldValue) {
一些业务逻辑 或 异步操作。
},
'对象.属性名' (newValue, oldValue) {
一些业务逻辑 或 异步操作。
}
}
</script>
完整写法 —>添加额外的配置项
-
deep:true 对复杂类型进行深度监听
-
immdiate:true 初始化 立刻执行一次
data: {
obj: {
words: '苹果',
lang: 'italy'
},
},
watch: {// watch 完整写法
对象: {
deep: true, // 深度监视
immdiate:true,//立即执行handler函数
handler (newValue) {
console.log(newValue)
}
}
}