Vue

模板语法

• v-bind 表示插值绑定，缩写时直接使用 :。如果绑定的值是 null 或 undefined，那么该属性将不会被包含在渲染的元素上。
• v-on 负责监听 DOM 事件，缩写时直接使用 @。
• v-if 将根据表达式的值的真假来插入或移除对应元素。
• v-once 表示一次性插值，即数据改变时，双大括号内的插值不会变化。
• v-html 表示使用真正的 HTML 语言，忽略数据绑定。
• 动态参数 表示在指令中绑定 JS 表达式，需要使用方括号包裹，例如 v-bind:[param] 或 v-on:[event]。
• 修饰符 表示指令绑定的特殊方式，例如 v-on:change.native。

属性和方法

data

• 组件的 data 选项是一个函数，Vue 在创建新组件实例的过程中调用此函数。 它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。
• 为方便起见，该对象的任何顶级 property 也直接通过组件实例暴露出来。如 vm.count 等同于 vm.$data.count。

method

• Vue 自动为 methods 绑定 this，以便于它始终指向组件实例。 这将确保方法在用作事件监听或回调时保持正确的 this 指向。
• 在定义 methods 时应避免使用箭头函数，因为这会阻止 Vue 绑定恰当的 this 指向。

computed

• 对于任何包含响应式数据的复杂逻辑，都应该使用计算属性 computed。
• 计算属性是基于内部值的响应依赖关系缓存的，只在相关响应式依赖发生改变时才会重新求值。 相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
• 计算属性默认只有 getter，但也可以添加 setter。

watch

• Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。 当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

样式

• 通过 :class 给 class 绑定一个对象，以动态地切换样式。 :class 指令也可以与普通的 class 属性共存。 可以把一个数组传给 :class，以应用多个样式。
• 通过 :style 绑定内联样式，其中 CSS 样式名可以用驼峰式或短横线分隔（用引号括起来）来命名。

条件

• v-if 指令用于条件性地渲染一块内容，其后可以跟随 v-else-if 和 v-else 元素。
• v-show 指令作用的元素始终会被渲染并保留在 DOM 中，它只是简单地切换元素的 CSS 属性 display。
• 注意，v-show 不支持 <template> 元素，也不支持 v-else。
• 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
• 当 v-if 与 v-for 一起使用时，v-if 具有比 v-for 更高的优先级。 不推荐同时使用 v-if 和 v-for。

循环

• 可以用 v-for 指令基于一个数组来渲染一个列表。
• 当循环数组时，使用 item in items / (item, index) in items；
• 当循环对象时，使用 value in object / (value, name) in object / (value, name, index) in object。
• 当循环次数时，使用 n in 10。
• 为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一 key 属性。
• 使用数组的变更方法或替换数组，可以触发视图更新。

TIP

当 v-if 与 v-for 一起使用时，v-if 具有比 v-for 更高的优先级。 但不推荐同时使用 v-if 和 v-for。

事件

• 有时需要访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法 @click="method($event)"。
• 事件处理程序中可以有多个方法，这些方法由逗号运算符分隔。
• v-on 提供了事件修饰符，包括 .stop .prevent .capture .self .once .passive。
• 通过 @keyup 添加按键修饰符，包括 .enter .tab .delete .esc .space .up .down .left .right。
• 为按键修饰符添加系统按键前缀，包括 .ctrl .alt .shift .meta，实现仅在按下相应按键时才触发鼠标或键盘事件。 可以再添加 .exact 修饰符，实现仅在按下相应按键时才触发鼠标或键盘事件。
• 鼠标按钮修饰符会限制处理函数仅响应特定的鼠标按钮，包括 .left .right .middle。

v-model 绑定

• 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步。 可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步。
• 如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符。 如果输入类型是 number，Vue 能够自动将原始字符串转换为数字。
• 如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符.

[]