『前端学习笔记』 Vue.js 过滤器与自定义指令

参考视频：学 Vue.js 看这个就够了

官方文档：Vue.js

过滤器：filter

可以用作一些常见文本的格式化。

• 应用场景

1. mustachc插值
2. v-bind表达式

全局过滤器：Vue.filter()方法

• 定义

<div class="myapp">
  <p>{{ msg | myfilter }}</p> <!--语法：管道符后接自定义过滤器名称-->
  <p>{{ msg | myfilter('QWE') }}</p> <!--加参数-->
  <p>{{ msg | myfilter('QWE') | myfilter2 }}</p> <!--可以多次调用-->
</div>

<script src="js/vue.js"></script>
<script>

  Vue.filter('myfilter', function (msg, str) { /*参数1：自定义过滤器名称 参数2：回调函数(参数1：[固定]原值，可更名 参数后续：调用决定)*/
    if(str == null || str == undefined)
      return msg.replace(/abc/g, 'ABC'); /*返回值返回到插值表达式中*/ /*正则替换：全局*/
    else
      return msg.replace(/abc/g, str); /*使用参数替换*/
  }); /*必须定义在Vue对象前面*/

  Vue.filter('myfilter2', msg => msg + " add filter2");

	var vm = new Vue({
		el:'.myapp',
		data:{
		  msg: "abcdefabcdefabcdefabcdefabcdef"
		}
	});
</script>

• 代码结果

1. 原字符串中abc替换为ABC
2. 原字符串中abc替换为参数QWE
3. 原字符串中abc替换为参数QWE后，添加一个字符串

局部过滤器：构造函数的filters对象

• 定义：在构造函数内的filters对象内添加

<div class="myapp">
  <p>{{ msg | myfilter }}</p>
</div>

<script src="js/vue.js"></script>
<script>
	var vm = new Vue({
		el:'.myapp',
    data:{
		  msg: "mymessage"
    },
    filters:{
		  myfilter: msg => msg + "hello"
    }
	});
</script>

• 特性

1. 私有：定义在Vue对象内，只有当前对象绑定的区域可以使用
2. 就近原则：私有过滤器和全局过滤器同名时，优先私有

案例：更换日期字符串

<div class="myapp">
  <p>{{ date | mydatefilter }}</p>
</div>

<script src="js/vue.js"></script>
<script>

    Vue.filter('mydatefilter', date => {  //ES6箭头函数
        let y = date.getFullYear(); //日期API
        let m = date.getMonth() + 1;
        let d = date.getDate();
        return `${y}-${m}-${d}`; //ES6模板字符串
    });

	var vm = new Vue({
		el:'.myapp',
  		data:{
		    date: new Date()
        }
	});
</script>

• 代码结果：将原Date()对象更改格式后输出

自定义指令：directive

全局自定义指令：Vue.directive()方法

• 官方文档

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

局部自定义指令：构造函数的directives对象

//如果想注册局部指令，组件中也接受一个 directives 的选项
directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

钩子函数

• 官方文档

• 不同钩子函数的应用场景

1. bind()：绑定时调用，建议设置CSS样式
2. insert()：插入父节点时调用，建议设置JS行为

钩子函数参数

• 官方文档

• 参数性质：形参，只和传入顺序有关，可以改名

函数简写

• 定义

1. 自定义指令时，参数1为名称，参数2为一个对象，包含诸多钩子函数
2. 简写时，参数2直接写成函数形式
3. 简写形式相当于直接写入了bind()和update()
   
   

• 全局形式（官方文档）
  
• 局部形式

<div class="myapp">
  <p v-color1>使用自定义指令</p>
  <p v-color2>使用自定义指令</p>
</div>

<script src="js/vue.js"></script>
<script>
  var vm = new Vue({
    el:'.myapp',
    directives: {
      color1:{
        bind: function(el) {
          el.style.color = "red"
        }
      },
      color2: function(el) {
        el.style.color = "red"
      }
    }
  });
</script>

案例：输入框自动获得焦点

1. 方法1：H5autofocus属性

<div>
  <input type="text" autofocus>
</div>

2. 方法2：DOM加focus()方法

<div>
  <input id="myinput" type="text">
</div>

<script>
  document.getElementById("myinput").focus();
</script>

3. 方法3：自定义Vue指令

<div class="myapp">
  <input type="text" v-focus>
</div>

<script src="js/vue.js"></script>
<script>
  /*官方文档*/
  // 注册一个全局自定义指令 `v-focus`
  Vue.directive('focus', {
    // 当被绑定的元素插入到 DOM 中时……
    inserted: function (el) {
      // 聚焦元素
      el.focus()
    }
  })
  var vm = new Vue({
    el:'.myapp',
    methods:{
    }
  });
</script>

• 注意事项

1. 参数：1为自定义指令名，2为一个对象（包含若干钩子函数）
2. 调用：强制要求调用时在指令前加v-

案例：自定义CSS样式颜色

• 在bind()定义

<div class="myapp">
  <p v-color>使用自定义指令</p>
</div>

<script src="js/vue.js"></script>
<script>
  Vue.directive('color', {
    bind: function (el) {
      el.style.color = 'red'; //操作DOM
    }
  })
  var vm = new Vue({
    el:'.myapp'
  });
</script>

• 使用参数

<div class="myapp">
  <p v-color="'red'">使用自定义指令</p> <!--参数为值：加单引号-->
  <p v-color="mycolor">使用自定义指令</p> <!--参数为变量：直接用-->
</div>

<script src="js/vue.js"></script>
<script>
  var vm = new Vue({
    el:'.myapp',
    data:{
      mycolor: '#00ff00'
    },
    directives: { //使用局部自定义指令
      color:{
        //使用箭头函数
        //使用参数binding对象
        bind: (el, binding) => {el.style.color = binding.value}
      }
    }
  });
</script>