Vue模板语法

1. 引入Vue.js
   2. 创建Vue对象
      el : 指定根element(选择器)
      data : 初始化数据(页面可以访问)
   3. 双向数据绑定 : v-model
   4. 显示数据 : {{xxx}}
   5. 理解vue的mvvm实现

实例：
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
// 创建Vue实例（Vue是一个vue.js库提供的构建函数）
const vm = new Vue({//配置对象（属性名必须是指定的一些名称）
el: '#app',//element:选择器，表明将页面哪个元素交给Vue管理
data: {//数据（Model）
username: 'Vue'
}
})
vm.username = 'kobe';
</script>

MVVM：
Model：模型，数据对象（data）
View：视图，模板页面
ViewModel：视图模型（Vue的实例）

1. 模板的理解:
   动态的html页面
   包含了一些JS语法代码
   大括号表达式
   指令(以v-开头的自定义标签属性)
2. 双大括号表达式
   语法: {{exp}}
   功能: 向页面输出数据
   可以调用对象的方法
3. 指令一: 强制数据绑定
   功能: 指定变化的属性值
   完整写法:
   v-bind:xxx='yyy' //yyy会作为表达式解析执行
   简洁写法:
   :xxx='yyy'
4. 指令二: 绑定事件监听
   功能: 绑定指定事件名的回调函数
   完整写法:
   v-on:click='xxx'
   简洁写法:
   @click='xxx'