携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第12天
一、模板语法
html 中包含了一些 JS 语法代码，语法分为两种，分别为：
插值语法（双大括号表达式）；指令（以 v-开头）。
1.插值语法
1）功能: 用于解析标签体内容
2）语法: {{xxx}} ，xxxx 会作为 js 表达式解析
2.指令语法
1）功能: 解析标签属性、解析标签体内容、绑定事件
2）举例：v-bind:href = 'xxxx' ，xxxx 会作为 js 表达式被解析
3）说明：Vue 中有有很多的指令，此处只是用 v-bind 举个例子
二、数据绑定
1.单向数据绑定
1）语法：v-bind:href ="xxx" 或简写为 :href
2）特点：数据只能从 data 流向页面
2.双向数据绑定
1）语法：v-mode:value="xxx" 或简写为 v-model="xxx"
2）特点：数据不仅能从 data 流向页面，还能从页面流向 data
三、事件处理
1.绑定监听
1）v-on:xxx="fun"
2）@xxx="fun"
3）@xxx="fun(参数)"
4）默认事件形参: event
5）隐含属性对象: $event
2.事件修饰符
1）prevent : 阻止事件的默认行为 event.preventDefault()
2）stop : 停止事件冒泡 event.stopPropagation()
3.按键修饰符
1）keycode : 操作的是某个 keycode 值的键
2）keyName : 操作的某个按键名的键(少部分)
四、计算属性与监视
1.计算属性-computed
1）要显示的数据不存在，要通过计算得来。
2）在 computed 对象中定义计算属性。
3）在页面中使用{{方法名}}来显示计算的结果。
2.监视属性-watch
1）通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性
2）当属性变化时, 回调函数自动调用, 在函数内部进行计算
五、class 与 style 绑定
在应用界面中, 某个(些)元素的样式是变化的；class/style 绑定就是专门用来实现动态样式效果的技术。
1.class 绑定
1）:class='xxx'
2）表达式是字符串: 'classA'
3）表达式是对象: {classA:isA, classB: isB}
4）表达式是数组: ['classA', 'classB']
2.style 绑定
1）:style="{ color: activeColor, fontSize: fontSize + 'px' }"
2）其中 activeColor/fontSize 是 data 属性
