二、Vue基础语法

1、插值语法

Mustache语法

Mustache语法：胡子/胡须（双大括号），不仅仅可以直接写变量，也可以写简单的表达式

<div id="app">
			<!-- Mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式 -->
			<h2>{{message}}</h2>
			<h2>{{message}},桃子</h2>
			<h2>{{firstname +' ' + lastname}}</h2>
			<h2>{{firstname}} {{lastname}}</h2>
			<h2>{{counter * 2}}</h2>
		</div>
		
		<script>
		    const app = new Vue({
				el:"#app",
				data:{
					message:'你好啊',
					firstname:'kobe',
					lastname:'bryant',
					counter:100
				}
			})
		</script>

v-once语法

在某些情况下，我们可能不希望页面随意的跟随改变，这个时候我们就可以使用一个Vue的指令：v-once

该指令后面不需要跟任何的表达式（比如之前的v-for后面是有跟表达式的）。该指令表示元素和组件（组件后面才会学习）只渲染一次，不会随着数据的改变而改变。

        <div id="app">
		    <h2>{{message}}</h2>
			<h2 v-once>{{message}}</h2>
		</div>
		
		<script>
		    const app = new Vue({
				el:"#app",
				data:{
					message:'你好啊'
				}
			})
		</script>

v-html语法

在某些情况下，我们从服务器请求到的数据本身就是一个HTML代码，如果我们直接通过{{}}来输出，会将html代码也一起输出，但是我们可能希望的是按照HTML格式进行解析，并且显示对应的内容。可以用v-html指令，该指令后面往往会跟上一个String类型，会将String的html解析出来并且进行渲染。

        <div id="app">
		    <h2 v-html="url">{{url}}</h2>
		</div>
		<script>
		    const app = new Vue({
				el:"#app",
				data:{
					message:'你好啊',
					url:'<a href="http://www.baidu.com">百度一下</a>'
				}
			})
		</script>

v-text语法

v-text作用和Mustache比较相似，都是用于将数据显示在界面中。v-text通常情况下，接受一个string类型。不过一般情况下不用他，因为他不够灵活。

        <div id="app">
			<h2>{{message}},桃子</h2>
		    <h2 v-text="message">,桃子</h2>
		</div>
		<script>
		    const app = new Vue({
				el:"#app",
				data:{
					message:'你好啊'
				}
			})
		</script>

v-pre语法

用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。

        <div id="app">
			<h2>{{message}}</h2>
		    <h2 v-pre>{{message}}</h2>
		</div>
		<script>
		    const app = new Vue({
				el:"#app",
				data:{
					message:'你好啊'
				}
			})
		</script>

v-cloak

cloak（斗篷）在某些情况下，我们浏览器可能会直接显示出未编译的Mustache标签。

        <style>
		    [v-cloak]{
				display: none;
			}
		</style>

        <div id="app" v-cloak>
			<h2>{{message}}</h2>
		</div>
		<script>
		    //在vue解析之前，div中有一个属性v-cloak
			//在vue解析之后，div中没有一个属性v-cloak
		    setTimeout(function(){
				const app = new Vue({
					el:"#app",
					data:{
						message:'你好啊'
					}
				})
			},1000)
			
		</script>    

2、绑定属性

v-bind介绍

前面我们学习的指令主要作用是将值插入到我们的模板的内容当中，但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定，比如动态绑定a元素的href属性、比如动态绑定img元素的src属性。

这时候我们可以使用v-bind指令：

• 作用：动态绑定属性
• 缩写：：
• 预期：any(with argument)|Object(without argument)
• 参数：attrOrProp (optional)

v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值（这个学到组件时在介绍）

v-bind有一个对应的语法糖，也就是简写的方式，在开发中，我们经常会使用语法糖的形式，因为这样更加简洁。v-bind的简写只需写一个：即可。

        <div id="app">
			<!-- 注意这里不能写成src="{{imgURL}}",Mustache语法只能在内容content里面才能使用         -->
			<!-- 正确的做法是在前面加上v-bind -->
			<img v-bind:src="imgURL" alt=""/> 
			<!-- v-bind语法糖的写法（简写）只需写一个：即可 -->
			<a :href="aHref">百度一下</a>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
		    const app = new Vue({
				el:"#app",
				data:{
					message:'你好啊',
					imgURL:'https://img2.baidu.com/it/u=4033504488,813972093&fm=26&fmt=auto&gp=0.jpg',
				    aHref:'Http://www.baidu.com'
				}
			})
		</script>

v-bind动态绑定class属性

很多时候，我们希望动态的来切换class，比如：当数据为某个状态时，字体显示红色，当数据为另一个状态时，字体显示黑色。

绑定class有两种方式：对象语法、数组语法

• 绑定方式：对象语法

对象语法的含义是：class后面跟的是一个对象，对象语法有下面这些用法：

        <div id="app">
			<!-- 
			<h2 class="active">{{message}}</h2>
			<h2 :class="active">{{message}}</h2> 
			-->
			
			<!-- <h2 v-bind:class="{key1: valu1 , key2: value2}"></h2> -->
			<!-- <h2 v-bind:class="{类名1: true , 类名2: false}"></h2> -->
			<!-- v-bind绑定后的class属性会和前面未绑定的class属性合并 -->
 			<h2 class="title" v-bind:class="{active: isActive , online: isline}">{{message}}</h2>
			<button v-on:click="btnClick">点击更改颜色</button>
			<!-- 当内容过于复杂时，可以放在一个methods或computed中 -->
 			<h2 class="title" v-bind:class="getClasses()">{{message}}</h2>
 		</div>
		
		<script src="../js/vue.js"></script>
		<script>
		    const app = new Vue({
				el:"#app",
				data:{
					message:'你好啊',
					isActive:true,
					isline:true
				},
				methods:{
					btnClick:function(){
						this.isActive =! this.isActive;
					},
					getClasses:function(){
						return {active: this.isActive, line: this.isline};
					}
				}
			})
		</script>

• 绑定方式：数组语法

数组语法的含义是：class后面跟的是一个数组。

数组语法有下面这些用法：

        <div id="app">
			<!-- 注意区别一个是字符串一个是变量 -->
			<h2 class="line" :class="['active','title']">{{message}}</h2>
			<h2 class="line" :class="[active,title]">{{message}}</h2>
			<!-- 如果过于复杂，可以放到methods中 -->
			<h2 class="line" :class="getClasses()">{{message}}</h2>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
		    const app = new Vue({
				el:"#app",
				data:{
					message:'你好啊',
					active:'aaaa',
					title:'bbbb'
				},
				methods:{
					getClasses:function(){
						return [this.active,this.title]
					}
				}
			})
		</script>

v-bind绑定style

我们可以利用v-bind：style来绑定一些CSS内联样式。在写CSS属性名的时候，比如：font-size，我们可以使用驼峰式（camelCase）fontSize或短横线分隔（kebab-case，记得用单引号括起来）'font-size'

绑定语法有：对象语法、数组语法

• 对象语法

• 数组语法

 style后边跟的是一个数组类型，多个值用“,”分割即可

3、计算属性

我们知道，在模板中可以直接通过插值语法显示一些data中的数据，但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示，比如我们有firstName和lastName两个变量，我们需要显示完整的名称，但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}}{{lastName}}

我们可以将上面的代码换成计算属性，计算属性是写在实例的computed选项中的。

        <div id="app">
			<!-- 第一种方法：直接表示，比较麻烦，代码过长 -->
			<h2>{{firstName}} {{lastName}}</h2>
			<!-- 第二种方法：在methods中写一个方法来表示 -->
			<h2>{{getFullName()}}</h2>
			<!-- 第三种：用计算属性来表示 -->
			<h2>{{fullName}}</h2>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
		    const app = new Vue({
				el:"#app",
				data:{
					firstName:'Michael',
					lastName:'Jordan'
				},
				//计算属性
				computed:{
					fullName:function(){
						return this.firstName + ' ' + this.lastName
					}
				},
				methods:{
					getFullName(){
						return this.firstName + ' ' + this.lastName
					}
				},
				
			})
		</script>

计算属性的setter和getter

每个计算属性都包含一个getter和一个setter，在上面的例子中，我们只是使用getter来读取，在某些情况下你也可以提供一个setter方法（不常用）

        <div id="app">
			<h2>{{fullName}}</h2>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
		    const app = new Vue({
				el:"#app",
				data:{
					firstName:'kobe',
					lastName:'bryant'
				},
				computed:{
					//这种方法是简写
					// fullName(){
					// 	return this.firstName + ' ' + this.lastName
					// }
					
					//计算属性一般是没有set方法，只读属性
					fullName:{
						//一般不写set方法，
						set:function(newValue){
							console.log('------' + newValue);
							const names = newValue.split(' ');
							 this.firstName = names[0];
							 this.lastName = names[1];
							 
						},
						get:function(){
							return this.firstName + ' ' + this.lastName
						}
					}
				}
			})
		</script>

计算属性的缓存

我们可能会考虑这样一个问题：methods和computed看起来都可以实现我们的功能，那么为什么还要多一个计算属性这个东西呢？

原因：计算属性会进行缓存，如果多次使用时，计算机属性只会调用一次。

补充：ES6

let/var

事实上var的设计可以看成JavaScript语言设计上的错误，但是这种错误多半不能修复和移除，因为需要向后兼容。大概十年前，Brendan Eich就决定修复这个问题，于是他添加了一个新的关键字let。我们可以将let看成更完美的var

块级作用域：JS中使用Var来声名一个变量时，变量的作用域主要是和函数的定义有关，针对于其他块定义来说是没有作用域的，比如if/for等，这在我们开发中往往会引发一些问题。

ES5之前因为if和for都没有作用域的概念，所以在很多时候，我们都必须借助于function的作用域来解决应用外面变量的问题。ES6中加入了let，let他是有块级作用域的。

   <body>
		
		<button>按钮1</button>
		<button>按钮2</button>
		<button>按钮3</button>
		<button>按钮4</button>
		<button>按钮5</button>
		
		<script>
		    //1、变量作用域：变量在什么范围是可用的
			{
				var name = 'taozi';
				console.log(name);//此处可以打印成功
			}
			console.log(name);//在{}外边也可以运行成功，var没有块级作用域
			
			//2、没有块级作用域引起的问题:if的块级
			var func; 
			if(true){
				var name = 'taozi';
				func = function(){
					console.log(name);
				}
				func();//此时打印出来的name值为taozi
			}
			//若在if语句外修改了name的值再次打印的name的值将会变成kobe
			name = 'kobe';
			func();
			
			//3、没有块级作用域引起的问题：for的块级
			// var btns = document.getElementsByTagName('button');
			// for(var i=0; i < btns.length; i++){
			// 	btns[i].addEventListener('click',function(){
			// 		//此时会发现点击第一个按钮时显示第5个按钮被点击
			// 		console.log('第' + i + '个按钮被点击！');
			// 	})
			// 	//可通过写一个闭包解决问题
			// 	//为什么闭包可以解决问题：因为函数是一个作用域
			// 	// (function(i){
			// 	// 	btns[i].addEventListener('click',function(){
			// 	// 		//此时会发现点击第一个按钮时显示第5个按钮被点击
			// 	// 		console.log('第' + i + '个按钮被点击！');
			// 	// 	})
			// 	// })(i)
			// }
			
            //ES6中let有if和for作用域
			const btns = document.getElementsByTagName('button');
			for(let i=0; i < btns.length; i++){
				btns[i].addEventListener('click',function(){
					console.log('第' + i + '个按钮被点击！');
				})
			}
			
		</script>
	</body>

const的使用

const关键字在很多语言中已经存在，比如C/C++中，主要作用是将某个变量修饰为常量，在JavaScript中也是如此，使用const修饰的标识符为常量，不可以再次赋值。

什么时候使用const呢？当我们修饰的标识符不会被再次赋值时，就可以使用const来保证数据的安全性。

建议在开发中优先使用const，只有需要改变某一个标识符的时候才使用let。

注意：

• const的注意一：

const a = 20;
a = 10;//错误，不可以修改

• const的注意二：

const name;//错误，const修饰的标识符必须赋值

 对象增强语法

ES6中，对对象字面量进行了很多增强。

属性的初始化简写 和方法的简写：

            //1、属性的增强写法
			const name = 'taozi';
			const age = 18;
			const height = 1.88;
			//ES5的写法
			// const obj = {
			// 	name:name,
			// 	age:age,
			// 	height:height				
			// }
			const obj = {
				name,
				age,
				height
			}
			console.log(obj);
			
			//2、函数的增强写法
			//ES5的写法
			// const obj = {
			// 	run:function(){
					
			// 	}
			// }
			//增强写法，更加简洁
			const obj = {
				run(){
					
				},
				eat(){
					
				}
			}