Vue--基础模板语法以及计算属性

属性和方法

1. 每个Vue实例会代理其data对象里所有的对象

var app = new Vue({
    data: {
        message : ''
    }
})

也就是说，可以直接通过:

app.message = 'xxx'

来改变data中出现的属性， 从而引发视图的变化。
2. 注意只有这些被代理的属性是响应的。
如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
3. Vue实例中，带有前缀 $ 的属性会有特殊作用， 比如：

var data = { a: 1 }
var vm = new Vue({
    el: '#example',
    data: data
})

vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true

vm.$watch('a', function(newVal, oldVal){
    // 此方法在属性a改变后发生
})

---

生命周期

1. beforeCreate : 组件实例刚被创建，组件属性计算之前（data等）
2. craeted : 组件实例创建完成，属性已绑定，但DOM未生成，$el属性还不存在。
3. beforeMount ： 模板编译/挂载之前
4. mounted : 模板编译/挂载之后
5. beforeUpdate : 组件更新之前
6. updated : 组件更新之后
7. activated ： for keep-alive 组件被激活时调用
8. deactivated : for keep-alive 组件被移除时调用
9. beforeDestroy ： 组件销毁之前
10. destroyed : 组件销毁之后

---

模板语法

• v-once : 这个节点上的所有绑定，单次插值，之后数据不会再变化
• v-html : 一般情况 {{ }} 解析出的数据为纯文本，想要输出html内容则可如下，但数据绑定将被忽略，标签中的内容也会被会忽略:

<div id="app">
    <p>{{ message }}</p>
    <p v-html="htmltest"></p>
</div>

new Vue({
    el: '#app',
    data: {
    message: '<span>Hello Vue.js!</span>',
    htmltest: '<span class="test-1">it is html content!</sapn>'
    }
})

• v-bind : 对于html属性，{{ }}不能用于此。取而代之的是 v-bind

<div v-bind:id="dynamicId"></div>

new Vue({
  el: '#app',
  data: { dynamicId: 'what' }
})

• 表达式 : 除了变量，还可使用表达式；每个绑定只能包含单个表达式；只能访问白名单中的全局变量，如 Math 和 Date，不要试图访问用户在模板表达式中定义的全局变量。

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

• filters : 类似shell中的管道；

{{ message | filterA('arg1', arg2) }}

new Vue({
  data: {
    message : 'xxx'
  }
  filters: {
    capitalize: function (value, arg1, arg2) {
      //value
    }
  }
})

过滤器函数总接受表达式的值作为第一个参数。
字符串 ‘arg1’ 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

• 缩写 :

<a v-bind:href="url"></a>           //可写为：
<a :href="url"></a>
<a v-on:click="doSomething"></a>    //可写为：
<a @click="doSomething"></a>

---

计算属性

• 计算属性 vs 表达式

  {{ message.split('').reverse().join('') }}

  但若使用频繁，处处如此调用，往往是不可取的。计算属性虽然不是普通的属性，但其也可以被当作一种属性，且依赖于其他属性。如下：

  computed: {
     // 计算属性的 getter方法
     reversedMessage: function () {
         return this.message.split('').reverse().join('')
     }
  }

  计算属性的 getter 方法干净无副作用…

• 计算属性 vs 函数

  <p>反转语句 : {{ reverseMessage() }}<\/p>
  
  methods: {
   // 计算属性的 getter方法
   reversedMessage: function () {
     return this.message.split('').reverse().join('')
   }
  }

  两种方式得到的结果是完全一样的，不同的地方在于计算属性是基于其依赖的缓存
  至于是否需要缓存，就看实际情况啦

• 计算属性 vs $WATCH

  $watch 用于监听已有的普通属性，若是沿用上面的例子，那么思路就是指定message以及reversedMessage两个属性，之后监听message属性的变化的同时，改变reversedMessage的值。
  但初始化时必须将reversedMessage手动设置为message的倒序字符串。
  上面例子似乎不妥，所以换用下面的例子：

  data: {
   firstName: 'aaa',
   lastName: 'bbb',
   fullName: 'aaabbb'
  },
  computed: {
   computedFullName: function () {
     return this.firstName + this.lastName;
   }
  },
  watch: {
   firstName: function (val) {
     this.fullName = val + ' ' + this.lastName
   },
   lastName: function (val) {
     this.fullName = this.firstName + ' ' + val
   }
  }

  无论是获取computedFullName还是获取fullName的值都是一样的。但明显计算属性的代码更简洁精炼。

• 计算属性 set 方法：

  <p>完整名字 : {{ fullName }}</p>
  
  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]
     }
   }
  }