1、插值绑定
1.1、文本插值
文本插值的方式十分简单，只要用双大括号（Mustache语法）将要绑定的变量、值、表达式括住就可以实现，Vue将会获取计算后的值，并以文本的形式将其展示出来。
<p>{{value}}</p><p>{{value ? '1':'0'}}</p><p>{{fun()}}</p>
1.2、HTML插值
通过前面的文本插值插入的HTML不会渲染的，要想插入的HTML渲染，只能使用 v-html 指令了。
<p v-html='htmlValue'></p>
2、属性绑定
2.1、v-bind指令
DOM节点的属性可以使用v-bind指令进行绑定。
<p v-bind:id='idStr'></p>
2.2、类名绑定
我们可以通过字符串、数组和对象三种方式为节点动态绑定类名属性。在使用对象绑定类名时，应将类名作为对象键名，当键值被判定为真时，类名将被绑定到节点上。
<div id='app'> <!-- 第一种方式:对象的形式 --> <p :class="cObj"></p> <!-- 第二种方式: 数组的形式 --> <p :class="cArr"></p> <!-- 第三种方式: 字符串的形式 --> <p :class="cStr"></p> <!-- 数组中用对象 --> <p :class="cArrObj"></p></div><script>let vm = new Vue({ el:'#app', data(){ return { cStr:'class01', cObj:{ 'class02':true }, cArr:['class03'], cArrObj:[{'class04': false},'class03'] }; }});</script>
2.3、样式绑定
我们可以通过字符串和对象2种方式为节点动态绑定样式属性。在使用对象绑定样式属性时，应将样式属性名作为对象键名，样式属性值为键值，当键值被判定为
假（空值、未定义等）时，样式属性将不会被绑定到节点上。
<div id='app'> <!-- 第一种方式:对象的形式 --> <p :style="sObj"></p> <!-- 第二种方式: 字符串的形式 --> <p :style="sStr"></p> <!-- 第三种方式: 数组对象的形式 --> <p :class="[sObj,sObj2]"></p></div><script>let vm = new Vue({ el:'#app', data(){ return { sStr:'color:red', sObj:{ 'color':'red' }, sObj2:{ 'fontSize':'30px } }; }});</script>
3、事件绑定
Vue使用v-on指令监听DOM事件，开发者可以将事件代码通过v-on指令绑定到DOM节点上
<div id='app'> <button v-on:click='met01'>btn</button> <!-- 简写形式 --> <button @click='met01'>btn</button></div><script>let vm = new Vue({ el:'#app', methods:{ met01(){} }});</script>
3.1、事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。
<!-- 当事件触发时，阻止事件冒泡 --><button v-on:click.stop="met"></button><!-- 当事件触发时，阻止元素默认行为 --><button v-on:click.prevent="met"></button><!-- 当事件触发时，阻止事件捕获 --><button v-on:click.capture="met"></button><!-- 限制事件仅作用于节点自身 --><button v-on:click.self="met"></button><!-- 点击事件将只会触发一次 --><button v-on:click.once="met"></button><!-- 移动端，限制事件永不调用preventDefault()方法 --><button v-on:click.passive="met"></button><!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --><!-- 而不会等待 `onScroll` 完成 --><!-- 这其中包含 `event.preventDefault()` 的情况 --><div v-on:scroll.passive="onScroll">...</div><!-- 修饰符可以串联 --><button v-on:click.stop.prevent="met"></button><script>let vm = new Vue({ el:'#app', methods:{ met(){} }});</script>
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
3.2、按键修饰符
在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.met()` --><input v-on:keyup.enter="met"><input v-on:keyup.13="met"><!-- Alt + C --><input v-on:keyup.alt.67="met"><!--系统修饰键可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。.ctrl.alt.shift.meta注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。--><!-- Ctrl + Click --><div v-on:click.ctrl="met"></div><script>let vm = new Vue({ el:'#app', methods:{ met(){} }});</script>
