Vue的内置指令

指令名称	作用
v-bind	响应并更新DOM特性；例如：v-bind:href v-bind:class v-bind:title v-bind:bb
v-on	用于监听DOM事件； 例如：v-on:click v-on:keyup
v-model	数据双向绑定；用于表单输入等；例如：
v-show	条件渲染指令，为DOM设置css的style属性
v-if	条件渲染指令，动态在DOM内添加或删除DOM元素
v-else	条件渲染指令，必须跟v-if成对使用
v-for	循环指令 例如
v-else-if	判断多层条件，必须跟v-if成对使用；
v-text	更新元素的textContent；例如： 等同于 {{msg}}；
v-html	更新元素的innerHTML；
v-pre	不需要表达式，跳过这个元素以及子元素的编译过程，以此来加快整个项目的编译速度；例如：{{ this will not be compiled }}；
v-cloak	不需要表达式，这个指令保持在元素上直到关联实例结束编译；
v-once	不需要表达式，只渲染元素或组件一次，随后的渲染，组件/元素以及下面的子元素都当成静态页面不在渲染。

v-cloak

一般情况下， v-cloak 个解决初始化慢导致页面闪动的最佳实践，对于简单的项目很实用，但是在具有工程化的项目里，比如webpack vue-router 时，项目的 HTML结构只有 个空的 div 元素，剩余的内容都是由路由去挂载不同组件完成的，所以不再需要 v-cloak

	
		
			
			
			v-cloak是解决初始化慢导致页面闪动的方法
		
		
			

				{{message}}
			
			
			
		
	

v-once

v-once 也是 个不需要表达式的指令，作用是定义它的元素或组件只渲染 次，包括元素或组件的所有子节点。首次渲染后，不再随数据的变化重新渲染，将被视为静态内容，例如：

	
		
		

	
	
		

			只渲染一次{{message}}
			

				随着data变化而变化：{{message}}
			
			按下数据变化
		
		
		
	

条件渲染指令 v-if 、 v-else-if、 v-else

条件指令可以根据表达式的值在dom中渲染或销毁元素或组件

	
		
		

	
	
		

			
			
			
			

			
			
您输入的是：{{type}}
		
		
		
	

效果如图：




v-show

v-show与v-if相似，只是v-show是改变css的属性，相当于display,
当v-show的表达式的值是false的时候，那么就不显示，在DOM结构上就会看到内联样式display：none

	
		
		
		

	
	
		

			
当status为2显示出来
			
		
		
		
	

效果图：


v-if 和v-show的区别说明

首先，v-if是真正的条件渲染，并会根据条件进行真正的销毁元素重建元素或绑定事件或子组件，如果一开始表示式的值是false，那么一开始元素/组件就不会被渲染，直到v-if条件变化后才会开始编译，v-show是通过改成css来实现显示或隐藏，无论v-show的条件如何，一开始都会被编译；因此v-if更适合不经常切换的场景，因为其切换开销较大，v-show适合频繁切换的场景

v-for

 	
 		
 		
 
 	
 	
 		

 			

 				
{{index}}-{{book.name}}
 			
 		
 		
 		
 	
 

分隔符 in 前的语句使用括号 第二项就是 books 当前项的索引

v-for还可以遍历数组，以及遍历对象


v-on
vue事件处理的v-on相当于JavaScript中的onclik事件，缩写是 @

	
		
		
	
	
		

			
			你好，{{name}}
		
		
		
	

vue的修饰符

修饰符	作用
.lazy	当change的时候改变，而不是input的时候改变

如下所示

	
		
		
	
	
		

			
			输入完成后改变，{{name}}
			

			
			一边输入一边更新数据，{{names}}
		
		
		
	

修饰符	作用
.trim	自动过滤首尾的空格

	
		
		
	
	
		

			
			过滤首位空格，{{name}}
			

			
			未过滤首位空格，{{names}}
		
		
		
	

修饰符	作用
.stop	阻止单击事件冒泡

	
		
		
	
	
		

			
			//
		
		
		
	

修饰符	作用
.prevent	阻止默认事件的发生

	
		
		
	
	
		

			

				百度链接
				//没有prevent的时候可以实现a链接的跳转
			
			
		
		
		
	

修饰符	作用
.capture	触发事件由外到内

	
		
		
	
	
		

			百度链接
		
		
		
	

修饰符	作用
.self	只能触发自己范围内的数据

	
		
		
	
	
		

			百度链接

			百度链接
		
		
		
	

修饰符	作用
.once	只能执行一次

	
		
		
	
	
		


			百度链接
		
		
		
	

修饰符	作用
.passive	告诉我们的浏览器，这个是默认执行的，不必再去查询是否为默认事件，可以提高流畅性

注意：注：passive和prevent冲突，不能同时绑定在一个监听器上
参考网址：https://www.jianshu.com/p/b12d0d3ad4c1

键盘修饰符	作用
.	告诉

参考网址：https://blog.csdn.net/qq_42238554/article/details/86592295
参考数据《vue.js实战》–梁灏