Vue指令

最新推荐文章于 2024-06-15 14:41:39 发布

jianfei.

最新推荐文章于 2024-06-15 14:41:39 发布

阅读量714

点赞数 1

分类专栏： VUE 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_46566078/article/details/121692498

版权

VUE 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue.js官网：https://cn.vuejs.org

一，什么是Vue指令

指令是可以写在DOM元素中的小命令，他们以 v- 为前缀，vue就能识别这是一个指令并保持语法的一致性。

二，Vue常用内置指令

v-bind：单向绑定解析表达式，可简写为 :xxx

v-bind用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

<div id="app">
	<!-- 完整语法 -->
	<span v-bind:type="type"></span>
	<!-- 简写 -->
	<span :type="type"></span>
	
	<!-- class 绑定 -->
	<div :class="{ red: isRed }"></div>
	<div :class="[classA, classB]"></div>
	
	<!-- style 绑定 -->
	<div :style="{ fontSize: size + 'px' }"></div>
	<div :style="styles"></div>
</div>

new Vue({
    el: '#app',
    data: {
			type:"text",
			classA:"class-a",
			classB:"class-b",
			styles:{
	             	color:'red',
	            	fontSize:15+'px'
	        }
    }
})

v-model：双向数据绑定

v-model 会忽略所有表单元素的 value、checked、selected 属性的初始值而总是将 Vue 实例的数据作为数据来源。

修饰符

.lazy - 取代 input 监听 change 事件。
.number - 输入字符串转为有效的数字。
.trim - 输入首尾空格过滤。

<!-- 普通语法 -->
<input v-model="msg">

<!-- 修饰符配合使用语法 -->
<!-- lazy：默认情况下，v-model同步输入框的值和数据。可以通过这个修饰符，转变为在change事件再同步 -->
<input v-model.lazy="msg">

<!-- number：自动将用户的输入值转化为数值类型 -->
<input v-model.number="msg">

<!-- trim：自动过滤用户输入的首尾空格 -->
<input v-model.trim="msg">

v-on：绑定事件监听，可简写为@

v-on指令用于绑定事件监听器。事件类型由参数指定，表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

修饰符

.stop：调用 event.stopPropagation()----停止冒泡。
.prevent：调用 event.preventDefault()-----阻止默认行为。
.once：只触发一次回调。
.left：(2.2.0) 只当点击鼠标左键时触发。
.right： (2.2.0) 只当点击鼠标右键时触发。
.middle ：(2.2.0) 只当点击鼠标中键时触发。

<div id="app">
    <!-- 完整语法 -->
    <button v-on:click="aaa(1)"></button>
    <!-- 缩写 -->
    <button @click="aaa('hello world')"></button>
    
    <!-- 停止冒泡 -->
	<button @click.stop="doThis"></button>
	<!-- 阻止默认行为 -->
	<button @click.prevent="doThis"></button>
	<!-- 点击回调只会触发一次 -->
	<button @click.once="doThis"></button>
	<!-- 键修饰符，键别名 -->
	<input @keyup.enter="onEnter">
	<!-- 键修饰符，键代码 -->
	<input @keyup.13="onEnter">
	<!--  多个修饰符一起使用 -->
	<button @click.stop.prevent="doThis"></button>
</div>

 new Vue({
     el: '#app',
     methods:{
         aaa:function (event) {
             console.log(event)
         }
     }
 })

v-for：遍历数组/对象/字符串

v-for指令基于源数据重复渲染元素，v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

<ul id="app">
  <li v-for="item in items" :key="item.id">
    {{ item.message }}
  </li>
</ul>

<ul id="app">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.id }}
  </li>
</ul>

v-for使用注意： v-for中的:key="item.id"，该值绑定是待循环数据中每条数据的唯一标识（唯一ID），如果不写该属性，则默认绑定为index。
如果页面上数据手动修改后，操作新增循环体时，重新渲染数据时，数据会与虚拟DOM对比，如果一致，则直接虚拟DOM内容，不同时，才会替换，然后重新渲染页面，由于页面上的数据手动修改过，修改的为真实DOM，虚拟DOM未发生变化，这时如果循环语句中未使用:key="item.id"绑定唯一标识，页面显示内容就会错位。

new Vue({
  el: 'app',
  data: {
 	parentMessage: 'Parent',
    items: [
	      { 
	      	id: 1,
	     	message: 'Foo'
	     },
	     { 
	   		id: 2,
	    	message: 'Bar' 
	     }
    ]
  }
})

v-if：条件渲染（动态控制节点是否存在）

v-if指令根据表达式的值在DOM中生成或移除一个元素。

expression为true，内容显示，为false，内容不显示

<span  v-if="expression">显示内容</span >

v-else-if：条件渲染（动态控制节点是否存在）

v-else-if指令，跟v-if和v-else配合使用。

expression = 1，内容显示1，expression = 2，内容显示2，expression != 1 && expression != 2，内容显示3

<span v-if="expression === 1">1</span>
<span v-else-if="expression === 2">2</span>
<span v-else>3</span>

v-else：条件渲染（动态控制节点是否存在）

v-else指令是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用。

expression 为true，内容显示OK，为false,内容显示NO

<span v-if="expression">OK</span>
<span v-else>NO</span>

v-show：条件渲染（动态控制节点是否显示）

v-show指令根据表达式的值在DOM中控制元素是否显示出来。

expression 为true，内容显示，为false,内容不显示

<span v-show="expression ">显示内容</span >

v-if / v-show小结：v-if 、v-show都是控制元素在页面上是否显示；v-if控制元素DOM节点是否存在，为false时，页面上不显示，元素DOM节点也不存在，具体用法和Java，Js中的if else用法一致；v-show是控制元素DOM节点是否显示，为false时，页面上不显示，但是元素DOM节点真实存在。

注意：
v-if有更高的切换开销。
v-show有更高的初始渲染开销。
因此，如果要非常频繁的切换，则使用v-show较好；如果在运行时条件不太可能改变，则v-if较好。

v-text：更新元素的textContent，可以等同于JS的text属性

与<span>{{msg}}</span>等价。

<span v-text="msg"></span>

v-html：可以更新元素的innerHTML

注：不建议在网站上动态渲染HTML片段，容易导致XSS攻击。

<span v-html="msg"></span>

v-text / v-html小结：v-text不能识别html语句，会直接把数据以字符串的形式显示在页面上，v-html可以识别html语句。

v-cloak：用来保持在元素上直到关联实例结束。

本质是一个特殊的属性，Vue实例创建完毕并接管容器后，会删除v-cloak属性。
使用css配合v-cloak可以解决网络慢时，页面显示{{xxx}}的问题。

<span v-cloak>{{msg}}</span>

v-once：只渲染元素和组件一次

v-once所在节点，在第一次动态渲染后，就视为静态内容。
以后数据的改变不会引起v-once所在结构的改变，可以用于优化性能。

<span v-once>{{msg}}</span>

v-pre：跳过这个元素和它的子元素的编译过程

跳过器所在节点的编译过程。
跳过大量没有指令或没有使用插值语法的节点会加快编译。

<span v-pre>哈哈哈</span>

三，Vue自定义指令（directives）

可参考Vue官网自定义指令：https://cn.vuejs.org/v2/guide/custom-directive.html#ad

bind：每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次。
inserted：当元素插入到dom的时候，会执行insert，只执行一次。
updated：当vnode更新的时候会执行update，可能触发多次。

<div id="app">
	<h1>{{msg}}</h1>
	<span v-span=""></span>
	<span v-span1=""></span>
	<span v-span3=""></span>
	<span v-span4=""></span>
</div>

// 注册一个全局自定义指令 `v-focus`
Vue.directive('span3', {
   bind:function(element,binding){//指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次
                 console.log('自定义全局指令1');
              },//binding为一个对象，包含一些属性
  inserted:function(element,binding){//指令所在元素被插入页面时，会执行insert，只执行一次
	 console.log('自定义全局指令2');
  },
  updated:function(element,binding){//指令所在模板被重新解析时，会执行updated
	  console.log('自定义全局指令3');
  }
})

new Vue({
		el:"#app",
		data:{
			msg: 'aaaaaa'
		},
		directives: {  //自定义局部指令
		  //span函数何时被调用？1,指令与元素成功绑定时；2,指令所在的模板被重新解析时
		  span(element,binding){
		     console.log('自定义局部指令1');
		  },
		  span1: function(element,binding){
			  console.log('自定义局部指令2');
		  },
		  span4:{
		  
			  bind(element,binding){//指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次
			                 console.log('自定义局部指令3');
			              },//binding为一个对象，包含一些属性
			  inserted(element,binding){//指令所在元素被插入页面时，会执行insert，只执行一次
			  			 console.log('自定义局部指令4');
			  },
			  updated(element,binding){//指令所在模板被重新解析时，会执行updated
			  			  console.log('自定义局部指令5');
			  }
		  }
		}
	})