渐进式JavaScript框架。
（对比：jQery是一个JS库）
渐进式：在原有项目中，可以先尝试引入一两个组件，可以当插件用，也可以用来开发整个项目。
（对比Angular）
一、插值表达式/小胡子语法/mustache语法：{{}}
其实就是个模板，读取data中的数据并且展示出来
<div id="dog">
{{ name }}
</div>
<script>
const vm = new Vue(
el:'#dog',
data:{
name:'旺财;
}
)
</script>
注意：
1.不能使用data中不存在的数据
2.{{}}中可以写表达式，例如{{1+1}}、{{[a, b, c].join('-')}}、{{ok? 1: 2}}
3.{{}}中不能出现JS的关键字，比如for什么的
4.不能在属性中使用，例如<h1 title="{{msg}}"></h1>是错误的，只能在标签的内容中使用
data中的数据，可以在插值表达式中使用，也可以在指令中使用
插值表达式不能在指令或者是属性中使用
二、vue指令（Directives）
带有v-前缀的特殊属性，可以在html标签中使用，可以看成特殊的html属性。
指令不会单独存在，都是绑定在标签上的，为标签增加一些特殊的行为。
v-bind: 可以让html的属性使用data中的数据（属性中又不能使用插值表达式，那么怎么使用data中的数据呢睡吧。使用频率很高，可以简写成:）
上面说过差值表达式不能在属性中使用，如果要在属性中使用data中的数据，那么就要使用v-bind指令了。
//可以缩写为<h1 :title="msg">你好</h1>
<h1 v-bind:title="msg">你好</h1>
<script>
const vm = new Vue({
el:'#dog',
data:{
msg:'东莞去吗'
}
})
</script>
v-model:用在表单元素上，实现和data中的数据双向数据绑定（v-model会忽略所有表单的value、checked、selected特性的初始值）
<div id="dog">
//v-model取代了value属性
<input type="text" v-model="msg">
</div>
<script>
const vm = new Vue({
el:'#dog',
data:{
msg:'hello world'
}
})
<script>
<div id="dog">
<select v-model="role">
<option value="1">亚瑟<option>
<option value="2">安其拉<option>
<option value="3">菠萝<option>
</select>
<p>{{ role }}</p>
</div>
<script>
var vm = new Vue({
el:'#dog',
data:{
role:2
}
})
</script>
v-text:读取data中的数据，并且修改当前元素的innerText（textContent）属性
<div id="dog">
<h1 v-text="msg">这里的内容不会显示，因为被覆盖掉了</h1>
</div>
<script>
const vm = new Vue({
el:'#dog',
data:{
msg:'nihaoma'
}
})
</script>
v-html:修改当前元素的innerHTML属性，标签可以生效这样子（永远不要用在用途提交的内容上）
v-on:用来注册事件（简写为@）
v-on:事件名称 = '事件函数'
<div id="dog">
<!-- <button v-on:click="mClick">click me</button> -->
<button @click="mClick">click me</button>
</div>
<script>
const vm = new Vue({
el:'#dog',
data:{
...
},
methods:{
mClick(){
console.log('你点了我')
}
}
})
</script>
v-for:用于重复的渲染某一个元素
基本用法
v-for="item in list"，item表示数组中的每一项，list表示data中的数据。
<div id="dog">
<ul>
<li v-for="item in list">{{ item }}</li>
</ul>
</div>
<script>
const vm = new Vue({
el:'#dog',
data:{
list:['a', 'b', 'c', 'd']
}
})
</script>
带下标模式
v-for="(v, i) in list" | v-for="(item, index)"（）
