vue指令及用法

v-text

• 解释：更新元素的 textContent

v-html

• 解释：更新元素的 innerHTML

v-bind

• 作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

• 语法：v-bind:title="msg"

• 简写：:title="msg"

v-on

• 作用：绑定事件

• 语法：v-on:click="say" or v-on:click="say('参数', $event)"

• 简写：@click="say"

• 说明：绑定的事件从methods中获取

事件修饰符

• .stop 阻止冒泡，调用 event.stopPropagation()

• .prevent 阻止默认事件，调用 event.preventDefault()

• .capture 添加事件侦听器时使用事件捕获模式

• .self 只当事件在该元素本身（比如不是子元素）触发时触发回调

• .once 事件只触发一次

v-model

• 作用：在表单元素上创建双向数据绑定

• 说明：监听用户的输入事件以更新数据

v-for

• 作用：基于源数据多次渲染元素或模板块

key属性

• 推荐：使用 v-for 的时候提供 key 属性，以获得性能提升。

• 说明：使用 key，VUE会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

样式处理 -class 和 style

• 说明：这两个都是HTML元素的属性，使用v-bind，只需要通过表达式计算出字符串结果即可

• 表达式的类型：字符串、数组、对象

• 语法：

v-if 和 v-show

• 条件渲染

• v-if：根据表达式的值的真假条件，销毁或重建元素

• v-show：根据表达式之真假值，切换元素的 display CSS 属性