vue过滤器使用思路(vue 过滤器和自定义指令的使用)
类别:编程学习 浏览量:644
时间:2022-03-28 12:25:07 vue过滤器使用思路
vue 过滤器和自定义指令的使用目录
- 过滤器
- 01. 是什么
- 02. 怎么做
- (1)定义过滤器
- (2)使用方式
- (3)过滤器的参数
- 03. 封装过滤器函数
- 自定义指令
- 01. 是什么
- 02. 基本概念
- (1)钩子函数
- (2)参数
- 03. 指令注册
- (1)全局注册
- (2)局部注册
01. 是什么
过滤器可以对我们传入的数据进行必要的处理,并返回处理的结果
- 过滤器不会修改数据
- 过滤器的本质是函数
- 过滤器函数应该有参数,参数必须包含你想进行处理的源数据
- 过滤器应该有返回值,返回处理后的结果
export default { // 通过filters创建局部过滤器 filters:{ 过滤器名称(data){ // 对传入的data 进行处理 return 处理结果 } } }
02. 怎么做
(1)定义过滤器
- 局部过滤器:定义在组件内部,只能在当前组件内使用
通过filters结构来创建
export default { // 通过filters创建局部过滤器 filters:{ 过滤器名称(data){ // 进行处理 return 处理结果 } } }
- 全局过滤器:通过Vue.filter创建全局过滤器,一次只能创建一个,可以在任何组件中使用
需要在Vue实例创建之前定义
Vue.filter(过滤器名称,(data) => { // do something return 处理结果 })
在单独的文件中创建一个全局过滤器
在需要用到的组件中引入,并在filters中注册
import Vue from 'vue' // 通过Vue.filter创建全局过滤器 const filter1 = Vue.filter(过滤器名称,(data) => { // do something return 处理结果 }) // 导出 export { filter1 }
// 在组件中--引入过滤器 import { filter1 } from '@/utils/filters.js' export default { // 在组件内的 filters中,添加过滤器 // filters既可以创建过滤器,又可以用来注册过滤器 // 只有在filters中注册的才会被认为是过滤器 filters: { filter1 } }
(2)使用方式
- 在插值表达式{{}}中,或者v-bind表达式中,通过管道操作符——|来使用过滤器
- 格式:{{ 源数据 | 过滤器 }}
<li> {{ 数据 | 过滤器 }} </li>
- 多次使用
过滤器支持多个并行使用,前者的处理结果,将作为后者的参数传入
<li> {{ 数据 | 过滤器1 | 过滤器2 }}</li>
(3)过滤器的参数
- 如果没有手动传递参数,那么默认就会传递管道符前面的数据
- 如果手动的传递了参数,也不会影响默认参数的传递
- 过滤器函数的第一个参数永远是管道符前面的数据
- 而手动传递的参数,从参数列表的第二个开始,依次向后
03. 封装过滤器函数
- 过滤器的本质就是一个函数,所以可以在一个单文件中直接封装一个过滤器函数
// 定义函数 const filterA = () => {} const filterB = () => {} // 导出函数对象 export { filterA, filterB }
- 然后再需要的组件内引入函数,并注册为过滤器
import * as filters from './filters.js' //遍历 filters.js 内的方法 Object.keys(filters).forEach(key => { Vue.filter(key, filters[key]) })
01. 是什么
- 要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令
- 也就是说自定义指令主要是对 DOM 元素进行操作
- 也就是说自定义指令主要是对 DOM 元素进行操作
02. 基本概念
(1)钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选):
- bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个绑定时执行一次的初始化事件
- inserted:当被绑定的元素插入父节点时调用 ,只要父节点存在即可,即使它没有插入文档中
- update:当被绑定元素所在组件更新时调用,无论绑定的值是否发生变化都会调用。但可以通过比较更新前后的值,来忽略不必要的模板更新
- componentUpdated:当被绑定元素所在组件的全部更新后,即完成一次更新周期时调用
- unbind:只调用一次,指令与元素解绑时调用
(2)参数
指令钩子函数会被传入以下参数:
- el:指令所绑定的元素,可以用来直接操作 DOM,即放置指令的那个元素
- binding:一个对象,里面包含多个属性
- name:指令名,没有v-前缀
- value:指令绑定的值,可以绑定一个对象以传递多个值
- oldValue:指令绑定的旧值,禁止update和componentUpdated钩子中可用,无论值是否改变
- expression:字符串形式的指令表达式
- arg:传递给指令的参数
- modifiers:一个包含修饰符的对象
- vnode:Vue 编译生成的虚拟节点
- oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用
// <li v-demo:left="100"></li> // 这里的 left 即为指令的 bingding对象的arg // 100 即为指令的 bingding对象的value Vue.directive('demo',{ // el--表示被绑定的元素,即指令在放置的那一个元素 bind(el,binding,vnode){ // 可以直接对这个元素进行一些处理 el.style.position = 'fixed'; const s = ( binding.arg == 'left' ? 'left' : top ); el.style[s] = binding.value + 'px'; } })
03. 指令注册
(1)全局注册
通过 Vue.directive() 方式注册全局指令,包含两个参数:
- 第一个参数为自定义指令名称,指令名称不需要加 v- 前缀,默认是自动加上前缀的,在使用指令的时候加上前缀即可
- 第二个参数可以是对象数据,也可以是一个指令函数
Vue.directive("指令名称", { inserted: function(el){ // do something } })
(2)局部注册
通过在Vue实例中添加 directives 对象数据注册局部自定义指令
export default { directives: { 指令名:{ 函数 } } }
以上就是vue 过滤器和自定义指令的使用的详细内容,更多关于vue 过滤器和自定义指令的资料请关注开心学习网其它相关文章!
您可能感兴趣
- vueelementui动态表格(Vue Element前端应用开发之常规的JS处理函数)
- vue中的定时函数(vue计时器的实现方法)
- uniapp使用vue写页面(分析uniapp入门之nvue爬坑记)
- vue和springboot实战项目(vue+spring boot实现校验码功能)
- elementuivue使用技巧(Vue Element前端应用开发之常规Element界面组件)
- vue路由跳转的方法(Vue路由监听实现同页面动态加载的示例)
- vue前端搜索功能如何实现(使用Vue3+Vant组件实现App搜索历史记录功能示例代码)
- vue 底层原理(浅谈Vue插槽实现原理)
- springbootvue数据交互系统(Springboot运用vue+echarts前后端交互实现动态圆环图)
- vue3封装table组件(Vue封装通用table组件的完整步骤记录)
- vue图片切换软件(Vue实现简单图片切换效果)
- vue3函数详解(手把手教你用vue3开发一个打砖块小游戏)
- vue 组件如何转换虚拟dom(Vue源码分析之虚拟DOM详解)
- electronvue最新版本(Vue3和Electron实现桌面端应用详解)
- vue商城购物车数据(vue实现购物车全部功能的简单方法)
- 数组循环遍历展示vue(Vue中foreach数组与js中遍历数组的写法说明)
- 网红直播可以赚很多钱吗(网红直播可以赚很多钱吗)
- 今天是什么日子(今天是什么日子有什么特殊意义吗)
- 这里输入关键词(怎么输入关键词搜索)
- 34岁的舒畅,就这样走到了末路,不知会不会后悔15年前的草率决定(就这样走到了末路)
- 不走心的古装造型 舒畅 毁容式 出演,萧蔷雷出新高度(不走心的古装造型)
- 嘉南传 第22集(嘉南传第22集)
热门推荐
- mysql主从复制步骤(MySQL8 主从复制踩坑指南)
- mysql在centos7中如何安装(阿里云centos7安装mysql8.0.22的详细教程)
- 如何访问别人的ftp服务器(如何让外网也可以访问的个人Ftp服务器)
- css导航条怎么做(CSS实现导航条Tab切换的三种方法介绍)
- js 定时切换图片(JavaScript定时器实现无缝滚动图片)
- 属于web服务器的有哪些(web服务器有几种类型?)
- 如何用tomcat部署web项目(一文搞懂如何部署启动多个tomcat并移植项目)
- 微信小程序抽签如何抽中(JavaScript实现班级抽签小程序)
- 如何用thinkphp框架来写一个网站(php tpl模板引擎定义与使用示例)
- mysql安装时服务无法启动(MySQL 实例无法启动的问题分析及解决)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9