1.Vue的模板语法
1)插值表达式(两个花括号)
<!-- 挂载点 -->
<div id="app">
{{name}} <!-- 定义一个变量 -->
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
name: "BELL"
}
})
</script>
2)v-text(功能和插值表达式一样,转译输出)
<div id="app">
<div v-text="name"></div>
</div>
3)v-html(可转译html格式)
<div id="app">
<div>{{name}}</div>
<div v-text="name"></div>
<div v-html="name"></div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
name: "<h1>BELL</h1>"
}
})
</script>
运行结果:
【注】当看到v-指令后面跟着一个值的时候,“”里的值不再是一个字符串了,它指的一定是JS的表达式。
4)JS表达式的写法——连接字符串
<div id="app">
<div>{{name + ' Lee'}}</div>
<div v-text="name + ' Lee'"></div>
<div v-html="name + ' Lee'"></div>
</div>
2.计算属性、方法与侦听器
1)计算属性(内置缓存机制,性能高)
<!-- 挂载点 -->
<div id="app">
{{fullName}}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
firstName: "BELL",
lastName: "Lee"
},
// 计算属性(值是一个函数)
computed: {
fullName: function() {
return this.firstName + " " + this.lastName
}
}
})
</script>
2)方法(无内置缓存机制)
<div id="app">
{{fullName()}} <!-- 使用方法需调用 -->
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
firstName: "BELL",
lastName: "Lee"
},
// 方法
methods: {
fullName: function() {
return this.firstName + " " + this.lastName
}
}
})
</script>
3)侦听器(和computed一样都具备缓存的机制,但语法较复杂,性能不高)
var vm = new Vue({
el: "#app",
data: {
firstName: "BELL",
lastName: "Lee",
fullName: "BELL Lee"
},
//侦听器
watch: {
firstName: function() {
console.log("计算了一次")
this.fullName = this.firstName + " " + this.lastName;
},
lastName: function() {
console.log("计算了一次")
this.fullName = this.firstName + " " + this.lastName;
}
}
})
3.计算属性的getter和setter
【注】computed的另一种写法
<!-- 挂载点 -->
<div id="app">
{{fullName}}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
firstName: "BELL",
lastName: "Lee"
},
computed: {
fullName: {
get: function() {
return this.firstName + " " + this.lastName
},
//在后台更改:vm.xxx
set: function(value) {
var arr = value.split(" ");
this.firstName = arr[0];
this.lastName = arr[1];
}
}
}
})
</script>
运行结果:
【注】以上学习内容来自Vue.js官网和慕课网