插值
文本
数据绑定最常见的形式就是使用“Mustache”语法，即{{变量}}
<div id="app-1">
message:{{msg}}
</div>
<script>
var app1=new Vue({
el:"#app-1",
data:{
msg:"Hello World"
}
})
</script>
Mustache标签会被替代为对应数据对象上msg属性的值。无论何时，绑定的数据对象上msg属性发生了改变，插值处的内容都会更新。
<div id="app-1">
message:{{msg}}
<p v-once>
{{msg}}
</p>
</div>
<script>
var app1=new Vue({
el:"#app-1",
data:{
msg:"Hello World"
}
})
app1.msg="Hello Vue"
</script>
通过使用v-once指令，执行一次性地插值，当数据再发生改变时，{{msg}}不再发生变化
原始Html
双大括号会将html标签解释为普通文本，如果想要输出真正的html，可以使用v-html指令
<div id="app-2">
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
</div>
var app2=new Vue({
el:"#app-2",
data:{
rawHtml:"<span style='color:red'>this should be red</span>"
}
})
- 效果图
你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。
Attribute
Mustache语法不能作用在HTML的attributes上，遇到这种情况使用v-bind指令
<div id="app-3">
<p v-bind:id="userId">用户</p>
<button v-bind:disabled="flag">Button</button>
</div>
var app3=new Vue({
el:"#app-3",
data:{
userId:"007",
flag:true
}
})
对于flag的值（意味着只要存在值就为true,等于true表示这个按钮禁用），如果flag的值是null、false或undefinded这个按钮都是启用的
使用Javascript表达式
Vue模板不仅可以绑定简单的属性键值，但实际上还提供了Javascript表达式的支持（绑定Javascript表达式有个数限制，就是只支持单个表达式
<div id="app-4">
<p>{{number+1}}</p>
<p>{{ok?yes:'no'}}</p>
<p>{{ message.split('').reverse().join('') }}</p>
<div v-bind:id="'list-' + id">list</div>
<!--下面的表达式都不是单个表达式不支持模板语法-->
<!-- 这是语句，不是表达式 -->
<p>{{ var a = 1 }}</p>
<!-- 流控制也不会生效，请使用三元表达式 -->
<p>{{ if (ok) { return message } }}</p>
</div>
var app4=new Vue({
el:"#app-4",
data:{
number:1,
ok:true,
yes:"YES",
message:"123456789",
id:1
}
})
指令
指令是带有v-前缀的特殊attribute（例如v-if=“表达式”），attribute的值是单个表达式（v-for除外），当值发生改变时将其产生的连带影响，响应式地作用于 DOM
<div id="app-5">
<p v-if="seen">为true可以看见我哦！</p>
<p>{{foo}}</p>
<button v-on:click="foo='点击了一下按钮'">点击</button>
</div>
var app5=new Vue({
el:"#app-5",
data:{
seen:false,
foo:"未发生点击事件"
}
})
v-on:click=“foo=‘点击了一下按钮’”“”里面的就是表达式
这里，v-if 指令将根据表达式seen的值的真假来插入/移除元素。
参数
一些指令可以带有一个参数，指令名称后以冒号表示。例如 v-bind:参数="表达式"可以用于响应HTML标签的attribute，相信通过上面的解释什么是参数和什么是表达应该已经了解了。
<!--样式-->
<style type="text/css">
.blue{
color: blue;
font-size: 33px;
}
</style>
<!--html-->
<div id="app-6">
<p v-bind:class="blue">v-bind响应式的更新HTML标签attribute</p>
</div>
<!--JavaScript代码-->
var app6=new Vue({
el:"#app-6",
data:{
blue:"blue"
}
})
这里class是参数blue是表达式，v-bind将参数与表达式的值绑定
另一个指令v-on指令，用于监听DOM事件
<div id="app-7">
<p v-on:click="fun">点击</p>
</div>
var app7=new Vue({
el:"#app-7",
data:{
fun:function(){
alert('Hello World')
}
}
})
v-on:参数（事件名）=“表达式”
动态参数
从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：
<!--style样式-->
<style type="text/css">
.blue{
color: blue;
font-size: 33px;
}
</style>
<!--html代码-->
<div id="app-8">
<!--在 DOM 中使用模板时这段代码会被转换为 `v-bind:[attributename]`。-->
<a v-bind:[attributeName]="color">Javascript表达式动态求值</a>
</div>
<!--JavaScript-->
var app8=new Vue({
el:"#app-8",
data:{
attributename:"class",
color:"blue"
}
})
这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。
唯一要注意的是：浏览器会把 attribute 名全部强制转为小写：attributename因此要注意大小写，最好不用大写以免造成不必要的错误
再看一个例子
<div id="app-9">
<input type="text" v-on:[eventName]="doSomething" />
</div>
var app9=new Vue({
el:"#app-9",
data:{
eventname:"focus",
doSomething:function(){
alert("获取了焦点")
}
}
})
总结：在使用动态参数时需要注意三点
- 动态参数的值约束，也就是
eventname:“focus”,如果为null会被移除绑定，如果是非字符串Vue将会发出警告 - 动态表达式的约束，也就是
<a v-on:[‘foc’ + us]=“value”> …，如果存在空格和引号会发生编译警告 - 动态表达式的大小写，[eventName],浏览器会把其全部转换成小写eventname
修饰符
修饰符是以.为前缀指明特殊后缀
用于指出一个指令应该以特殊方式绑定。例如.prevent修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()（event.preventDefault()是表单提交时不跳转）
<div id="app-10">
<form v-on:submit.prevent="onSubmit" action="www.baidu.com">
<input type="submit" value="提交" />
</form>
</div>
var app10=new Vue({
el:"#app-10",
methods:{
onSubmit:function(){
alert("提交")
}
}
})
缩写
v-bind缩写
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
v-on缩写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>