编写步骤：
采用 <script> 标签引入 vue.js 库
定义一个 <div>
new Vue() 实例化Vue应用程序
el 选项： 元素element的缩写，指定被 Vue 管理的 Dom 节点入口（值为选择器 )，必须是一个普通的HTML 标签节点，一般是 div。
data 选项：指定初始化数据，在 Vue 所管理的 Dom 节点下，可通过模板语法来进行使用
标签体显示数据： {{xxxxx}}
表单元素双向数据绑定： v-model
注意： el 的值不能为 html 或 body
源码实现
常见面试题：什么是 MVVM 模型？
MVVM 是 Model-View-ViewModel 的缩写，它是一种软件架构风格
Model：模型， 数据对象（data选项当中的）
View：视图，模板页面（用于渲染数据）
ViewModel：视图模型，其实本质上就是 Vue 实例
它的哲学思想是: 通过数据驱动视图，把需要改变视图的数据初始化到 Vue中，然后再通过修改 Vue 中的数据，从而实现对视图的更新。
声明式编程:按照 Vue 的特定语法进行声明开发，就可以实现对应功能，不需要我们直接操作Dom元素
命令式编程：Jquery它就是，需要手动去操作Dom才能实现对应功能。
Vue Devtools 插件让我们在一个更友好的界面中审查和调试 Vue 项目。
可生成动态的HTML页面，页面中使用嵌入 Vue.js 语法可动态生成
格式： v-html=‘xxxx’
作用：
如果是HTML格式数据，双大括号会将数据解释为普通文本，为了输出真正的 HTML，你需要使用 v-html 指令。
Vue 为了防止 XSS 攻击，在此指令上做了安全处理，当发现输出内容有 script 标签时，则不渲染
XSS 攻击主要利用 JS 脚本注入到网页中，读取 Cookie 值（Cookie一般存储了登录身份信息），读取到了发送到黑客服务器，从而黑客可以使用你的帐户做非法操作。
XSS 攻击还可以在你进入到支付时，跳转到钓鱼网站。
案例源码：
效果图
computed 选项定义计算属性
计算属性 类似于 methods 选项中定义的函数
计算属性 会进行缓存，只在相关响应式依赖发生改变时它们才会重新求值。
函数 每次都会执行函数体进行计算。
需求：输入数学与英语分数，采用 methods 与 computed 分别计算出总得分
案例源码
computed 选项内的计算属性默认是 getter 函数，所以上面只支持单向绑定，当修改数学和英语的数据才会更新总分，而修改总分不会更新数据和英语
当属性数据发生变化时,对应属性的回调函数会自动调用, 在函数内部进行计算
通过 watch 选项 或者 vm 实例的 $watch() 来监听指定的属性
需求：
通过 watch 选项 监听数学分数， 当数学更新后回调函数中重新计算总分sumScore3
通过 vm.$watch() 选项 监听英语分数，当英语更新后回调函数中重新计算总分sumScore3
源码实现：
注意: 在data 选择中添加一个 sumScore3 属性
通过 class 列表和 style 指定样式是数据绑定的一个常见需求。它们都是元素的属性，都用 v-bind 处理，其中表达式结果的类型可以是：字符串、对象或数组。
v-for 迭代数组
语法： v-for="(alias, index) in array"
说明： alias : 数组元素迭代的别名； index : 数组索引值从0开始(可选)
举例
items 是源数据数组， item 是数组元素迭代的别名。
注意：使用 key 特殊属性， 它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素
v-for 迭代对象的属性
语法： v-for="(value, key, index) in Object"
说明： value : 每个对象的属性值; key : 属性名(可选); index : 索引值(可选)
举例：
注意: 在遍历对象时，是按 Object.keys() 的结果遍历，但不能保证它的结果在不同的 JavaScript 引擎下是顺序一致的。
可用 of 替代 in 作为分隔符
完整格式： v-on:事件名=“函数名” 或 v-on:事件名=“函数名(参数……)”
缩写格式： @事件名=“函数名” 或 @事件名=“函数名(参数……)” 注意： @ 后面没有冒号
event ：函数中的默认形参，代表原生 DOM 事件
当调用的函数，有多个参数传入时，需要使用原生DOM事件，则通过 $event 作为实参传入
作用：用于监听 DOM 事件
案例源码
v-model 指令用于表单数据双向绑定，针对以下类型：
