1、属性绑定
v-bind :
例如
<div id="root">
<div v-bind:title="title">hello world</div>
</div>
<script>
new Vue({
el:"#root",
data:{
title:"this is hello world"
}
})
</script>
v-bind可以缩写为“:”
即<div v-bind:title="title">hello world</div>可以写为
<div :title="title">hello world</div>
单向绑定:数据决定页面的显示,但页面不能决定数据的内容
双向绑定:数据决定页面的显示,但页面也能修改数据的内容
用v-model实现双向绑定
例如
<div id="root">
<input type="text" v-model:value="content">//当修改input的值时,content的值也会做相应修改
<div>{{content}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
content: "this is content"
},
})
</script>
2、vue中的计算属性和侦听器
2.1计算属性computed:一个属性通过其他属性计算而来
fullName由firstName和lastName计算而来.
当firstName和lastName不发生变化时,fullName不会重新计算而是调用缓存值,提高了程序效率。
<div id="root">
姓:<input type="text" v-model:value="firstName">
名:<input type="text" v-model:value="lastName">
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
firstName: '',
lastName: '',
},
//计算属性
computed:{
fullName: function () {
return this.firstName+" "+this.lastName
}
},
})
</script>
展示
2.1侦听器watch:监听某个数据的变化,一旦数据发生变化,就可以在侦听器中进行逻辑计算
<div id="root">
姓:<input type="text" v-model:value="firstName">
名:<input type="text" v-model:value="lastName">
<div>{{fullName}}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
firstName: '',
lastName: '',
fullName: ''
},
watch:{
firstName:function () {
this.fullName=this.firstName+" "+this.lastName;
},
lastName: function () {
this.fullName=this.firstName+" "+this.lastName;
}
}
})
</script>
结果展示:
2.3 计算属性computed的getter和setter:
<div id="root">
{{fullName}}
</div>
<script>
var vm=new Vue({
el: "#root",
data: {
firstName: 'Dell',
lastName: 'Lee',
fullname: 'Dell Lee'
},
computed:{
fullName:{
get: function () {
return this.firstName+" "+this.lastName
},
set: function (value) {
var arr=value.split(" ");
this.firstName=arr[0];
this.lastName=arr[1];
}
}
}
})
结果展示: