目录
语法
基础语法:v-on:事件类型="事件方法",<button v-on:click="btnClick">按钮</button>
语法糖:将“v-on写成@”,<button @click="btnClick">按钮</button>
绑定样式
vue的样式绑定有内联绑定和绑定样式类两种方法,这两种方法都是需要使用v-bind和data中的数据对页面的样式进行操作。
绑定样式类可以有三种操作方法:
变量绑定:
对象绑定:
数组绑定:
<div :class="['box',B,{box3:true,box4:false}]">
{{msg}}
</div>
内联绑定的操作方法示例:
双向数据绑定
v-model:v-model用于表单数据的双向绑定,它是一个语法糖,这个背后做了两个操作:
- v-bind绑定一个value属性
- v-on指令给当前元素绑定input事件
修饰符:
- lazy: 当用户使用v-model之后,用户每次修改输入内容,都会将后台的数据同时绑定,为了避免这种情况的发生,使用lazy修饰符来进行限定。只有当用户的input中失去焦点或者用户点击回车按钮时,才会将后台的数据进行修改。
- trim: 用户可能输入的字符串中含有空格,这样系统在处理时可能会出现错误。使用trim修饰符来去掉字符串首部或者尾部的所有空格。
- number:将用户在输入框中输入的数字转成number类型。
条件渲染
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。你也可以使用 v-else 为 v-if 添加一个“else 区块”。
v-if和v-show的区别
v-if 和 v-show 的主要区别在于它们如何处理条件渲染。v-if 在条件改变时会实际添加或删除元素,适用于不需要经常切换的场景。而 v-show 只修改元素的可见性,适用于需要频繁切换可见性的场景。
- 渲染方式:
v-if:当条件为真时,元素会被渲染到 DOM 中。当条件为假时,元素会从 DOM 中移除。换句话说,v-if 会根据条件实际地添加或删除元素。v-show:无论条件是否为真,元素始终保留在 DOM 中。当条件为假时,元素的 CSS 属性 display 会被设置为 none,使其不可见。条件改变时,v-show 仅修改元素的可见性。
- 性能:
v-if:由于 v-if 指令会在条件改变时实际添加或删除元素,当元素需要频繁切换时,可能会导致性能下降。但对于不需要经常切换的元素,v-if 的性能影响很小。v-show:由于 v-show 只是修改元素的 CSS 属性,所以在需要频繁切换元素可见性时,性能比 v-if 更好。
- 初始化:
v-if:如果初始条件为假,v-if 指令的元素不会被渲染,因此其内部的子组件和指令也不会被初始化。v-show:即使初始条件为假,v-show 指令的元素仍会被渲染,只是设置为不可见。这意味着元素内部的子组件和指令始终会被初始化。
循环渲染
v-for这个指令所在的元素的整个模板会被克隆,数组的元素个数有多少就克隆几次。如果v-if和v-for被放在同一个行内使用,vue2.x版本中,v-for的优先级更高,vue3.x版本中,v-if的优先级更高,而在官方中,则是不建议将这两个指令放在同一个元素中使用。