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 过滤器和自定义指令的资料请关注开心学习网其它相关文章!
您可能感兴趣
- vue实现添加购物车小球(Vue实现简易购物车案例)
- vue父组件怎么用子组件的数据(Vue使用v-model封装el-pagination组件的全过程)
- vue自定义组件定义事件(基于Vue实现自定义组件的方式引入图标)
- vueelementui左侧菜单(Vue Element前端应用开发之动态菜单和路由的关联处理)
- vue做个人页面(vue简易记事本开发详解)
- vue按需引入elementui组件(vue ElementUI实现异步加载树)
- vue验证码(vue_drf实现短信验证码)
- vuekeep-alive源码(vue中keepAlive组件的作用和使用方法详解)
- vue接口请求类封装(Vue接口封装的完整步骤记录)
- vue可以使用jsx语法吗(vue中正确使用jsx语法的姿势分享)
- vue界面自动生成(Vue中实现3D标签云的详细代码)
- vue基础语法对象(浅析从面向对象思维理解Vue组件)
- vuex中action的值怎么接(vuex中Getter的用法详解)
- vue应用转flutter(Vue和Flask通信的实现)
- vue改数组和对象值(vue $set 实现给数组集合对象赋值)
- vue 修改后刷新(Vue使用三种方法刷新页面)
- 幼小衔接-20以内看图读数 写数 数的组成练习题(幼小衔接-20以内看图读数)
- 你只要花上20天记单词,英语成绩就能从57提到100(你只要花上20天记单词)
- 夕云天际飞,亢龙化太极(夕云天际飞亢龙化太极)
- 爱情可以当饭吃吗(怎么回复)
- 高考数学题(高考数学题基础题占多少分)
- 没钱只能吃土(没钱要吃土了幽默短信发朋友圈)
热门推荐
- nginx 可以部署java吗(Java-利用Nginx负载均衡实现Web服务器)
- app怎样像web一样调试(详解webapp页面滚动卡顿的解决办法)
- 织梦的powerbydedecms怎么改(织梦DEDECMS提示信息提示框美化)
- springboot怎么用docker(使用docker部署spring boot并接入skywalking的方法)
- python整型可以用什么表示(实例介绍Python中整型)
- sqlserver索引策略(SQLServer性能优化--间接实现函数索引或者Hash索引)
- vue图片怎么上传服务器(vue-cropper组件实现图片切割上传)
- 购买腾讯云便宜服务器(腾讯云服务器怎么购买 腾讯云服务器购买流程)
- dedecms添加代码(dedecms获取当前所在栏目ID的方法)
- nginx过滤http请求协议(nginx对http请求处理的各个阶段详析)