vue 之 全局与局部

 一.过滤器

(1)全局使用

   1> 添加moment 模块 npm  i  moment

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

import moment from "moment";

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

       return moment(val).format(type);

    });

   3>HelloWorld.vue使用

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

 

(2) 局部使用

  1>HelloWorld.vue　

 

<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 定义一个全局的指令

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

  2>在HelloWrold.vue中使用　

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

　　

 (2)局部定义

1>HelloWorld.vue文件

 

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

 

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