使用Vue框架可以专注于数据,专注于逻辑层面的问题。Vue通过 {{}} 插值 、v-bind和v-model 指令来控制数据。
{{}} 插值
插值经常用在标签之间需要改变的html内容上
<div id='app'>
<p>{{message}}</p>
</div>
...
const vm = new Vue({
el:'#app',
data:{
message:'<a href="https://baidu.com">百度</a>'
}
})
可见插值作为一串字符串被直接输出了,并不会渲染。
修改下代码:
<div id='app'>
<p v-html='message'>{{message}}</p>
</div>
...
const vm = new Vue({
el:'#app',
data:{
message:'<a href="https://baidu.com">百度</a>'
}
})
由上图可见,v-html会直接在p上渲染,并把{{message}}给删了。
v-bind
强制绑定,v-bind经常用在属性值或类名上,将一个属性的值绑定到一个变量上,更改变量来更改属性值
<div id="app">
<button v-bind:title='mes'></button>
</div>
...
const vm = new Vue({
el:'#app',
data:{
mes:'111',
}
})
v-bind必须要放在属性或者类的前面,或者说,v-bind后需要加一个对象,如果直接给data对象中的一个属性的值将会报错。
此外v-bind可以省写为:
...
<button v-bind:title='mes'></button>
<button :title='mes></button>
...
v-bind所绑定的数据是不可以影响 data 内部的变量的,但data内部的变量变化时,可以影响v-bind所绑定的内容。
v-model
v-model是双向绑定,不同于v-bind将值链接到所选的属性上,v-model所绑定的值是可以改变data中的属性的。
<div id="app">
<span>Change Name:</span>
<input type="text" placeholder="Name" v-model="name2">
</div>
...
const app = new Vue({
el:'#app',
data:{
name:'',
}
})
v-model之所以为双向绑定,是因为v-model所绑定的内容会影响到data内部的数据,同理data内部数据的更改也会影响v-model绑定的内容。