Vue中过滤器及自定义插件

时间: 2020-06-03阅读: 106标签: 插件

想不出来,把官方的拿过来vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示,管道是指 ' | '(回车键上方),又分为局部过滤器和全局过滤器,语法请客官往下走


全局过滤器语法的话就是:

import vue from 'vue'
Vue.filter('过滤器名称',(value)=>{
console.log(value)
return ''
/**
*value就是在哪里插入,就是哪里的文本
*过滤器中必须返回一个结果,就是对该文本的操作
*
*/
})

局部过滤器语法:

data () {
    return {

    }
},
// 局部过滤器
filters:{
/**
*
*函数写法,支持es6
*函数名字就是过滤器名称
*函数中有一个形参,就是想要操作的文本
*
*/
myFilter(value){
    return ''
//就和全局过滤器一样
  }
}

 

在组件中使用:

<div>{{ data中定义的数据  | 定义的过滤器名称 }}</div>
<!-- v-bind中是这样 -->

<div v-bind:id="id | 过滤器名称"></div>

<!--多个使用时是这样的 {{ data | FilterA | FilterB }}-->
<!--还可以接收参数,因为filter本身就是一个函数 像这样{{ data | FilterA('asd',nm) }}-->

 


相信大家一定用过ui组件库,那么肯定就见过Vue.use(),那么这个use到底是做什么的呢???? 我也不知道,尬不尬,这属于Vue的源码解析,管他呢,能use一个plugin插件就行,就和Vue.use(elementui)这种组件库,我们开始吧

搬运我们黑马社区的讲解:

①:Vue.use是通过initUse这个方法初始化的 ,Vue.use接受一个参数plugin,方法检测了installedPlugins这个数组中是否已经包含想要注册的组件,可知插件只允许被注册一次,二次注册是无效的。

②:调用toArray将转入的参数转换成数组

③:把当前Vue对象this插入转化后的数组前

④:判断plugin中install是否是一个方法,如果是,则传入plugin及转化后的数组;此外,如果plugin本身就是一个方法,则传入转化后的数组,随后执行这个方法,由此可知Vue.use(插件)实际上会调用插件的install方法,并且调用use的时候是可以传参数的。

注:以上还可以知道,vue只会对plugin中的两种情况处理,即要么plugin中有install函数,要么plugin本身就是一个函数。

⑤:将注册后的插件推进installedPlugins,避免重复注册,返回当前实例,代码执行结束。

这样写一个插件:

import comA from '@/components/coma.vue'
// 首先需要导出一个对象 export default { //有一个函数,官方定义的,必须写,安装的英文 函数中有一个Vue的形参 install(Vue){ // 自定义指令 两种写法 Vue.directive('自定义指令名称',/** 可以写一个函数,也可以写一个对象,对象的好处可以调用其他api */{ // 有一个选项 inserted(el){ //el此时就是该元素 console.log(el) } }),
  // 还可以加入公共组件的引入


  Vue.component('com-a',comA) } }
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9621

关闭

用webpack发布一个vue插件包

先到npm官网上注册一通,然后npm login,顺利的登录了,再运行npm publish,然后报错:只有管理员可以发布此模块,上网查了之后说是npm镜像的问题,不能用淘宝镜像,于是就安装了nrm专门用于切换镜像

jquery.validate验证

jquery validate插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求

前端最常用的vscode插件集

在前端开发中,使用Visual Studio Code有哪些你常用的插件?推荐几个自己喜欢的,不带链接,自己搜索安装吧。这些都是比较实用、前端必备的插件集

vue开发常用第三方插件总结

这篇文章整理vue开发中常用插件及工具,主要包含: UI组件、开发框架、实用库、服务端SSR、辅助工具、应用实例、Demo示例等,分享给大家,希望对大家有所帮助

chrome书签插件

Pinbox 是一款可以使得用户的Chrome书签变得更加生动的谷歌浏览器插件,用户在Chrome中安装了Pinbox插件以后,只需要点击一下扩展按钮就会自动为你把当前的网页保存到Pinbox中。

Bootstrap Table插件自定义排序使用方法

Bootstrap Table 插件含有样式的数据如何排序,如下面的字段stargazers_count;第一种方式:增加加样式之前的额外字段,如增加stargazers_count1 字段,并设置data-sort-name=stargazers_count1

sublime安装插件

安装Sublime text 2插件很方便,可以直接下载安装包解压缩到Packages目录,也可以安装package control组件,然后直接在线安装

Vue添加引入jquery插件

先安装jquer插件,命令运行: npm i jquery --save-dev ;利用 expose-loader 模块 来引用jquery插件 ,命令运行: npm i expose-loade --save-dev;配置webpack.base.conf

babel插件的相关知识

Babel 是 JavaScript 编译器,更确切地说是源码到源码的编译器,通常也叫做“转换编译器(transpiler)”。 意思是说你为 Babel 提供一些 JavaScript 代码,Babel 更改这些代码,然后返回给你新生成的代码

DefinePlugin插件用法理解

DefinePlugin 允许创建一个在编译时可以配置的全局常量。这可能会对开发模式和生产模式的构建允许不同的行为非常有用。如果在开发构建中,而不在发布构建中执行日志记录,则可以使用全局常量来决定是否记录日志。这就是 DefinePlugin 的用处

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!