1、插值表达式
1）、花括号
格式：{{表达式}}
说明：
该表达式支持 JS 语法，可以调用 js 内置函数（必须有返回值）
表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：let a = 1 + 1;
可以直接获取 Vue 实例中定义的数据或函数
2）、插值闪烁
使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的`{{}}`， 加载完毕后才显示正确数据，我们称为插值闪烁。 我们将网速调慢一些，然后刷新页面，试试看刚才的案例：
3）、v-text 和 v-html
可以使用 v-text 和 v-html 指令来替代{{}}
说明：
v-text：将数据输出到元素内部，如果输出的数据有 HTML 代码，会作为普通文本输出
v-html：将数据输出到元素内部，如果输出的数据有 HTML 代码，会被渲染
<div id="app"> v-text:<span v-text="hello"></span> <br /> v-html:<span v-html="hello"></span> </div><script src="./node_modules/vue/dist/vue.js"></script> <script> let vm = new Vue({ el: "#app", data: { hello: "<h1>大家好</h1>" } }) </script>
并且不会出现插值闪烁，当没有数据时，会显示空白或者默认数据
2、v-bind
html 属性不能使用双大括号形式绑定，我们使用 v-bind 指令给 HTML 标签属性绑定值； 而且在将 `v-bind` 用于 `class` 和 `style` 时，Vue.js 做了专门的增强。
1）、绑定 class
div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div> <script> let vm = new Vue({ el: "#app", data: { isActive: true, hasError: false } }) </script>
2）、绑定 style
`v-bind:style` 的对象语法十分直观，看着非常像 CSS，但其实是一个 JavaScript 对象。style
属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，这种方式记得用单引号括起 来) 来命名。 例如：font-size-->fontSize
<div id="app" v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> <script> let vm = new Vue({ el: "#app", data: { activeColor: 'red', fontSize: 30 } }) </script>
3）、绑定其他任意属性
<div id="app" v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }" v-bind:user="userName"> </div> <script> let vm = new Vue({ el: "#app", data: { activeColor: 'red', fontSize: 30, userName: 'zhangsan' } }) </script>
4）、v-bind 缩写
<div id="app" :style="{ color: activeColor, fontSize: fontSize +'px' }":user="userName"> </div>
3、v-model
刚才的 v-text、v-html、v-bind 可以看做是单向绑定，数据影响了视图渲染，但是反过来就不 行。接下来学习的 v-model 是双向绑定，视图（View）和模型（Model）之间会互相影响。 既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前
v-model 的可使用元素有：
- input
- select
- textarea
- checkbox
- radio
- components（Vue 中的自定义组件）
基本上除了最后一项，其它都是表单的输入项。 示例：
<div id="app"> <input type="checkbox" v-model="language" value="Java" />Java<br /> <input type="checkbox" v-model="language" value="PHP" />PHP<br /> <input type="checkbox" v-model="language" value="Swift" />Swift<br /> <h1> 你选择了：{{language.join(',')}} </h1> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> let vm = new Vue({ el: "#app", data: { language: [] } }) </script>
多个`CheckBox`对应一个 model 时，model 的类型是一个数组，单个 checkbox 值默认是
boolean 类型
radio 对应的值是 input 的 value 值
`text` 和`textarea` 默认对应的 model 是字符串
`select`单选对应字符串，多选对应也是数组
4、v-on
1、基本用法
v-on 指令用于给页面元素绑定事件。 语法： v-on:事件名="js 片段或函数名"
示例：
<div id="app"> <!--事件中直接写 js 片段--> <button v-on:click="num++">点赞</button> <!--事件指定一个回调函数，必须是 Vue 实例中定义的函数--> <button v-on:click="decrement">取消</button> <h1>有{{num}}个赞</h1> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> let vm = new Vue({ el: "#app", data: { num: 100 }, methods: { decrement() { this.num--; //要使用 data 中的属性，必须 this.属性名 } } }) </script>
另外，事件绑定可以简写，例如`v-on:click='add'`可以简写为`@click='add'`
