模板语法
插值（模板字符串）
可以使用 {{}} 来显示变量。这样的话，如果内部修改 author 的话，页面上也会实时更新。
v-once 指令，可以执行单次渲染，后续变化不在更新。
delimiters: ['${', '}'] 通过这个配置项，我们可以修改为习惯的分隔符。
<template> <span>Message: {{ author }}</span> </template> <script> export default { data(){ return { author: 'www.lilnong.top' } } } </script>
v-text 和 v-html
插值的写法基本等价于 v-text。
当然有些时候我们有可能会需要渲染 HTML，比如说 表情、富文本等等，这个是我们可以使用 v-html。
当然，不建议使用 v-html ，因为有可能会有 xss 的问题。
<template> <div> <span>Message: {{ author }}</span> <span v-text="author"></span> <span v-html="author"></span> </div> </template> <script> export default { data(){ return { author: 'www.lilnong.top，<span style="red>lilnong.top</span>' } } } </script>
属性
绑定动态属性需要使用 v-bind（缩写是:）。下面这两种写法是等价的
<span v-bind:id="author"></span>
<span :id="author"></span>
如果是 disabled 这类的属性，在值为 false 时是不会渲染在DOM 上的。因为这种属性在 HTML5 规范中，存在即为 true。
style
style 属性是特殊处理过的，你可以 直接使用对象形式。
<template> <div> <span :style="authorStyle">Message: {{ author }}</span> </div> </template> <script> export default { data(){ return { author: 'www.lilnong.top，<span style="red>lilnong.top</span>', authorStyle: { color: '#0cc' } } } } </script>
class
class 属性是特殊处理过的，你可以 直接使用对象形式。
- 对象形式。如下，
item.checked为真时，会增加checked这个class。item.checked && item.age >= 18为真时，会增加isHigh这个class。
{ checked: item.checked, isHigh: item.checked && item.age >= 18 } 1. 数组形式。默认给所有都加上了 checkbox 这个 class。 ['checkbox',{ checked: item.checked, isHigh: item.checked && item.age >= 18 }]
事件
事件是我们开发中必不可少的东西。比如 click、input 等等。
我们在 Vue 中，绑定事件使用 v-on（缩写是 @）来绑定事件。下面两种写法是等价的。
<button v-on:click="clickHandler">btn</button>
<button @click="clickHandler">btn</button>
指令
指令 (Directives) 带有 v- 前缀，如刚才我们用到的 v-bind、v-on、v-text、v-html。
指令的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
<a v-bind:href="url">...</a> <a :href="url">...</a> <button v-on:click="clickHandler">btn</button> <button @click="clickHandler">btn</button> <span v-text="author"></span> <span v-html="author"></span>
Vue 自带的指令
- v-text 更新元素
textContent，我个人感觉还是模板字符串好用
- v-html 更新元素的
innerHTML，这里需要注意 XSS 防护哟。
- v-show 切换元素的
display，来实现显示隐藏。
- v-if、v-else、v-else-if 通过组件销毁重建，来实现显示隐藏。
- v-for 遍历，这里要注意使用
:key。
<div v-for="(item, index) in items"></div> <div v-for="(val, key) in object"></div> <div v-for="(val, name, index) in object"></div>
6.v-on 用于绑定事件。组件上如果想触发元素的原生事件可以用.native。缩写是@
- 修饰符
.stop- 调用event.stopPropagation()。
.prevent- 调用event.preventDefault()。
.capture- 添加事件侦听器时使用 capture 模式。
.self- 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias}- 只当事件是从特定键触发时才触发回调。
.native- 监听组件根元素的原生事件。
.once- 只触发一次回调。
.left- (2.2.0) 只当点击鼠标左键时触发。
.right- (2.2.0) 只当点击鼠标右键时触发。
.middle- (2.2.0) 只当点击鼠标中键时触发。
.passive- (2.3.0) 以{ passive: true }模式添加侦听器
7.v-bind 设置属性。缩写是:
- 修饰符：
.prop- 作为一个 DOM property 绑定而不是作为 attribute 绑定。(差别在哪里？).camel- (2.1.0+) 将 kebab-case attribute 名转换为 camelCase。(从 2.1.0 开始支持).sync(2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的v-on侦听器。
8.v-model 用于实现数据双向绑定，其实是个语法糖
<input v-model="value">等价于<input ：value="value" @input="value = $event.target.value">- 只可以在指定的元素上使用
<input>、<select>、<textarea>元素的表单 DOM- components 自定义的组件
- 修饰符：
9.v-slot 为插槽传入 prop 的时候使用。默认是 default，缩写是 #
10.v-pre 跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
11.v-cloak 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以 隐藏未编译的 Mustache 标签直到实例准备完毕。
12.v-once 只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
动态指令
从 2.6.0 开始，可以用 方括号 （\[ 和 \]）括起来的 JavaScript 表达式作为一个指令的参数：
<a v-bind:\[attributeName\]="url"\> ... </a\> <a v-on:\[eventName\]="doSomething"\> ... </a\>
修饰符
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()
