基本指令

v-html

	作用： 相当于js中的innerHTML，插入元素，可以输入html标签
	使用：<div v-html="message"></div>
	总结：有时后台会返回一段带html标签的数据而不是字符串，这是v-html就有用武之地了。

v-text

	作用： 相当于js中的innerText，插入文本，等同于插值表达式/mustache语法 -- {{}}
	使用：<div v-text="message"></div>
	注意：解析不了html标签。
	总结：不常用

v-pre

	作用：跳过使用此语法的元素极其子元素，直接显示插值表达式内容，加快编译速度，一般静态内容不需要解析的可以使用。
	使用：<div v-pre>{{message}}</div>
	注意：没有使用指令且未使用插值表达式使用，不然会显示{{要解析的数据名}}
	总结：特定场景使用，提高性能。

v-cloak

	作用：页面加载时的数据会出现插值表达式在页面上闪烁，使用v-cloak指令则在表达式内的值未渲染完成则隐藏。
	使用：<div v-cloak>{{message}}</div>
	总结：出现令用户无法的理解代码，会影响用户体验感，优化用户使用体验

v-once

	作用：对于只需要渲染一次的数据，v-once使其节点以及子节点以下所有节点都不进行第二次渲染。
	使用：这里使用定时器测试下，使其作用看起来更直观

	<!-- html -->
		<div v-once>{{message}}</div>
	<!-- mounted -->
		mounted() {
			setTimeout(() => { //使用了v-once则不会受到第二次数据变动的影响
				this.message = 'change value'
				log(this.message)
			},5000)
		}

	注意：只能渲染一次，不要忽略了子节点内的数据，如果子节点需要动态接收数据状态则不适合用
	总结：一次性数据进行过滤，提高性能

判断指令

v-if

	作用：对元素的显隐的判断操作
	使用：<div v-if="is_show">message</div>
	注意：它与另外一个判断指令v-show的区别就在于，不符合判断的被绑定的这个节点就会连同被整个删除。
	总结：对于节点的显隐判断操作还是非常频繁的，不过v-if对节点显隐操作的消耗更大，不适合频繁对元素进行的显隐操作

V-else-if & v-else

	作用：就是正常的if判断，一级判断未进入则进入二级判断，否则进入else
	使用：

	<div v-if="is_show" @click="please_hidden">{{message}}</div>
	<div v-else-if="!is_show">else-if偷偷跑出来的</div>
	<div v-else>else偷偷跑出来的</div>

	注意：与v-if成对出现
	总结：使用时如果注意到时频繁操作，除非需要涉及到一些安全性问题，v-show会有。

v-show

	作用：根据判断对绑定元素进行显隐操作
	使用：<div v-show="is_show" @click="please_hidden">is_show</div>
	注意：使用v-show的元素即使隐藏或显示了，也可以通过浏览器将其显示/隐藏
	总结：适合频繁的显隐操作，以及不能让用户操作显隐的操作可以使用。

循环指令

v-for

	作用：循环数据并在页面中渲染
	使用

	<div v-for="(item,index) in user" :key="item.id">
		{{item.id}} + {{item.name}}
	</div>

	注意：:key是一定要添加的，否则在eslint或vuter中报错，在对于复杂的数据，
		  且有唯一id标识，比如对象数组的数据使用其id作为key值能提高性能，一般使用数组下标多为为了盖住警告，对性能无提优。
		  还有v-for和v-if一起使用时，v-for的优先级要比v-if高，所以循环的节点都会拥有v-if指令
	总结：使用很频繁，可以循环，String,Array,Object等...

双向绑定指令

v-model

	作用：常用于对form表单内元素的数据绑定
	使用：

	<div v-for="(item,index) in user" :key="item.id">
		{{item.id}} + {{item.name}}
	</div>
	<label for="user_id">用户id</label>
	<input type="text" v-model="userId" id="user_id" value="" />
	<label for="user_name">用户姓名</label>
	<input type="text" v-model="userName" id="user_name" value="" /> </br>
	<button @click="add">添加数据</button>
	<div>双向绑定的数据<span>用户id：{{userId}}</span><span>用户名:{{userName}}</span></div>
	<!-- methods方法 -->
		add() {
			this.user.push({ id: this.userId, name: this.userName })
			log(this.user)
		}

	总结：对于用户form表单上的数据绑定很有用

属性绑定指令

v-bind

	作用：将元素的属性使用动态的方式绑定，例如image的src,或普通元素的clss/style ，等等...
	使用：

	<!-- html -->
		<div v-bind:style="active_style">
		<!-- 可以绑定style，直接使用对象绑定。可以动态改变其中的某个样式状态 -->
			style
		</div>
		<div :class="is_show ? 'active_class' : '' ">
			<!-- 绑定的同时也可以使用判断表达式作为是否绑定的条件，这里使用三元运算符 -->
			class
		</div>
		<div :class="{'obj_sty':is_show,'obj_sty2': !is_show}">
			对象语法绑定
		</div>
		<div :class="[arr,{'arr_sty2':is_show}]">
			<!-- 直接选择data中的变量，如果值存在于样式中则添加样式，一般配合有需要动态判定样式的元素 -->
			数组语法绑定
		</div>
	<!-- css -->
		.active_class{
			text-align: center;
			line-height: 100px;
			width: 100px;
			height: 100px;
			border: 1px solid #CCCCCC;
			color: gold;
			font-size: 12px;
		}
		.obj_sty{
			font-size: 30px;
			color: red;
		}
		.obj_sty2{
			border: 10px solid skyblue;
		}
		.arr_sty{
			font-size: 25px;
			color: #5500ff;
		}
		.arr_sty2{
			font-family: "楷体"
		}
	<!-- 实例data中 -->
		

	总结：v-bind的使用十分频繁，只要需要动态修改的元素属性都会用到，其语法糖是<:>

修饰符

v-model修饰符（.lazy、.number、.trim）

.lazy

	作用：动态绑定input框输入时，v-model是在用户每一次输入/input事件后则同步数据，添加.lazy后则转变为每次onchange事件之后触发,如失焦，keyup.Enter操作之后同步数据
	使用：

	<input type="text" v-model.lazy="userId" id="user_id" value="" />

	注意：添加了.lazy修饰符就不能监听每一次keyup操作了，除了keyup.Enter以及使其输入框失焦的键盘操作
	总结：除了特殊要求外可以减轻监听的频率

.number

	作用：
	使用：

	<!-- html -->
		<input type="text" v-model.lazy.number="userId" id="user_id" value="" />
	<!-- 实例中 methods -->
		log("得到的值",this.userId) //通过打印我们看到原本String类型的值被转换成了Number类型
		log("查看输入的类型",typeof this.userId)

结果：

注意：当输入了数值型和字符串一起的值，输入字符串要先将字符串删除才会同步数据，且最终打印出来的只有数值，因为.number修饰符使用了parseInt方法去解析，字符串会被过滤出去
总结：由于此修饰符的限制性，这里建议使用正则表达式和Number来限制

	<!-- html -->
	//绑定一个input事件，注意不能使用.lazy修饰符，不然可以输入字符串，最后得到NaN
	<input type="text" v-model="userId" @input="u_input" id="user_id" value="" /> 
	<!-- input事件中 -->
	u_input(e){
		this.userId = this.userId.replace(/[^\d]/g,'')
	}
	<!-- 添加方法中 -->
	this.userId = Number(this.userId)

.trim

	作用：去除掉用户输入的左右两边的空格
	使用：<input type="text" v-model.lazy.number.trim="userName"  id="user_name" value="" />
	注意：使用了.lazy是失焦事件触发，否则是keydown触发
	总结：去除掉两边的空格

键盘事件（keydown/keypress/keyup）

	1. keydown: 当用户按下任意键时触发，按住不放，重复触发。
	2. keypress: 当用户按下且松开按键时触发，按住不放，重复触发
	3. keyup: 当用户释放按键时触发

键盘事件修饰符

	1. .enter //回车键
	2. .tab	 //切换键
	3. .delete  //删除
	4. .esc //返回/离开键
	5. .space //空格键
	6. .up // 方向上键
	7. .down //方向下键
	8. .left //方向左键
	9. .right //方向右键
	使用：

<!-- html -->
	<input type="text" placeholder="请使用按键/keydown" @keydown.a="key_p">
	<input type="text" placeholder="请使用按键/keypress" @keypress="key_p">
	<input type="text" placeholder="请使用按键/keyup" v-model="key_event" @keyup="key_ups">
<!-- methods -->
	key_p(){
		log('键盘事件')
	}
	<!-- 使用键盘按键码触发，可以判断用户使用的按键操作 -->
	key_ups(e){
		if(e.keyCode == 13){
			log('回车操作,获取用户输入数据:',this.key_event)
		}
	}
	<!-- 或者自定义键盘事件 -->
	//全局注册个指定键码
		Vue.config.keyCodes.a = 38

附上本篇所有代码

	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title></title>
			<style type="text/css">
				.show_hidden-enter-active,
				.show_hidden-leave-active {
					transition: all 1s ease
				}
	
				.show_hidden-enter,
				.show_hidden-leave-active {
					opacity: 0
				}
				.active_class{
					text-align: center;
					line-height: 100px;
					width: 100px;
					height: 100px;
					border: 1px solid #CCCCCC;
					color: gold;
					font-size: 12px;
				}
				.obj_sty{
					font-size: 30px;
					color: red;
				}
				.obj_sty2{
					border: 10px solid skyblue;
				}
				.arr_sty{
					font-size: 25px;
					color: #5500ff;
				}
				.arr_sty2{
					font-family: "楷体"
				}
			</style>
		</head>
		<body>
			<div id="app">
				<!-- 基本指令 -->
				<!-- <div v-html="message"></div> -->
				<!-- <div v-text="message"></div> -->
				<!-- <div v-pre>{{message}}</div> -->
				<!-- <div v-cloak>{{message}}</div> -->
				<!-- <div v-once>{{message}}</div> -->
				<!-- 判断指令 -->
				<!-- <transition name="show_hidden">
					<div v-if="is_show" @click="please_hidden">{{message}}</div>
					<div v-else-if="!is_show">else-if偷偷跑出来的</div>
					<div v-else>else偷偷跑出来的</div>
				</transition> -->
				<!-- <transition name="show_hidden">
					<div v-show="is_show" @click="please_hidden">is_show</div>
				</transition> -->
				<div v-for="(item,index) in user" :key="item.id">
					{{item.id}} + {{item.name}}
				</div>
				<label for="user_id">用户id</label>
				<input type="text" v-model="userId" @input="u_input" id="user_id" value="" />
				<label for="user_name">用户姓名</label>
				<input type="text" v-model.number.trim="userName"  id="user_name" value="" /> </br>
				<button @click="add">添加数据</button>
				<div>双向绑定的数据<span>用户id：{{userId}}</span><span>用户名:{{userName}}</span></div>
				<div v-bind:style="active_style"> 
				<!-- 可以绑定style，直接使用对象绑定。可以动态改变其中的某个样式状态 -->
					style
				</div>
				<div :class="is_show ? 'active_class' : '' ">
					<!-- 绑定的同时也可以使用判断表达式作为是否绑定的条件，这里使用三元运算符 -->
					class
				</div>
				<div :class="{'obj_sty':is_show,'obj_sty2': !is_show}">
					对象语法绑定
				</div>
				<div :class="[arr,{'arr_sty2':is_show}]">
					<!-- 直接选择data中的变量，如果值存在于样式中则添加样式，一般配合有需要动态判定样式的元素 -->
					数组语法绑定
				</div>
				
				<input type="text" placeholder="请使用按键/keydown" @keydown.a="key_p">
				<input type="text" placeholder="请使用按键/keypress" @keypress="key_p">
				<input type="text" placeholder="请使用按键/keyup" v-model="key_event" @keyup="key_ups">
				
			</div>
			<script src="../vue.js"></script>
			<script type="text/javascript">
				const {
					log
				} = console
				Vue.config.keyCodes.a = 38
				const vm = new Vue({
					el: '#app',
					data: {
						message: 'Hello Vue!',
						is_show: true,
						user: [{
								id: 1,
								name: '张三'
							},
							{
								id: 2,
								name: '张四'
							},
							{
								id: 3,
								name: '张五'
							},
						],
						userId: '', //双向绑定数据
						userName: '',
						active_style:{ //style 绑定的样式
							width: '100px',
							height:'100px',
							backgroundColor:'gray',
							borderRadius: '50%',
							lineHeight:'100px',
							textAlign:'center'
						},
						actives:false ,//v-bind class样式绑定开关
						arr: 'arr_sty',
						key_event:''
					}, 
					mounted() {
						setTimeout(() => {
							// this.message = 'change value'
							// log(this.message)
							// this.is_show = true
							this.actives = true
						}, 3000)
					},
					methods: {
						please_hidden() {
							this.is_show = false
						},
						add() { 
							this.user.push({ id: this.userId, name: this.userName })
							this.userId = Number(this.userId)
							log("得到的用户id值",this.userId)
							log("查看输入的用户id类型",typeof this.userId)
							log("得到的用户名值",this.userName)
							log("查看用户名输入的类型",typeof this.userName)
						},
						u_input(e){
							this.userId = this.userId.replace(/[^\d]/g,'')
						},
						key_p(e){
							log('键盘事件',e)
						},
						key_ups(e){
							if(e.keyCode == 13){
								log('回车操作,获取用户输入数据:',this.key_event)
							}
						}
					}
				})
			</script>
		</body>
	</html>

	愿中国青年都摆脱冷气，只是向上走，不必听自暴自弃者的话 —— 鲁迅

end