代码下载:网盘

欢迎私信

第一章:过滤器

过滤器是对数据进行处理并返回结果的函数。

1.语法

语法是使用管道符“|”进行连接。过滤器可以接收参数，跟在过滤器后面，带引号的参数被当做字符串处理，不带引号的参数被当做数据属性名处理。

{
   {message | filterFunction "arg1" arg2 }}

vue.js支持在任何出现表达式的地方添加过滤器。

vue.js支持链式调用，上一个过滤器的输出结果作为下一个过滤器的输入。类似于Linux shell的管道符(|)使用。

{
   {"ddfe"|capitalize|reverse}}
     

2.内置过滤器

(1)字母操作capitalize、uppercase、lowercase

    
         
     
    
      
       {
   {"ddfe"|capitalize}}
      
    
      
       {
   {"ddfe"|uppercase}}
      
    
      
       {
   {"DDFE"|lowercase}}
      
     
     
     

(2)json过滤器

先看它如何使用的。

    
            
     
       
      
       {
   {didiFamily|json}}
      
   
     
      

浏览器的显示结果:

再来看一下源码。

json: {      read: function read(value, indent) {        return typeof value === 'string' ? value : JSON.stringify(value, null, Number(indent) || 2);      },      write: function write(value) {        try {          return JSON.parse(value);        } catch (e) {          return value;        }      }    }

主要说一说，JSON的stringify函数和JSON的parse函数。

 stringify函数的功能是把对象或者数组转换为JSON字符串。parse函数的功能是把有效的json字符串解析为对象。

(3)限制过滤器limitBy、filterBy、orderBy

这3个过滤器处理的数据必须是数组，否则程序会报错。

 limitBy显示以偏移量(默认为0)开始的N个数组。

filterBy要么处理数组搜索字符串(参数提供)，要么处理对象对所有属性搜索字符串，如果提供特定属性，使用"in"语法。

orderBy如果参数小于0，那么是降序排列，如果参数大于0，那么是升序排列。

    
            
     
       
      
           
       
        {
   {num}}
       
           
              
      
       
      
           
       
        {
   {num}}
       
           
              
      
       
      
       {
   {arr|filterBy "hello"}}
      
       
             
      
           
       
               {
    {user.name}}           
           
              
      
       
      
       {
   {nums|orderBy -1}}
      
       
             
      
       {
   {nums|orderBy 1}}
      
   
     

(4)currency过滤器　　

作用是给数字添上货币符号，默认的为$美元。 

    
         
     
   
      
       {
   {"122334"|currency "￡"}}
      
     

(5)debounce过滤器

作用是延迟一段时间处理。一般与v-on指令结合使用。默认延迟时间300毫秒。如果监听用户的input事件，有时可用来防止频繁调用。

3.自定义过滤器

首先，filter函数是一个挂载到Vue上的全局函数(打印window可观察到)，然后要说明的是它接收的参数，第一个过滤器的id名字，第二个是一个定义过滤器的function。下面从参数类型分别来讨论function。

(1)单个参数

(2)多参数

(3)双向过滤器

    
              
      
        
       
{
    {message}}
        
           
      
        

(4)动态参数

    
             
     
        
              
      {
   {msg | concat userInput}}        
              
          
     

4.自己写一个filter

注意点，过滤器的名字如果与内置过滤器冲突，内置过滤器会被覆盖。

双向过滤器的DEMO:

    
             
     
        
      
{
   {message}}
        
          
     
        

5.源码解析

(1)capitalize过滤器

capitalize: function capitalize(value) {      if (!value && value !== 0) return '';      value = value.toString();      return value.charAt(0).toUpperCase() + value.slice(1);      //charAt通过索引0取得首字母，然后通过toUpperCase()转化为大写，然后通过slice截取的从索引1开始的字符串，做加法。    },

(2)uppercase过滤器

uppercase: function uppercase(value) {      return value || value === 0 ? value.toString().toUpperCase() : '';     //先转为字符串，然后进行大写    },

(3)lowercase过滤器

lowercase: function lowercase(value) {      return value || value === 0 ? value.toString().toLowerCase() : '';     //先转字符串儿，然后小写    },

第2章:Class与Style绑定

关于样式常常会操作元素的class列表和它的内联样式。

1.绑定HTML Class

(1)对象语法

传给v-bind:class一个对象，通过变量来动态切换class,该对象要么是对象字面量，要么是数据中直接的一个对象。

渲染的效果为

另外，还可以绑定一个返回对象的计算属性。略。

(2)数组语法

2.绑定内联样式