vue 之 全局与局部

 一.过滤器

(1)全局使用

   1> 添加moment 模块 npm  i  moment

   2> 在main.js中  通过  Vue.fileter 定义一个全局的过滤器

?

1	import moment from "moment";

    Vue.filter("date", (val, type = "YYYY-MM-DD") => {

       return moment(val).format(type);

    });

   3>HelloWorld.vue使用

?

1	<h1>{{ time | date("YYYY") }}</h1>

 

(2) 局部使用

  1>HelloWorld.vue　

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

<template>   <div class="hello">     <h1>{{ time | date("YYYY") }}</h1>     <h2>{{ time | date1("YYYY-MM") }}</h2>   </div> </template>   <script> import moment from "moment"; export default {   name: "HelloWorld",   data() {     return {       time: 1582169602000,     };   },   filters: {     date1: function(val) {       return moment(val).format("YYYY-MM-DD");     },     // kk(val, type = "YYYY-MM-DD") {     //   return moment(val).format(type);     // },   },   props: {     msg: String,   }, }; </script>   <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped></style>

  结论:全局和局部是可以共存的,同一个模块也可以在不同的页面进行导入

          若报错,可能是引用模块后没有被使用的问题

 

 二.自定义指令

 (1)全局定义

 1>在main.js中  通过  Vue.fileter 定义一个全局的指令

?

1 2 3 4 5

Vue.directive("red", {   inserted(el) {     el.style.backgroundColor = "red";   }, });

  2>在HelloWrold.vue中使用　

?

1	<h1 v-red>{{ time | date("YYYY") }}</h1>

　　

 (2)局部定义

1>HelloWorld.vue文件

 

   <input type="text" v-focus />

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

export default {   name: "HelloWorld",   data() {     return {       time: 1582169602000,     };   },   directives: {     focus: {       inserted(el) {         el.focus();       },<br>      update(el)<br>     {<br>   　　　el.focus();<br>     }     },   },   filters: {     date1: function(val) {       return moment(val).format("YYYY-MM-DD");     },   },   props: {     msg: String,   }, };