Vue 2.0的快速入门(基础)

                                                   

Vue.js 2.0 快速上手 - 基础篇

 

   本文参考了http://blog.zhaiyifan.cn/2016/10/17/vue-2-quick-start/?utm_source=tuicool&utm_medium=referral中的内容,添加了自己学习后的些许想法,还没完善,由于工作时间,正在挤出时间慢慢的添加。

   

模板语法

Vue 提供了一堆数据绑定语法。

  • { { text }} 文本插值
  • HTML 输出
  • v-bind HTML 属性插值。如
  • JavaScript 表达式。直接在 mustache、属性插值里面使用各种表达式(加减乘除、三元运算、方法调用等)。
  • 过滤器(有点类似 Shell 命令中的管道,可以定义过滤器来对原始值进行变化)。
  • 指令。之前提到的 v-bind 也是一种指定,其他包括 v-on: 系列(dom 事件的监听)、v-for、v-model等。

Vue 实例

Vue 实例,实则也就是 ViewModel(数据 + 函数),都是通过构造函数 Vue 创建的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var data = { a: 1 }
var vm = new Vue({
        
  el: '#example',
  data: data,
  created: function () {
        
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一个实例方法
vm.$watch('a', function (newVal, oldVal) {
        
  // 这个回调会在 `vm.a` 改变的时候触发
})

Vue 实例都有自己的生命周期,比如 created, mounted, updated 以及 destroyed。所有方法被 called 的时候,this 都指向所在的 Vue 实例。

Lifecycle 图如下:
lifecycle

计算属性和监听器

计算属性

其实就是一个需要计算的 getter:

1
2
3
4
<div id="example">
  <p>Original message: "{
        { message }}"p>
  <p>Computed reversed message: "{
        { reversedMessage }}"p>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var vm = new Vue({
        
  el: '#example',
  data: {
        
    message: 'Hello'
  },
  computed: {
        
    // 一个 computed getter
    reversedMessage: function () {
        
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
</div>

和使用 method 的区别在于,计算属性根据它的依赖被缓存,即如果 message 没有被修改,下次 get 不会进行重复计算,而 method 则每次调用都会重新计算。这也意味着如 Date.now() 这样返回的计算属性会永远得不到更新。

Setter

默认情况下,计算属性只有一个 getter,我们也可以给它加上 setter:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

computed: {
        
  fullName: {
        
    // getter
    get: function () {
        
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
        
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

如此,当我们调用 vm.fullName = 'MarkZhai' 的时候,firstName 和 lastName 都会被更新。

监听器

Vue 的 watch 也可以用来做类似的事:

1
<div id="demo">{
        { fullName }}div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var vm = new Vue({
        
  el: '#demo',
  data: {
        
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
        
    firstName: function (val) {
        
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
        
      this.fullName = this.firstName + ' ' + val
    }
  }
})

对比一下计算属性版本:

1
2
3
4
5
6
7
8
9
10
11
12
var vm = new Vue({
        
  el: '#demo',
  data: {
        
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
        
    fullName: function () {
        
      return this.firstName + ' ' + this.lastName
    }
  }
})

看上去好像简单了很多,那还要 Watcher 干啥呢。。。主要应用场景是异步或耗时操作:

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

                    
                    

你可能感兴趣的:(vue,2.0,vue,2.0,vue,2快速入门,vue,vuejs快速入门)