Vue:vue中的指令（属性绑定指令、事件绑定指令、修饰符、双向绑定指令...）

内容指令

v-text指令：
v-text 和原生js中的 innerText 差不多，都无法解析标签，会把标签当做文本输出，在vue中使用 v-text指令会覆盖标签原来的内容
代码示范：

<template>
	<div>
		# 最后输出结果为Hello  Vue~~会被覆盖掉
		<p v-text="msg">Vue~~</p>
	</div>
</template>
<script>
	export default{
		data(){
			return {
				msg:'Hello'
			}
		}
	}
</script>

v-html指令
v-html和原生js中的innerHTML差不多，都可以解析标签，在vue中v-html也会覆盖标签原来的内容
代码示范：

<template>
	<div>
		# 最后输出结果为加粗的Hello  Vue~~会被覆盖掉
		<p v-html="msg">Vue~~</p>
	</div>
</template>
<script>
	export default{
		data(){
			return {
				msg:'<strong>Hello</strong>'
			}
		}
	}
</script>

{{}} 插值表达式
差值表达式是vue中最常用的一个指令，因为它用起来灵活，且不会覆盖标签中原来的内容，但是，差值表达式 {{}} 不能在标签的属性中使用
代码示范：

<template>
	<div>
		# 最后输出结果为Hello Vue~~
		<p>{{msg}} Vue~~</p>
		# 插值表达式这样使用是不正确的
		<input type="text" value="{{abc}}" />
	</div>
</template>
<script>
	export default{
		data(){
			return {
				msg:'Hello',
				abc:'word'
			}
		}
	}
</script>

属性绑定指令

v-bind:可以动态的为属性绑定值，加了属性绑定指令后，属性的值可以是动态的，如果不加则就是普通的字符串或值
代码示范：

<template>
	<div>
		# 这样文本框就会动态的显示数据
		<input type="text" v-bind:placeholder="msg" />
		# 如果不加属性绑定指令，输出的只是个单纯的字符串"msg"
		<input type="text" placeholder="msg" />
	</div>
</template>
<script>
	export default{
		data(){
			return {
				msg:'请输入内容...'
			}
		}
	}
</script>

v-bind:属性=值 可以简写为 :属性=值
代码简单示范：

<input type="text" :placeholder="msg" />

事件绑定指令

v-on:事件类型=事件函数 可以为某个元素绑定事件
代码示范：

<template>
	<div>
		<p>当前是第 {{page}} 页</p>
		# 事件函数在methods节点中定义
		<button v-on:click="addPage">点击+1页</button>
	</div>
</template>
<script>
	export default{
		data(){
			return {
				page:1
			}
		},
		methods:{
			addPage(){
			// data和methods中定义的数据和方法，都存到了当前vue组件的实例中
			// 通过this.的方式即可拿到数据或方法
				this.page++
			}
		}
	}
</script>

v-bind:事件类型=事件函数 可以简写为 @事件类型=事件函数
代码简单示范：

<button @click="addPage">点击+1页</button>

给事件函数传参
第一种情况：没有参数，在UI结构中直接写函数名即可，在定义事件函数时，默认的第一个参数就是事件对象

<template>
	<div>
		<button @click="sum">按钮</button>
	</div>
</template>
<script>
	export default{
		methods:{
			sum(e){
				console.log(e.target)
			}
		}
	}
</script>

第二种情况：有参数，在UI结构中写函数名加小括号即可

<template>
	<div>
		<button @click="sum(2,4)">按钮</button>
	</div>
</template>
<script>
	export default{
		methods:{
			sum(x,y){
				console.log(x+y)
			}
		}
	}
</script>

第三种情况：有参数，但还想使用事件对象，在UI结构中写函数名加小括号，小括号里写对应的参数，然后再加上$event ，这个是固定写法，$event 代表的就是事件对象

<template>
	<div>
		<button @click="sum(2,4,$event)">按钮</button>
	</div>
</template>
<script>
	export default{
		methods:{
			sum(x,y,e){
				console.log(x+y)
				console.log(e.target)
			}
		}
	}
</script>

事件修饰符

.prevent 表示阻止事件的默认行为，比如a标签的默认跳转，表单的默认提交等
.stop 表示阻止事件冒泡
事件修饰符语法：@事件.事件修饰符="函数名称" 或 @事件.事件修饰符.事件修饰符="函数名称"
代码示范：

<template>
	<div>
		# 不想让a跳转到百度
		<a href="https://www.baidu.com" @click.prevent="go">百度</a>
	</div>
</template>
<script>
	export default{
		methods:{
			go(){
				console.log('不会去到百度首页')
			}
		}
	}
</script>

键盘事件修饰符

键盘事件修饰符只针对于键盘事件
键盘事件修饰符语法：@键盘事件.enter="函数名称"
@keyup.enter 表示当弹起enter回车键才会触发
@keydown.esc 表示当按下esc键才会触发
@keyup.1表示当按下键码为1的键时才触发，并不是表示按下数字1
代码示范：

<template>
	<div>
		# 按下回车键后触发send事件
		<input type="text" @keyup.enter="send" />
	</div>
</template>
<script>
	export default{
		methods:{
			send(){
				console.log('发送一条消息')
			}
		}
	}
</script>

双向绑定指令

v-model="xxx" 可以实现双向绑定，当页面中的数据更改时，vue调试工具中的data数据也会更改，相反，当vue调试工具中的 data 数据更改时，页面中的数据也会更改
v-model 常用于input selected textarea 这类的表单项
代码示范：

<template>
	<div>
		# 在input中使用了v-model，相当于是value="xxx"，不用再写value属性
		<input type="text" name="username" v-model="username" />
		<input type="password" name="password" v-model="password" />
	</div>
</template>
<script>
	export default{
		data(){
			return {
				// 和页面中的数据进行了双向的绑定
				username:'',
				password:''
			}
		}
	}
</script>

双向绑定的修饰符

.lazy 表示当输入框失去焦点时监测值的变化，不再实时监测
.trim 表示去除输入框中内容两边的空白
.number 表示只允许输入数字(但是当一开始就写入abc，该修饰就不起作用了)
语法：v-model.修饰符="xxx"
代码示范：

<template>
	<div>
		<input type="text" name="username" v-model.lazy.trim="username" />
		<input type="password" name="password" v-model.lazy="password" />
	</div>
</template>
<script>
	export default{
		data(){
			return {
				username:'',
				password:''
			}
		}
	}
</script>

条件渲染指令：v-if 和 v-show

v-if 和 v-show 都是用来表示，当满足条件时，显示和隐藏元素，结果为true则显示元素，结果为false则隐藏元素
不同的是，v-if 的隐藏是直接把元素移除了，而v-show 的隐藏是添加了display:none 属性
且v-if 可以进行多条件的判断，比如：v-if v-else-if v-else，类似于原生js中的 if else if else
代码示范：

<template>
	<div>
		# 如果条件为ture则显示元素，反之则隐藏元素
		<p v-if="num > 5">num的值大于5</p>
		<p v-else-if="num > 10">num的值大于10</p>
		
		<p v-show="num > 20">num的值大于20</p>
	</div>
</template>
<script>
	export default{
		data(){
			return {
				num:10
			}
		}
	}
</script>

列表渲染指令

v-for 可以对元素进行循环渲染
语法：v-for=(循环的每个元素,每个元素的索引) in data中的数据"
如果用不到索引，可以不写小括号，只写循环的每个元素即可：v-for="item in data中的数据"
在实际开发中，建议使用到了v-for 的地方就要加上:key，这是为了保证在更新数据时，数据的状态不会紊乱，且:key 的值需要是唯一的，不能重复，一般用数据中的id当做:key的值
代码示范：

<template>
	<div>
		<ul>
			# 要循环谁，就给谁加v-for
			<li v-for="item in list" :key="item.id">{{item.uname}}</li>
		</ul>
	</div>
</template>
<script>
	export default{
		data(){
			return {
				list:[
					{id:1,uname:'Alex'},
					{id:3,uname:'Tala'},
					{id:7,uname:'Bob'}
				]
			}
		}
	}
</script>