您的位置：首页 > 编程技术 > html  >  详解Vue自定义过滤器的实现

详解Vue自定义过滤器的实现

 更新时间：2017年1月22日 11:06  点击：1458
小编推荐的这篇文章详细解析Vue自定义过滤器的实现，非常实用，有兴趣的同学可以参考一下

一 自定义过滤器(注册在Vue全局)

注意事项:

(1)全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面

(2) 过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算

(3)可以设置两个过滤器参数,前提是这两个过滤器处理的不冲突

(4)用户从input输入的数据在回传到model之前也可以先处理

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>vue自定义过滤器</title>

    <script src="../js/vue.js"type="text/javascript"charset="utf-8"></script>

    <meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>

  </head>

  <body>

    <div class="test">

      <p>{{message | sum}}</p>

      <p>{{message | cal 10 20}}</p> <!--过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算。-->

      <p>{{message | sum | currency }}</p> <!--添加两个过滤器,注意不要冲突-->

       

      <input type="text"v-model="message | change"> <!--用户从input输入的数据在回传到model之前也可以先处理-->

       

    </div>

    <script type="text/javascript">

     

//    -----------------------------------------华丽分割线(从model->view)---------------------------------------

      Vue.filter("sum",function(value) { //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面

        returnvalue + 4;

      });

       

      Vue.filter('cal',function(value, begin, xing) { //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面

        returnvalue + begin + xing;

      });

 

//    -----------------------------------------华丽分割线(从view->model)---------------------------------------

      Vue.filter("change", {

        read:function(value) {// model -> view 在更新 `<input>` 元素之前格式化值

          returnvalue;

        },

        write:function(newVal,oldVal) {// view -> model 在写回数据之前格式化值

          console.log("newVal:"+newVal);

          console.log("oldVal:"+oldVal);

          returnnewVal;

        }

      });

 

      varmyVue =newVue({

        el:".test",

        data: {

          message:12

        }

      });

       

    </script>

  </body>

</html>

二 自定义过滤器(注册在实例化内部)

上面的例子直接注册在Vue全局上面,其他不用这个过滤器的实例也会被迫接受,其实过滤器可以注册在实例内部,仅在使用它的实例里面注册

上面的程序改写为:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>vue自定义过滤器</title>

    <script src="../js/vue.js"type="text/javascript"charset="utf-8"></script>

    <meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>

  </head>

  <body>

    <div class="test">

      <p>{{message | sum}}</p>

      <p>{{message | cal 10 20}}</p> <!--过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算。-->

      <p>{{message | sum | currency }}</p> <!--添加两个过滤器,注意不要冲突-->

       

      <input type="text"v-model="message | change"> <!--用户从input输入的数据在回传到model之前也可以先处理-->

       

    </div>

    <script type="text/javascript">

      Vue.filter("change", {

        read:function(value) {// model -> view 在更新 `<input>` 元素之前格式化值

          returnvalue;

        },

        write:function(newVal,oldVal) {// view -> model 在写回数据之前格式化值

          console.log("newVal:"+newVal);

          console.log("oldVal:"+oldVal);

          returnnewVal;

        }

      });

 

      varmyVue =newVue({

        el:".test",

        data: {

          message:12

        },

        filters: {

          sum:function(value) {

            returnvalue + 4;

          },

          cal:function(value, begin, xing) {

            returnvalue + begin + xing;

          }

        }

      });

       

    </script>

  </body>

</html>

这篇文章介绍了网站中图片日常使用以及优化手法，非常实用，有需要的同学不妨来看看吧

前言： 最近新到一个团队，才意识到基础的薄弱，牛人遍地，还是好好学习，天天向上。

一直都觉得网站优化的重点是图片，图片的使用也是博大精深。有必要总结一下图片的日常使用以及优化手法～

总的来说，图片的使用分为background和img两种，而优化方向来说分为减少请求，减少大小和清晰度 三个方面

一. background和img的区别：

日常开发中使用的场景区别：

img是内容部分的东西，background-image是修饰性的东西。

加载方式的区别：

在网页加载的过程中，以css背景图存在的图片background-image会等到结构加载完成（网页的内容全部显示以后）才开始加载，

而html中的标签img是网页结构（内容）的一部分会在加载结构的过程中加载，换句话讲，网页会先加载标签img的内容，再加载背景图片background-image，如果你用引入了一个很大的图片，那么在这个图片下载完成之前，img后的内容都不会显示。而如果用css来引入同样的图片，网页结构和内容加载完成之后，才开始加载背景图片，不会影响你浏览网页内容。

二. 平时使用图片有以下几种方式：

1. 图片内联 （base 64）          减少http请求

2. 图片雪碧图（多张图片合并）  减少http请求

3. webp     在压缩方面比 JPEG 格式更优越，并能节省大量的服务器带宽资源和数据空间。与 JPEG 相同，WebP 也是一种有损压缩，主要优势在于高效率。在质量相同的情况下，WebP 格式图像的体积要比 JPEG 格式图像小 40%。

4. svg  

三. 日常图片展示主要有以下三种形式

1.普通图片

顾名思义，非常普通的图片，不需要因为屏幕扩张或者缩小改变宽度以及高度， 以京东手机网站为例，常见于以下布局

不管在任何手机下面，该图片都是以100*100的形式展示，对于这种图片，可以直接给一个宽度100，高度100，处理起来也非常简单粗暴

2.图片的宽高比

此种常见于响应式网站，以下为京东手机网站举例

在iphone5 及320*568的手机上，该图片显示的宽度和高度分别如下

在iphone6 即375*667的手机上，该图片显示的宽度和高度分别如下

不难看出，上面的宽高比实际上为同一个数值，这样既可以保证该图片适配屏幕，又不让图片变形，因为这种场景，也产生了以下需求

1.列表是响应式的，在不同浏览器下要自适应宽度高度

2.图片在自适应中，图片的长宽比要保持不变

在实际开发中，我们通常会设置图片的宽度为百分比来满足自适应，不设置高度来满足长宽比不变，但是这样又会出现一种问题，在图片没有加载出来的时候，浏览器是无法计算出图片的实际尺寸的，当图片加载出来后，再把容器撑高，造成页面抖动 

优化方案：

1. 首先，按照往例，先上一个知识点

块级元素（div，p）的padding设置为百分比的时候，是按照父级块的宽度来定的，所以由padding（padding-top/padding-bottom）来撑开容器高度，而不是height，保证了容器的宽高比例。图片在绝对定位于块级元素（div，p）下面即可。

代码实现：

 
.placeholder{
 height: 0;
 padding-bottom: 56.25%; /* 16:9 */
 position: relative;
 width: 100%;
}
.placeholder .img{
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
}

3.背景图片

background这个属性花样很多，也很杂，常见的有以下几种

  1. background-color  
  2. background-position 
  3. background-size
  4. background-repeat
  5. background-attachment
  6. background-image

在定义背景属性的时候，可以分开对单个属性进行赋值，通常建议使用下面这个属性，而不是分别使用单个属性，因为需要键入的字母也更少。

 
body{
background: #00FF00 url(bgimage.gif) no-repeat fixed top;
// background: color url() repeat attachment position
}

1. background-position 属性  这个属性设置背景原图像的位置

常见使用的值：顺序方面，首先是 x 轴，其次是 y 轴，

2.background-repeat   比较简单，设置背景图片是否重复

3.background-size       在响应式布局中背景图片上用得比较多的一个属性

兼容性：

  • 安卓4.3- 不支持将background，所以必须单独申明这个样式   [所以background-size一般不写进background中，而是单独 background-size：]
  • 安卓4.3- 不支持contain

常见属性： auto ，cover，contain， 100%

从上图可以看到，contain其实等同于background-size: 100% auto；cover等同background-size: auto 100%。

但是，如果背景图像是一张纵向的图（高>宽），那么cover应该等同于background-size: 100% auto；contain等同background-size: auto 100%。

在实际开发中，最常用到的值是cover，如果容器已经有了宽高（当然这里的宽高是指可以随着机型变化的），比如全屏，我们就直接用cover了；而如果容器没有宽高，那就又回到了第二个问题（图片的宽高比），我们可以使用图片或者把设置背景图的这个容器设置成我们图片的宽高比，那样再使用cover或contain都可以。

四. 优化方法：

1. 减少请求

将图片变成base64内联图片， 合并成雪碧图，

以上2种方法在目前一些流行的自动化构建工具都会自动帮忙生成，使用非常方便

适用对象： 不经常改变的icon小图标

2. 减少大小

压缩图片，使用webp格式图片

3.提高清晰度

由于目前的手机高清度越来越高，日常开发中使用2倍图，3倍图的方法

常见优化方法：

1.图片懒加载

优点：通常应用于图片比较多的网页，如果一个页面图片比较多，且页面高度或宽度有好几屏，页面初次加载时，只显示可视区域的图片，当页面滚动的时候，图片进入了可视区域再进行加载，这样可以显著的提高页面的加载速度，更少的图片并发请求数也可以减轻服务器的压力。

懒加载有多种场景，但原理都是一样的。以下举例滚动懒加载。

原理：将图片的真实地址缓存在一个自定义的属性(lazy-src)中，而src地址使用一个1×1的全透明的占位图片来代替，当然占位图片也可以是其他的图片。

github源码： ps://github.com/beidan/lazeLoadImg">https://github.com/beidan/lazeLoadImg

2.图片预加载

基于用户行为的预加载就是，虽然在用户看不到的时候加载了，但是，用户却有更大或者说很大的概率会看到此图。

后续再对这个进行详细的说明～

这篇文章介绍了html清除浮动的几种方法，有需要的朋友赶快来看看吧

html

<div>
    <divclass='box-left'></div>
    <divclass='box-right'></div>
</div>

css

.box-left,.box-right{
        width:200px;
        height:200px;
        float:left;
        background:red;
        border:1pxsolid#333;
    }

第一种方法：.box{clear:box}

第二种方法：.box{overflow:hidden}

第三种方法：.box{overflow:auto}

第四种方法：.box:after{ content:""; height:0; visibility:hidden; display:block; clear:both;}.box{ zoom:1;}

第五种方法：.box{height:200px}设置高度

第六种方法：.box{display:table}

还有什么方法欢迎补充，加油，共同进步

小编推荐的这篇文章介绍了常见CSS与HTML使用误区的详解，有需要的同学可以研究一下

误区一.多div症

<divclass="nav">
    <ul>
       <li><ahref="/home/">Home</a></li>
       <li><ahref="/about/">About</a></li>
       <li><ahref="/concact/">Concact</a></li>
    </ul>
</div>

上述使用使用多余的div标签现状，就称为“多div症”，理应简化成下

<ulclass="nav">
      <li><ahref="/home/">Home</a></li>
      <li><ahref="/about/">About</a></li>
      <li><ahref="/concact/">Concact</a></li>
</ul>

误区二.多类class症  注意点class可以应用于页面任意多个元素，非常适合标识内容类型或其他相似的条目

一段新闻（新闻标题、新闻详情内容）

<h1class="news-head">Elastic Layout Example—View Source for the HTML and CSS</h1>
<pclass="news-head">Lorem ipsum dolor sit amet.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

上述类名使用news-head与news-text 就称为"多类症"表现，不需要这么多的类区分元素样式

最好使用div（division）代表部分而不是没有语义（大多数人误解div无语义！！！），实际上div可以将文档划分为几个有意义的区域.

类名news从而识别整个新闻条目。然后可以使用层叠（cascade）样式识别新闻标题、文本，理应修改如下

<divclass="news">
    <h1>Elastic Layout Example—View Source for the HTML and CSS</h1>
    <p>Lorem ipsum dolor sit amet.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

span 对行内元素进行分组或标识

<h2> Andy wins an Oscar for his cameo in Iron Man</h2>
<p>Public and on <spanclass="date">Februray 22nd, 2009</span>
    By <spanclass="author">Harry Knowles</span>
</p>

误区三.id使用误区 用于标识页面上特定元素(比如站点导航、页眉、页脚)而且必须唯一; 也可以用来标识持久结构性元素（如主导航、内容区域）

/*大量的使用id,很难找到唯一名称混乱*/
#andy, #rich, #jeremy, #james-box, #sophie {
    font-size:1em;
    font-weight:bold;
    border:1pxsolid#ccc;
}
/*只需一个普通类替代它*/
.staff {
    font-size:1em;
    font-weight:bold;
    border:1pxsolid#ccc;
}

用于标识页面上特定元素(比如站点导航、页眉、页脚)而且必须唯一; 也可以用来标识持久结构性元素（如主导航、内容区域）

[!--infotagslink--]

相关文章

  • C#创建自定义控件及添加自定义属性和事件使用实例详解

    这篇文章主要给大家介绍了关于C#创建自定义控件及添加自定义属性和事件使用的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用C#具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧...2020-06-25

  • JS实现自定义简单网页软键盘效果代码

    本文实例讲述了JS实现自定义简单网页软键盘效果。分享给大家供大家参考，具体如下：这是一款自定义的简单点的网页软键盘，没有使用任何控件，仅是为了练习JavaScript编写水平，安全性方面没有过多考虑，有顾虑的可以不用，目的是学...2015-11-08

  • android自定义动态设置Button样式【很常用】

    为了增强android应用的用户体验，我们可以在一些Button按钮上自定义动态的设置一些样式，比如交互时改变字体、颜色、背景图等。 今天来看一个通过重写Button来动态实...2016-09-20

  • Android自定义WebView网络视频播放控件例子

    下面我们来看一篇关于Android自定义WebView网络视频播放控件开发例子，这个文章写得非常的不错下面给各位共享一下吧。 因为业务需要，以下代码均以Youtube网站在线视...2016-10-02

  • 自定义jquery模态窗口插件无法在顶层窗口显示问题

    自定义一个jquery模态窗口插件，将它集成到现有平台框架中时，它只能在mainFrame窗口中显示，无法在顶层窗口显示. 解决这个问题的办法： 通过以下代码就可能实现在顶层窗口弹窗 复制代码 代码如下: $(window.top.documen...2014-05-31

  • 自定义feignClient的常见坑及解决

    这篇文章主要介绍了自定义feignClient的常见坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-10-20

  • pytorch 自定义卷积核进行卷积操作方式

    今天小编就为大家分享一篇pytorch 自定义卷积核进行卷积操作方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-05-06

  • PHP YII框架开发小技巧之模型(models)中rules自定义验证规则

    YII的models中的rules部分是一些表单的验证规则，对于表单验证十分有用，在相应的视图（views）里面添加了表单，在表单被提交之前程序都会自动先来这里面的规则里验证，只有通过对其有效的限制规则后才能被提交，可以很有效地保证...2015-11-24

  • jquery自定义插件开发之window的实现过程

    这篇文章主要介绍了jquery自定义插件开发之window的实现过程的相关资料,需要的朋友可以参考下...2016-05-09

  • nestjs中异常过滤器Exceptionfilter的具体使用

    这篇文章主要介绍了nestjs中异常过滤器Exceptionfilter的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-02-07

  • 详解Tomcat常用的过滤器

    过滤器Filter是定义于tomcat的servlet-api.jar中的一个接口，接口路径为javax.servlet.Filter。tomcat过滤器采用了典型的过滤器设计模式，过滤器链FilterChain由tomcat维持，链条是可以支持多个过滤器的...2021-06-26

  • C#自定义事件监听实现方法

    这篇文章主要介绍了C#自定义事件监听实现方法,涉及C#事件监听的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25

  • c#之用户定义的数据类型转换介绍

    c#允许定义自己的数据类型，这意味着需要某些工具支持在自己的数据类型间进行数据转换。方法是把数据类型转换定义为相关类的一个成员运算符，数据类型转换必须声明是隐式或者显式，以说明怎么使用它...2020-06-25

  • Vue.js学习之过滤器详解

    过滤器，本质上就是一个函数。其作用在于用户输入数据后，它能够进行处理，并返回一个数据结果。下面这篇文章主要给大家介绍了Vue.js中过滤器的相关资料,需要的朋友可以参考借鉴，一起来看看吧。...2017-01-26

  • Vue封装全局过滤器Filters的步骤

    这篇文章主要介绍了Vue封装全局过滤器Filters的步骤，通过封装vue全局过滤器实现filters的统一管理。感兴趣的朋友可以了解下...2020-09-16

  • Vue的全局过滤器和私有过滤器的实现

    这篇文章主要介绍了Vue的全局过滤器和私有过滤器的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-04-20

  • 使用BindingResult 自定义错误信息

    这篇文章主要介绍了使用BindingResult 自定义错误信息，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-10-23

  • 在Vue中获取自定义属性方法:data-id的实例

    这篇文章主要介绍了在Vue中获取自定义属性方法:data-id的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-09

  • vue 将多个过滤器封装到一个文件中的代码详解

    这篇文章主要介绍了vue 将多个过滤器封装到一个文件中实现方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧...2020-09-05

  • vue3删除过滤器的原因

    去年，vue3出来了。增加了很多新功能，但是也删掉了一些功能。比如删掉了vue2中的过滤器filter功能。与此同时，官方建议：用方法调用或计算属性替换过滤器。本文将分析vue3删除过滤器的原因及如何用其他方法实现过滤器的功能...2021-05-13