Vue总结（二）

Posted on In

filter

1
2
3
4
5
6
7
8
9
10
Vue.filter("msgFormat", function (msg, arg) {
  return msg.replace(/test/g, arg)
})
Vue.filter("test", function (msg) {
  return msg + "===="
})
var vm = new Vue({
  el: "#app",
  data: { msg: "test1 test2 test3" },
})

privateFilter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var vm = new Vue({
  el: "#app",
  data: {
    dt: new Date(),
  },
  filters: {
    dateFormate: function (dateStr, pattern = "") {
      var dt = new Date(dateStr)
      var y = dt.getFullYear()
      var m = dt.getMonth() + 1
      var d = dt.getDate()

      if (pattern.toLowerCase() == "yyyy-mm-dd") return `${y}-${m}-${d}`
      else {
        var hh = dt.getHours()
        var mm = dt.getMinutes()
        var ss = dt.getSeconds()
        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
      }
    },
  },
})

** eg: **

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var vm = new Vue({
  el: "#app",
  data: {
    dt: new Date(),
  },
  filters: {
    dateFormate: function (dateStr, pattern = "") {
      var dt = new Date(dateStr)
      var y = dt.getFullYear()
      var m = (dt.getMonth() + 1).toString().padStart(2, "0")
      var d = dt.getDate().toString().padStart(2, "0")

      if (pattern.toLowerCase() == "yyyy-mm-dd") return `${y}-${m}-${d}`
      else {
        var hh = dt.getHours().toString().padStart(2, "0")
        var mm = dt.getMinutes().toString().padStart(2, "0")
        var ss = dt.getSeconds().toString().padStart(2, "0")
        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
      }
    },
  },
})

Lifecycle

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
33
34
35
36
37
38
39
40
41
42
43
44
var vm = new Vue({
  el: "#app",
  data: {
    msg: "ok",
  },
  methods: {
    show() {
      console.log("run show")
    },
  },
  beforeCreate() {
    // data 和 methods 数据都未初始化
    // console.log(this.msg)
    // this.show()
  },
  created() {
    console.log(this.msg)
    this.show()
  },
  beforeMount() {
    // 编译好了模板，还未挂载到页面中
    console.log(document.getElementById("h3").innerText)
  },
  mounted() {
    // 模板已经挂载到页面中
    console.log(document.getElementById("h3").innerText)
    // mounted 之后表示 Vue 实例已经被完全创建好了
  },

  beforeUpdate() {
    // 数据改变，页面未变
    console.log(document.getElementById("h3").innerText)
  },
  updated() {
    // 数据和页面都改变了
  },

  beforeDestroy() {
    // data 和 methods 都可以使用
  },
  destroyed() {
    // 完全销毁
  },
})