模板语法
Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
文本
数据绑定最常见的形式就是两个大括号{{}}，大括号中间的内容是data里面的数据，不仅可以是变量还可以是表达式。当绑定的数据对象上的属性值发生改变，插值处的内容就会更新。
示例：
<body>
<div id="app">
<!-- 变量 -->
<p>{{ message }}</p>
<!-- 表达式 -->
<p>{{ num + 1}}</p>
</div>
<script>
var app = new Vue({
el:"#app",
data() {
return{
message: "小飞侠",
num: 10
}
}
})
</script>
</body>
</html>
v-html指令的使用
有时我们可能想要在data中直接定义html代码，如下所示：
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el:"#app",
data() {
return{
message: "<span>0085</span>"
}
}
})
</script>
</body>
</html>
但是此时浏览器页面中会输出 <span>0085</span>，而不是 0085。这是因为双大括号会将数据解释为普通文本，而非 HTML 代码。
如果想要输出真正的 HTML，则需要用到 v-html 指令，如下所示：
<body>
<div id="app">
<p>{{ message }}</p>
<p v-html="message"></p>
</div>
<script>
var app = new Vue({
el:"#app",
data() {
return{
message: "<span>0085</span>"
}
}
})
</script>
</body>
需要注意的是，动态渲染的任意 HTML 可能会存在安全隐患，因为它很容易导致 XSS攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。
v-bind指令的使用
我们可以通过v-bind指令将data里面的数据绑定到元素的属性上。v-bind可以绑定html元素中的各种属性，例如id、class、style、href等等。
示例：
使用v-bind指令绑定属性，最常见的就是id，我们一起来看一下：
<body>
<div id="app">
<p v-bind:id="id">将id绑定到元素属性上</p>
</div>
<script>
var app = new Vue({
el:"#app",
data() {
return{
id: 'oldId'
}
}
})
</script>
</body>
在浏览器页面中可以看到如下图所示内容：
我们还可以通过在methods方法中定义函数来修改id的值：
<body>
<div id="app">
<div v-bind:id="id">
<button v-on:click="changeId">changeId</button>
</div>
</div>
<script>
var app = new Vue({
el:"#app",
data() {
return{
id: 'oldId'
}
},
methods:{
changeId:function(){
this.id = 'newId';
}
}
})
</script>
</body>
上述代码中，我们给html中的按钮绑定了一个changeId函数，在这个函数中修改了id属性的值。
使用 JavaScript 表达式
在Vue.js中我们可以在模板中绑定简单的属性键值，而对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。
例如下面这些表达式在所属 Vue 实例的数据作用域下作为 JavaScript 被解析：
{{ count + 1 }}
{{ ok ? 'YES' : 'NO' }}
<div v-bind:id="'list-' + id"></div>
但是这有一个限制，就是每个绑定都只能包含单个表达式，否则不会生效。
v-model 指令
在 html中的input 输入框中，我们可以使用 v-model 指令来实现双向数据绑定。它本质上是一个语法糖。
示例：
如下所示，是一个双向数据绑定的小例子：
除了
input以外，v-model指令还可以用来在 select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
v-on指令
v-on指令可用来绑定事件监听器，用在普通元素上时，只能监听原生DOM事件，用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
在监听原生 DOM 事件时，方法以事件为唯一的参数。下面是一些常用的语法：
<!-- 方法处理器 -->
<button v-on:click="func"></button>
<!-- 缩写 -->
<button @click="func"></button>
<!-- 内联语句 -->
<button v-on:click="func('hello', $event)"></button>
<!-- 停止冒泡 -->
<button @click.stop="func"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="func"></button>
<!-- 点击回调只会触发一次 -->
<button v-on:click.once="func"></button>
示例：
<body>
<div id="app">
<button v-on:click="fun_btn">点击事件</button>
</div>
<script>
var app = new Vue({
el:"#app",
// methods用于存放vue的处理方法的
methods:{
fun_btn(){
alert("点击事件");
}
}
})
</script>
</body>
在浏览器中演示，当点击按钮时，会弹出一个弹出层。
指令的参数
某些指定名称之后用冒号表示的就是它的参数，例如v-bind:id，其中的 id 就是 v-bind指令所接收的参数。
示例：
例如下面这段代码中，href就是指令的参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
<body>
<div id="app">
<a v-bind:href="url">herf是参数</a>
</div>
<script>
var app = new Vue({
el:"#app",
data() {
return{
url: 'https://www.9xkd.com/'
}
}
})
</script>
</body>
在浏览器中的显示：
指令的缩写形式
Vue.js 为两个最为常用的指令提供了特别的缩写，即v-bind和v-on指令。
v-bind指令的缩写形式如下所示：
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
v-on指令的缩写形式如下所示：
<!-- 完整语法 -->
<a v-on:click="on"></a>
<!-- 缩写 -->
<a @click="on"></a>
