1500字范文 > Vue 内置指令自定义指令过滤器

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

时间：2022-08-09 09:34:05

相关推荐

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

文章目录

内置指令v-text指令v-html指令v-cloak指令v-once指令v-pre指令自定义指令过滤器

内置指令

复习之前所学指令：

v-bind：单向绑定解析表达式, 可简写为 :xxxv-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="?"+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="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 Vue{filters:{}}使用过滤器：{{ xxx | 过滤器名}}或v-bind:属性 = "xxx | 过滤器名"(很少)

<body><div id="root"><h2>显示格式化后的时间</h2><h3>现在是：{{fmtTime}}</h3><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>

备注：

过滤器也可以接收额外参数、多个过滤器也可以串联并没有改变原本的数据, 是产生新的对应的数据

过滤器的兼容性：

过滤器仅在 vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中剔除了过滤器相关的功能。

在企业级项目开发中：

如果使用的是 2.x 版本的 vue，则依然可以使用过滤器相关的功能如果项目已经升级到了 3.x 版本的 vue，官方建议使用计算属性或方法代替被剔除的过滤器功能

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。