vue[对指令探究与整理]

最新推荐文章于 2024-03-17 21:04:26 发布

墨水白云

最新推荐文章于 2024-03-17 21:04:26 发布

阅读量126

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/lxy869718069/article/details/106071129

版权

vue 专栏收录该内容

41 篇文章 3 订阅

订阅专栏

指令的概念

Vue的指令是指以v-开头的，作用于HTML元素，用于提供一些特殊的特性操作的功能属性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute），类似class、style之类的元素属性。

vue官方指令14个

以下十四个官方指令是开发过程得了解与知道的内容，只需知道这些指令能干什么即可：加粗的为常用
v-model --------------必须掌握的指令
v-show ----------------必须掌握的指令
v-if ----------------------必须掌握的指令
v-else-if ---------------必须掌握的指令
v-else ------------------必须掌握的指令
v-for --------------------必须掌握的指令
v-on(简写为@) ------必须掌握的指令
v-bind(简写为:) -----必须掌握的指令
v-slot ------------------必须掌握的指令
v-pre
v-text
v-html
v-once
v-cloak

v-model

必须掌握的指令
双向数据绑定指令，通常这个指令用于 表单元素 上面配合实现双向数据通道。表单元素：如：input、select、textarea。但不会用于非表单元素上，如：div、p、span之类的。
示例：输入框输入内容，p标签的内容将会同时改变，反之亦然。

<template id="app">
	<p>{{ message }}</p>
	<input type="text" v-model="message"/>
</template>
<script>
export default {
	data(){
		return{
			message: ''
		};
	}
}
<script>

补充：双向绑定原理
https://www.cnblogs.com/libin-1/p/6893712.html

v-show和v-if、v-else-if、v-else

必须掌握的指令
都是根据条件控制元素的显示和隐藏
v-show是根据条件是否成立控制css中的display属性进行显隐，无论如何都会渲染
v-if、v-else-if、v-else三者是相互配合使用与常规if语句无差别，但是v-if是根据条件是否成立控制dom是否渲染。
一句话就是：v-show通过display属性控制渲染，无论怎样都会渲染，而v-if是条件成立才会渲染，渲染对象如果是组件类则会重新执行生命周期。
如何使用：需要经常切换的内容可以通过v-show控制，需要切换后重新执行子组件内容的可以通过v-if控制，大多情况下两者可以通用。
注意：v-if、v-else-if、v-else三者控制的元素必须是同级兄弟元素
示例：

<template>
  <div>
    <div v-show="istrue">v-show的使用</div>
    <div v-if="istrue || type == '1'">v-if的使用</div>
    <div v-else-if="!istrue || type == '2'">v-else-if的使用</div>
    <div v-else>v-else的使用</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isTrue: true,
      type: '1'
    };
  }
};
</script>

v-for

必须掌握的指令
循环渲染，通常用于列表之类的多内容渲染，可以理解为for循环，v-for可以针对数组进行循环，也可以针对对象进行循环，或者是两者的结合,包括Map和Set。

<template>
  <div>
    <!-- 针对对象循环有三个参数 -->
    <h4>针对对象循环有三个参数</h4>
    <div v-for="(val, name, index) in obj" :key="index">
      <h4>第{{index + 1}}行</h4>
      <p>第一个参数为value：{{val}}</p>
      <p>第二个参数为key：{{name}}</p>
      <p>第三个参数为index序号：{{index}}</p>
    </div>

    <!-- 针对数组循环有两个参数 -->
    <h4>针对数组循环有两个参数</h4>
    <div v-for="(val, index) in arr" :key="index">
      <h4>第{{index + 1}}行</h4>
      <p>第一个参数为value：{{val}}</p>
      <p>第二个参数为index序号：{{index}}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        key1: "123",
        key2: "456"
      },
      arr: ["abc", "efg"]
    };
  }
};
</script>

执行结果：
在这里插入图片描述
注意事项：
1.v-for必须要配合v-bind:key='xx’来使用,且保证key的唯一性。
2.v-for通常不能与v-if一起配合使用，如果需要控制显隐可以使用v-show.
3.v-for用于template上的时候v-bind:key='xx’必须用在能够渲染的元素上。因为template是不会渲染成元素标签的。

v-on(简写为@)

必须掌握的指令
给标签绑定方法的方式。如：

// @click === onclick ;
<p @click="test">

1.在组件之间传递数据的时候可能会用到@绑定自定义名称的事件。
例如：
在这里插入图片描述

2.@可以绑定的事件名称与js支持绑定的事件句柄是一样的，仅仅只需要把on改为@即可绑定。如：

3.关于修饰符
修饰符统一整理

v-bind(简写为:)

必须掌握的指令
绑定元素属性，如:class、:style这样就可以对元素进行动态的改写。
注意：在组件之间传递数据的时候可能会用到：绑定自定义名称的属性。
属性可以分为，元素自身的属性，如：div中的class=""这是元素本身拥有的，也可以有自定义的，如子组件这样就是绑定了自定义的属性message
不同的组件类或者标签拥有的属性不同。

v-slot

必须掌握的指令
提供具名插槽或需要接收 prop 的插槽，参考官网：组件-插槽

v-text和v-html

作用替换元素的内容
v-text可以理解为document.innerText的功能，v-html可以理解为document.innerHtml功能，但是确也有部分差异。
示例：v-text和v-html以及{{}}双大括号的对比

<template>
	<div>
		<!-- 使用v-text -->
    	<div v-text="msg">
      		<span>--------额外内容</span>
    	</div>
    	<!-- 使用v-html -->
    	<div v-html="msg">
      		<span>--------额外内容</span>
    	</div>
    	<!-- 使用{{}}双大括号 -->
    	<div>
      		{{msg}}
      		<span>--------额外内容</span>
    	</div>
	</div>
</template>
<script>
export default {
	data(){
		return{
			msg: '<div style='color:red;'>这是含有div标签的字符串内容</div>'
		};
	}
}
<script>

运行结果：
在这里插入图片描述
从结果可以看出，
1.使用v-text的元素中所有内容都将被msg给替换，但不会对msg中的内容进行解析，是什么就展示什么
2.使用v-html的元素中所有内容都将被msg给替换，但会解析内容，如果有标签元素则会解析成浏览器能够识别的内容并且展示
3.使用{{}}双大括号直接就是将内容展示。

v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。一般用的比较少。

v-once

只渲染元素和组件一次。但凡使用了指令绑定的元素只会渲染一次，然后数据其他变化都不会对其影响。可以用于性能上的提升。一般用的比较少。

v-cloak

保持在元素上直到关联实例结束编译，一般用的比较少。

自定义指令

官方文档：自定义指令
作用：通过指令的方式操作元素标签

自定义指令的核心在于：指令的钩子函数(5个)以及其参数

钩子函数对应参数

自定义指令可以分为局部注册和全局注册
1.全局注册

<template>
	// v-hasName = 'xx' 可以通过binding.value参数查看到
	<div v-hasName></div>
</template>
......
// 全局注册
Vue.directive('hasName',{
 	bind: function (el,binding,vnode) {},
 	inserted: function (el,binding,vnode) {},
 	update: function (el,binding,vnode,oldVnode) {},
 	componentUpdated: function (el,binding,vnode,oldVnode) {},
 	unbind: function (el,binding,vnode) {}
})

2.局部注册：直接在组件中使用directives属性即可

<template>
	// v-hasName = 'xx' 可以通过binding.value参数查看到
	<div v-hasName></div>
</template>
<script>
export default{
	......
	directives：{
		hasName: {
		   	bind: function (el,binding,vnode) {},
		 	inserted: function (el,binding,vnode) {},
		 	update: function (el,binding,vnode,oldVnode) {},
		 	componentUpdated: function (el,binding,vnode,oldVnode) {},
		 	unbind: function (el,binding,vnode) {}
  		}
	}
	......
}
</script>