vue.js_tutorial/session7.js at master · nakatievent/vue.js_tutorial · GitHub

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
var app = new Vue({
  el: "#app",
  data: {
    message: "Hello,Vue.js"
  },
  watch: {
    message: function(newValue, oldValue){
      console.log('new: %s, old: %s', newValue, oldValue)
    }
  }
})

var app2 = new Vue({
  el: "#app2",
  data: {
    km: 0,
    m: 0,
    mm: 0
  },
  watch: {
    km: function(value) {
      // console.log(value)
      this.km = value
      this.m = value * 1000
      this.mm = value * 1000000
    },
    m: function(value) {
      this.km = value / 1000
      this.m = value
      this.mm = value * 1000
    },
    mm: function(value) {
      this.km = value / 1000000
      this.m = value / 1000
      this.mm = value
    }
  }
})

// var app3 = new Vue({
//   el: "#app3",
//   data: {
//     firstName: " ",
//     lastName: " ",
//     fullName: " "
//   },
//   watch: {
//     firstName: function(value) {
//       this.fullName = value + " " + this.lastName
//     },
//     lastName: function(value) {
//       this.fullName = this.firstName + " " + value
//     }
//   }
// })

var app3 = new Vue({
  el: "#app3",
  data: {
    firstName: " ",
    lastName: " ",
  },
  computed: {
    fullName: function() {
      return this.firstName + " " + this.lastName
    }
  }
})

var app4 = new Vue({
  el: "#app4",
  data: {
    colors: [
      { name: 'red'},
      { name: 'green'},
      { name: 'blue'},
    ]
  },
  watch: {
    colors: {
      handler: function(newValue, oldValue) {
        console.log('Update!')
        console.log("new: %s, oldValue: %s",
          JSON.stringify(newValue, null, '\t'),
          JSON.stringify(oldValue, null, '\t'))
      },
      deep: true,
      immediate: true
    }
  }
})