Vue学习计划--Vue2（六）过滤器和自定义指令

1. 过滤器

1. 定义：对要显示的数据进行特定格式转换再显示（适用于一些简单逻辑的处理）
2. 语法：
   1. 注册过滤器：Vue.filter(name, callback) 或 new Vue{filters:{}}
   2. 使用过滤器：{{ xx | 过滤器名 }} 或 v-bind:属性 = "xxx | 过滤器名"
3. 备注：
   1. 过滤器也可以接受额外参数、多个过滤器也可以串联
   2. 并没有改变原本的数据，是产生新的对应的数据

示例：(局部过滤器)

	
	
	
	    
	    
	    
	    
	    
	
	
	    

	        
	        
计算属性：
	        
{{ nameUpper }}
	        

	        
过滤器：
	        
	        
{{ name | nameSliceFilter | nameUpperFilter }}
	        
{{ name | nameUpperFilter }}
	        

	        
	        
	        
{{ longName | nameSliceFilter2(9) }}
	        
{{ longName | nameSliceFilter2() }}
	        

	        
	        
属性过滤器文本
	    
	    
	
	

示例：(全局过滤器)

	
	
	
	    
	    
	    
	    
	    
	
	
	    

	        
{{ name | nameSliceFilter }}
	        
{{ longName | nameUpperFilter }}
	    
	    

	        
{{ rootName | nameSliceFilter }}
	    
	    
	
	

2. 内置指令

0. v-bind, v-on,v-show…

1. v-text指令：

   1. 作用：向其所在的节点中渲染文本内容
   2. 与差值语法的区别：v-text会替换掉节点中的内容，{{ xx }} 不会

   示例：

   
     
   
       
       
   {{ name }}
       
   
       
   
       
   你好， {{ name }}
       
   你好，
       
   
       
   {{ str }}
       
   
     
     
   
   

2. v-html指令：

   1. 作用：向指定节点中渲染包含html结构的内容
   2. 与插值语法的区别：
      1. v-html会替换掉节点中所有的内容，{{ xx }}不会
      2. v-html可以识别html结构
   3. 严重注意：v-html有安全问题：
      1. 在网站上动态渲染任意HTML是非常危险的，容易收到XSS攻击
      2. 一定要在可信的内容上使用v-html，永不要在用户提交的内容上

   示例：

       
   	  
   
   	    
   {{ str }}
   	    
   
   	    
   
   	  
   	  
   	
   

3. v-cloak指令（没有值）：

   1. 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
   2. 使用css配合v-cloak可以解决网速慢时页面展示出 {{ xx }} 的问题

	
	
	
	  
	  
	  
	  
	  
	  
	
	
	  

	    
{{ name }}
	  
	  
	
	

4. v-once指令：

   1. v-once所在的节点初次动态渲染后，就视为静态内容了
   2. 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能

   示例：

   
     
   
       
       
   初始的n值是：{{ n }}
       
   当前的n值是：{{ n }}
       添加
     
     
   
   

5. v-pre指令：

   1. 跳过其所在节点的编译过程
   2. 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译

   示例：

   
     
   
       
   当前的n值是：
       
   {{ n }}
       添加
     
     
   
   

6. Vue模板语法有2大类：

   1. 插值语法：
      • 功能： 用于解析标签体内容
      • 写法： {{ xx }}, xx是js表达式，且可以直接读取到data中的所有属性
   2. 指令语法：
      • 功能：用于解析标签（包括：标签属性，标签体内容，绑定事件…）
      • 举例：v-bind:href= ‘xxx’ 或简写 :href= ‘xxx’ xxx同样要写表达式，且可以直接读取到data中的属性
      • 备注：Vue中有很多的指令，且形式都是：v-???,此处我们只拿v-bind举个例子

3. 自定义指令：

1. 本质：是一个函数，不靠返回值获取值，靠操作收到的参数去获取值
2. 作用： 操作DOM元素: 例如v-bind,v-show,v-if等都是对DOM元素进行操作
3. 两种方式：
   1. 函数式：写法简单，不能操作一些细节

   directives:{
       // big函数何时会被调用？
       //  1. 指令与元素成功绑定时,(初始时)
       //  2. 指令所在的模板被重新解析时
       big(element, binding){
         // element：指令所绑定的元素，可以用来直接操作 DOM
         // binding：一个对象，包含很多属性
         //    value: 指令的绑定值
         //    name: 指令名,不包括 v- 前缀
         //    expression：字符串形式的指令表达式
   
         console.log(element, binding);
         element.innerHTML = binding.value * 10
       }
   }
   

   2. 对象式: 详细的表明执行到某一特定时期，调用特定函数

    directives:{
       fbind:{
         //  指令与元素成功绑定时,(初始时)
         bind(element, binding){
           // console.log('1',element, binding);
           element.value = binding.value
         },
         // 指令所在的元素被插入页面时
         inserted(element, binding){
           // console.log(2,element, binding);
           element.focus()
         },
         // 指令所在的模板被重新解析时
         update(element, binding){
           // console.log(3,element, binding)
           element.value = binding.value
         }
       }
     }
   

   1. 定义语法：
      1. 局部指令：

      new Vue({
      directives:{指令名: 配置对象}
      })
      或
      new Vue({
      directives:{指令名: 回调函数}
      })
      

      2. 全局指令：

      Vue.directive(指令名, 配置对象)
      或
      Vue.directive(指令名, 回调函数)
      

4. 配置对象中常用的3个回调：
   1. bind: 指令与元素成功绑定时调用
   2. inserted: 指令所在元素被插入页面时调用
   3. update: 指令所在模板结构被重新解析时调用
5. 备注：
   1. 指令定义时不加v-, 但使用时要加v-
   2. 指令中的this指向的是window
   3. 指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名

示例：（局部指令–对象式）

  
  
    
    
    
    
    
  
  
    
    
    

      操作
      

      
    
    
  
  

示例：（局部指令–函数式）

  
  
    
    
    
    
    
  
  
    
    
    

      
{{ name }}
      
当前的n值是：
      
放大10倍后的n值是：
      操作
    
    
  
  

示例：（全局指令）

  
  
    
    
    
    
    
  
  
    

      
当前的n值是：
      
      
放大10倍后的n值是：
      操作
    
    

    

      
当前的n值是：
      
放大10倍后的n值是：
      操作