vue 新学习 07 vue指令，自定义指令

万zp

已于 2023-08-08 22:40:53 修改

阅读量167

点赞数

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

于 2023-08-03 15:31:24 首次发布

本文链接：https://blog.csdn.net/qq_38757863/article/details/132084783

版权

vue前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

01.Vue.js 指令是用于在 HTML 元素上添加特定行为的特殊属性。通过指令，我们可以在 DOM 元素上绑定数据、监听事件、渲染列表、条件渲染等等。

以下是一些常见的 Vue.js 指令：

v-text
v-html（不建议使用）
v-show
v-if / v-else-if / v-else
v-for
v-bind
v-on
v-model
v-slot
v-pre（使用频率很低）
v-once（使用频率很低）
v-cloak（使用频率极低，不细介绍）

1、v-text
v-text 指令，会把该元素下面的所有内容替换掉。


<div v-text="hello vue">hello world</div>

现实结果是：hello vue
2、v-html
v-html 指令，会用一个HTML标签字符串，替换该元素下面的所有内容。

但是，不建议使用v-html指令，因为它会导致被恶意者进行XSS攻击的潜在风险。

<div v-html="
'<span style=&quot;color:red&quot;>hello vue</span>' "> 
  hello world
</div>

现实结果是：字体颜色为红色的 hello vue

3、v-pre（使用频率很低）
v-pre 指令，跳过这个元素和它的子元素的编译过程。

	<!-- v-pre -->
    <span v-pre>{{ this will not be compiled }}</span>
    <!-- 页面直接显示以下内容 -->
    {{ this will not be compiled }}

运行上述页面，渲染结果为： {{ this will not be compiled }}
4、v-once（使用频率很低）
v-once 指令，只渲染元素和组件一次。作用是定义它的元素或组件只会渲染一次，包括元素或者组件的所有字节点。首次渲染后，不再随着数据的改变而重新渲染。

<template>
	<div>
		<div v-once>{{msg}}</div>
		<button @click="editTitle">编辑标题</button>
	</div>
</template
<script>
export default {
	data(){
		return {
			msg: "第一次渲染"
		}
	},
	methods: {
		editTitle(){
			this.msg = "第二次渲染"
		}
	}
}
</script>

如上即使触发 button 的 click事件，也不会改变 msg的渲染状态
02.自定义指令：
需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
2.1 定义语法
(1) 局部指令

new Vue({															
	directives:{指令名:配置对象}	
})

或者是

new Vue({
	directives{指令名:回调函数}
})

例子

directives : {
	'my-directive' : {
		bind (el, binding) {
			el.innerHTML = binding.value.toupperCase()
		}
	}
}

el是html文件中的标签id
binding表示标签上的消息

(2) 全局指令

Vue.directive(指令名,配置对象)

或

Vue.directive(指令名,回调函数)

例子

Vue.directive('my-directive', function(el, binding){
	el.innerHTML = binding.value.toupperCase()
})

配置对象中常用的3个回调：

bind：指令与元素成功绑定时调用。
inserted：指令所在元素被插入页面时调用。
update：指令所在模板结构被重新解析时调用。

备注：

指令定义时不加v-，但使用时要加v-；
指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>自定义指令</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>{{name}}</h2>
			<h2>当前的n值是：<span v-text="n"></span> </h2>
			<!-- <h2>放大10倍后的n值是：<span v-big-number="n"></span> </h2> -->
			<h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
			<button @click="n++">点我n+1</button>
			<hr/>
			<input type="text" v-fbind:value="n">
		</div>
	</body>
	
	<script type="text/javascript">
		Vue.config.productionTip = false

		//定义全局指令
		/* Vue.directive('fbind',{
			//指令与元素成功绑定时（一上来）
			bind(element,binding){
				element.value = binding.value
			},
			//指令所在元素被插入页面时
			inserted(element,binding){
				element.focus()
			},
			//指令所在的模板被重新解析时
			update(element,binding){
				element.value = binding.value
			}
		}) */

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				n:1
			},
			directives:{
				//big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
				/* 'big-number'(element,binding){
					// console.log('big')
					element.innerText = binding.value * 10
				}, */
				big(element,binding){
					console.log('big',this) //注意此处的this是window
					// console.log('big')
					element.innerText = binding.value * 10
				},
				fbind:{
					//指令与元素成功绑定时（一上来）
					bind(element,binding){
						element.value = binding.value
					},
					//指令所在元素被插入页面时
					inserted(element,binding){
						element.focus()
					},
					//指令所在的模板被重新解析时
					update(element,binding){
						element.value = binding.value
					}
				}
			}
		})
		
	</script>
</html>