初识Vue
先引入 Vue.js ；
<script src="./res/vue.js"></script>
vue.js 是开发版的 vue.js 会有报错提示，比较友好；生产环境中使用 vue.min.js
准备好一个容器：
<div id="root">
<h1>Hello {{name}}</h1>
</div>
再写一段Vue：
// 创建vue实例
const vm = new Vue({
el: '#root', // 用于指定当前 Vue实例为哪个容器服务，值通常为 css选择器字符串
data: { // data 用于存储数据，供 el 所指定容器使用，仍然是配置对象的方式；
name:"Vue"
}
});
效果：
左边显示了页面效果，右边显示 Vue Devtools 插件的效果；在插件中，可以修改 Vue 的值，会在左侧页面中同步修改，非常方便；
注意： 插件里的 Root 是指根，跟页面中的 #root 没关系；
【代码解析】：
1）el ，是 element 的缩写；
用于跟容器中的 #root 绑定，一个 Vue 容器只会被一个 Vue 实例接管；
2）data ，存储实例对象的各种属性
可供容器中使用；
3）{{name}} ，是Vue的插值语法方式，固定写法，用在标签内；
同时 {{}} 也是JS表达式，可以执行有值的运算，如：{{1+3}} 或{{Date.now()}}；
还可以这样：{{name.toUpperCase()}}，输出变大写了；
控制台修改 data 的属性值，前端界面上会自动更新；
【总结】：
1）Vue 本质是一个构造函数，实例化对象要 new，所有属性参数都放在配置对象中;
2）root 容器里的代码依然符合 html 规范，只是混入了 Vue 语法；
3）root 容器里的代码被称为 “Vue模板” ；
4）Vue实例和容器是一一对应的；
5）开发中只有一个Vue实例，并且会配合着组件一起使用；
6）{{XXX}} 中的XXX要写JS表达式，且XXX可以自动读取到 data 中的所有属性；
7）一旦 data 中的数据发生改变，那么模板中用到该数据的地方也会自动更新；
模板语法
Vue模板语法分 插值语法 和 指令语法；
写个插值语法和指令语法：
<div id="root">
<h1>插值语法</h1>
<h3>你好，{{name}}</h3>
<hr>
<h1>指令语法</h1>
<a v-bind:href="url">51CTO首页</a>
</div>
使用 v-bind:给 href 这个标签属性绑定了 url，这时的 url 就成了 表达式 ，相当于读取 url 这个变量，这个变量的值存在 data 中，已经写好了；
注意：写在引号中的 url 被 v-bind 绑定后，就不在是字符串了；
new Vue({
el: '#root',
data: {
name: "Jack",
url:"https://www.51cto.com/"
}
});
页面效果：
元素结果：
Vue 里的指令语法都是 v-xxx 的形式，如： v-if ，v-modle ，v-on 等；
v-bind 也可以绑定其他属性，并不是只有 href，如：title 和自定义属性；
<a v-bind:href="url" v-bind:title="slogan" v-bind:date-index="index">51CTO首页</a>
//在data中也定义个slogan和index属性
data:{
//...
slogan:"技术成就梦想",
index:66
}
v-bind 可以简写在:，简化代码量；
<a v-bind:href="url" v-bind:title="slogan" v-bind:date-index="index">51CTO首页</a>
<!-- 等价于 -->
<a :href="url" :title="slogan" :data-index="index">51CTO首页</a>
上面的写法再变一变：
<div id="root">
<h1>插值语法</h1>
<h3>你好，我叫{{name}}({{age}}岁),在学习{{course}}。</h3>
<hr>
<h1>指令语法</h1>
<a :href="webSite.url" :title="webSite.slogan" :data-index="webSite.index">{{webSite.name}}首页</a>
</div>
new Vue({
el: '#root',
data: {
name: "Jack",
age: 28,
course: "Vue",
webSite: {
name: "51CTO",
slogan: "技术成就梦想",
url: "https://www.51cto.com/",
index: 66
}
}
});
如果要调用的属性比较多，尤其是重命情况，那可以多级分层出来，单独写在配置对象中；
注意在指令绑定时，要写成 webSite.name 的形式，把层级体现出来；
看下结果：
【总结】
Vue 模板语法有2大类：
1）插值语法：
功能：用于解析标签体内容；
写法：{{xxx}}，xxx 是 JS 表达式，且可以直接读取到 data 中的所有属性；
2）指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件...）;
举例： v-bind:href="url" 或简写成 :href="url" ， xxx 同样要写成JS表达式，且可以直接读取到 data 中的所有属性；
备注：Vue 中有很多的指令，且形式都是： v-xxx ，此处只是拿 v-bind 举个例子；
