学习Vue的第四天 Vue基础精讲（使用VS code写Vue）

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官网和慕课网