学习Vue.js简单总结2（过滤器、自定义指令）

过滤器

• 概念
  vue.js允许自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：插值表达式和V-bind表达式。过滤器应该被添加在JavaScript表达式的尾部，由“管道”符指示。
• 过滤器调用时的格式
  {{name | 过滤器的名称}}
  • name 是我们需要修改的数据 ；
  • | 是管道符
• 过滤器的定义语法

  Vue.filter('过滤器的名称',function(){})
  

  注：过滤器中的function，第一个参数，已经被确定，一直都是过滤器管道符前面传递过来的数据。
• 过滤器的简单使用

  <!-- 把msg中的单纯替换成邪恶 -->
  <div id="app">
      <p>{{msg | msgFormat }}</p>
  </div>
  <script>
       Vue.filter('msgFormat', function (msg) { 
           return msg.replace(/单纯/g,'邪恶')
       })
      var vm = new Vue({
          el: "#app",
          data: {
              msg:'我还是那个单纯的少年，单纯的我'
          },
  </script>
  

  注：在p标签中的msgFormat，可以传递参数，这个参数是我们想要把msg变成的值，此时我们需要把function中添加参数，添加到后面。代码发现如下变化：

  <div id="app">
      <p>{{msg | msgFormat('疯狂') }}</p>
  </div>
  ---------------------------------------
  Vue.filter('msgFormat', function (msg,arg) { 
           return msg.replace(/单纯/g,arg)
       })
  

• 过滤器调用时，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，此时优先调用私有。私有过滤器是定义在Vue实例中。

自定义指令

• 自定义全局指令获取焦点
  • 使用Vue.directive()定义全局指令
    • 第一个参数代表指令的名称，在定义的时候，指令的名称前面，不需要加v-前缀。但是，在调用的时候，必须在指令名称前加上v-前缀来进行调用。
    • 第二参数是一个对象，这个对象上有一些指令相关的函数，这些函数可以在特定的阶段执行相关的操作。

    Vue.directive('focus',{
            //bind，每当指令绑定到元素上的时候回立即执行这个bind函数，只执行一次
            bind: function (el) {
                //元素刚绑定指令的时候，还没有插入到DOM中去，这个时候，调用focus方法没有起作用
                //因为一个元素只有在插入DOM之后，才能获取焦点
                //el.focus()
            },
            //inserted 表示元素插入到DOM中的时候，会执行inserted函数,只触发一次
            inserted: function (el) {
                el.focus()
            },
            //当Vnode更新的时候，会执行update，可能会触发多次
            update: function (el) {
            
            }, 
        })
    

    注：在钩子函数中，第一个参数永远是el，表示被绑定指令的那个元素，这个el参数，是一个原生JS对象。
    

    • 钩子函数参数
      el：指令所绑定的元素，可以用来直接操作DOM
      binding：一个对象，包含以下 property：
    1. name：指令名，不包括 v- 前缀。
    2. value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
    3. expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
• 定义局部指令

    directives: {
      focus: {
        // 指令的定义
        inserted: function (el) {
          el.focus()
        }
      }
    }
  

• 指令函数的简写形式
  在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如这样写：

  Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
  })