Vue的基础语法（一）

一、插值语法

• Mustache语法，既双大括号。
• Mustache语法不仅可以直接写变量，也可以写简单的表达式

{{message}}
{{firstName + lastName}}
{{firstName + ' ' + lastName}}  =   {{firstName}} {{lastName}}

• v-once：不会跟着数据的改变而改变，只会渲染一次！

<h2 v-once>{{message}}</h2>

• v-html：请求的数据本身就是一个HTML代码。

<h2 v-html="url"></h2>
...
data:{
	url: "<a href='http://www.baidu.com'>百度一下</a>"
}

• v-test： 与Mustache比较相似：都是用于将数据显示在界面中。但通常情况下只接手一个String类型。

<!--可观察两个输出结果，v-text会将“，123”内容覆盖，不显示-->
<h2>{{message}},123</h2>
<h2 v-text="message">,123</h2>

• v-pre：用于跳过这个元素和子元素的编译过程，既显示原本的Mustache语法。

<!--前提，message赋值为“你好啊”-->
<h2>{{message}}</h2>  <!--你好啊-->
<h2 v-pre>{{message}}</h2>  <!--{{message}}-->

• v-cloak：斗篷，某些情况下，浏览器可能会直接显示出未编译的Mustache标签，既js代码有延迟。

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

二、绑定属性

• v-bind：用于绑定一个或多个属性值，或者向另一个组件传递props值。
• 作用：动态绑定属性
• 缩写（语法糖）： “：”

1. 动态绑定class（对象语法）

<!--1.以键值对的方式，（键=》类名，值=》boolean值）
	2.和普通类共存，不冲突也不覆盖，vue会自动合并！
	3.如果过于复杂/长，可以放在一个methods/computed中返回
-->
<h2 :class="{active: isActive,line: isLine}">{{message}}</h2>

<h2 :class="getActive()">{{message}}</h2>
...

methods:{
	getActive(){
		return {active: this.isActive,line: this.isLine}
	}
}

2. 动态绑定class（数组语法）

<!--注意：数组中是字符串，如果没有单引号就是变量了！ 这个方法用得少~ -->
<h2 :class="['active','line']">{{message}}</h2>

3. 动态绑定style（对象语法）

<!--1. {(属性名，属性值)} 如果属性值是直接50px则需要加单引号，否则就是变量！
	2. 属性名有两种写法，例如：font-size / fontSize
-->
<h2 :style="{font-size: '50px'}">{{message}}</h2>
<h2 :style="{fontSize: fontSize + 'px'}">
...
data:{
	fontSize: 50
}

4. 动态绑定style（数组语法）

<!--1. 用的比较少~ 
 	2. 同样是上面的道理，没有单引号就是变量，有单引号就是字符串。
 	3. 数组里无法直接放键值对，所以使用这个的话一般放变量，变量里面再放键值对。
-->
<div :style="[baseStyles, overridingStyles]"></div>
...
data:{
	baseStyle: {backgroundColor: 'red', fontSize: '100px'}
}

三、计算属性

• computed:{…}
• 当需要多次调用的时候，只会调用一次！性能更高~，且有缓存。

1. 基本使用

<h2>{{fullName}}</h2>  <!--不用加括号，当成属性来使用~ -->

<script>
	const app = new Vue({
		el: "#app",
		data: {
			...
		},
		computed:{ //定义函数，函数名一般不加动词！
			fullName: function(){
				return this.firstName + ' ' + this.lastName
			} //看起来像是函数，实际是属性！
		}
	})
</script>

2. 复杂操作

<h2>{{totalPrice}}</h2> 

<script>
	const app = new Vue({
		el: "#app",
		data: {
			...
		},
		computed:{ 
			totalPrice: function(){
				let result = 0
				for( let i = 0 ;i < this.books.length; i++){
					result += this.books[i].price
				}
				return result
			}
		}
	})
</script>

3. 计算属性的setter和getter（完整写法）
   3.1 一般实现get方法！ 只读属性！ 无set方法！
   3.2 下面的简写版就是上面“基本使用”所展示的样子。
   3.3 set方法如果要实现是有参数的，但不常用。可自行测试~

<h2>{{fullName}}</h2> 

<script>
	const app = new Vue({
		el: "#app",
		data: {
			...
		},
		computed:{
			fullName:{
				set: function(){} //一般省略，可删除！
				/*set: function(newValue){  //3.3的实现~
					console.log(newValue)
				}*/
				get: function(){
					return this.firstName + ' ' + this.lastName
				}
			} 
		}
	})
</script>

4. 计算属性和methods的对比

<!--调用了两次-->
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>


<!--只调用了一次，有缓存,性能更佳~ -->
<h2>{{FullName}}</h2>
<h2>{{FullName}}</h2>

<script>
	const app = new Vue({
		el: "#app",
		data: {
			...
		},
		computed:{
			fullName: function(){
			console.log("fullname")
				return this.firstName + ' ' + this.lastName
			}
		},
		methods:{
			getFullName:function(){
				console.log("getfullname")
				return this.firstName + ' ' + this.lastName
			}
		}
	})
</script>

四、事件监听

• v-on: / 语法糖：@

1. 基本使用

<button @click="increment">+</button>
<script>
	methods:{
		increment(){
			this.counter ++
		}
	}
</script>

2. 参数问题

<!--2.1 无额外参数，则方法后面的（）可加可不加~-->
<button @click="increment">+</button>
<button @click="increment()">+</button>
<script>
	methods:{
		increment(){
			this.counter ++
		}
	}
</script>


<!--2.2 在事件定义时，写方法时省略了小括号，
	但是方法本身是需要一个参数，
	这个时候Vue会默认将浏览器生产的event事件对象作为参数传入
-->
<button @click="increment(123)">+</button>  <!--123-->
<button @click="increment()">+</button>  <!--undefined-->
<button @click="increment">+</button>   <!--event对象-->

<script>
	methods:{
		increment(event){
			console.log(event)
		}
	}
</script>


<!--2.3 方法定义时，我们需要event对象，同时又需要其他参数-->
<button @click="increment(123,$event)">+</button>  <!--123 , 手动拿到event对象-->
<button @click="increment(123)">+</button>  <!--123 undefined-->
<button @click="increment()">+</button>  <!--undefined undefined-->
<button @click="increment">+</button>   <!--event对象  undefined-->

<script>
	methods:{
		increment(abc,event){
			console.log(abc,event)
		}
	}
</script>

3. 修饰符的使用

<!--3.1 stop修饰符的使用（阻止冒泡）-->
<!-- 1.当点击按钮的时候，div也被点击了=》 这就是事件冒泡
	 2. 但只想点击按钮的时候，只有button被点击而不包括div，怎么做呢？
-->
<div @click="divClick">
	aaaa
	<button @click="buttonClick">按钮</button>
</div>
<!--阻止冒泡的方法-->
<div @click="divClick">
	aaaa
	<button @click.stop="buttonClick">按钮</button>
</div>


<!--3.2 prevent修饰符的使用（阻止默认事件）-->
<!--阻止submit的原生提交，用事件点击来提交。-->
<input type="submit" value="提交" @clcik.prevent="SubmitClick">


<!--3.3 监听某个键盘的键帽-->
<input type="text" @keyup="keyup"> <!--所有键帽-->
<input type="text" @keyup.enter="keyup"> <!--回车键帽-->


<!--3.4 .once，只显示一次-->
<button @click.once="buttonClick">按钮</button>


<!--3.5 .native，监听组件根元素的元素事件, 注意是在监听组件的时候才需要加~ -->
<button @click.native="buttonClick">按钮</button>