1，双大括号语法
a.双大括号输出文本内容
b.js表达式
案例源码
<body>
<div id="app">
<h3>1.{{}}双大括号输出文本内容</h3>
<p>{{msg}}</p>
<h3>2.可以使用JS表达式，进行运算</h3>
<p>{{sorce+2}}</p>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
msg:'test',
sorce:1000
}
})
</script>2，v-once一次性插值
通过使用 v-once指令，只能执行一次插值，当数据再次改变时，插值处的内容不会更新。
?案例源码
<body>
<div id="app">
<h3>1.{{}}双大括号输出文本内容</h3>
<p>{{msg}}</p>
<h3>2.可以使用JS表达式，进行运算</h3>
<p>{{sorce+2}}</p>
<h3>3.v-once一次性插值</h3>
<p v-once>{{msg}}</p>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
msg:'test',
sorce:1000
}
})
</script>3,v-html指令输出真正的html内容
1.格式不与v-once相同，他的后面需要有等于号。如下v-html=“XXXX”
为什么要用等号这种格式呢？
因为双大括号{{? }}会将数据解释为普通文本，为了输出真正的HTML我们要用v-html=“XX”这种格式
（重要）2.还能防止XSS攻击
接下来我来详细说一下
Vue 为了防止 XSS 攻击，在此指令上做了安全处理，当发现输出内容有 script 标签时，则不渲染XSS 攻击主要利用 JS 脚本注入到网页中，读取 Cookie 值（Cookie一般存储了登录身份信息）读取到了发送到黑客服务器，从而黑客可以使用你的帐户做非法操作。
下面我来具体用代码演示一下
<h3>4.指令输出真正的html内容</h3>
<p>{{aaaHtml}}</p>
<p v-html=" aaaHtml"></p>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
msg:'test',
sorce:1000,
aaaHtml:'<span style="color:red">此内容的字为红色
<script>alert(123)<\/script></span>'
}
})
</script>效果图（可以看出alert窗口并未弹出）
4，v-bind元素绑定指令
完整格式：v-bind：元素属性名=“XXXX”? ? ? 简写格式：? ? ：元素属性名=“XXXX”?
作用：将数据动态绑定到指定元素上
案例源码
<h3>5.v-bind元素绑定指令</h3>
<img src="URLimg" alt="">
<img v-bind:src="URLimg" alt="" width="200">
<img :src="URLimg" alt="" width="200">
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
msg:'test',
sorce:1000,
aaaHtml:'<span style="color:red">此内容的字为红色<script>alert(123)<\/script></span>',
URLimg:'https://cn.vuejs.org/images/logo.svg'
}
})
</script>5.v-on事件绑定指令
完整格式：v-on：事件名称=“事件处理函数名”? ? 简写格式： @事件名称=“事件处理函数名”
作用：用于监听DOM事件
接下来我们用v-on来实现一下每点击1次，数据就加1的事件
1.首先写一个按钮button，内容为点击+1，使用v-on然后使用click事件出发的方法是我给他起一个名字叫做add? ?<button v-on:click="add">点击+1</button>
2.我们显示一下加1完的数字 我们给它起个名字叫num，在下面的script的data中我们给它赋值，默认它为0? ? ? ????<p>{{num}}</p>? ? 在script的data中 num：0
3.我们来写一下add发法，但方法我们不能写在data中，应写在methods中，他和data，el 是同一级别的?methods:{add:function(){this.num++?}} 方法的名字add，this拿到的是Vue实例，按我们正常的习惯是this.data.num，但是你可以把那个点data省略掉
案例源码
<h3>6.v-on事件绑定指令</h3>
<p>{{num}}</p>
<button v-on:click="add">点击+1</button>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
num:1
},
methods:{
add:function(){
this.num++
}
},
})
</script>
</html>效果图
?