Vuejs-基本用法

知识点1：


模板：使用{{}}两个大括号
这里会出现一些因为计算的表达式从而导致模板变得非常难看
这里可以使用computed属性来解决
《--------------------------》
html代码：


<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>


js代码：


var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})


《--------------------------》
通过coputed属性就能很好的解决html上的数据混乱的情况，将其写在js里面
这里其实还可以使用method的函数方法来实现，不过使用函数与computed属性
这种方法不同的是，函数每次都会执行，但是这个属性只要message没有改变
的话就不会再执行函数，而是直接返回上次获得的结果。具有速度快的优点。


知识点2：
$watch的方法和计算属性相比，在一个对象数据会因另外一个而改变的时候使
用计算属性可能更佳。
《--------------------------》
html代码：


<div id="demo">{{ fullName }}</div>


js代码：


watch：


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
    }
  }
})


计算属性：


var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})


《--------------------------》
很明显可以看出watch的方法写出来后出现了重复代码的问题，而使用计算
属性的话就不会出现这种情况


知识点3：


计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
《--------------------------》
// ...
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 = 'John Doe' 时， setter 会被调用， 
vm.firstName 和 vm.lastName 也会被对应更新。


知识点4：
Vuejs中使用v-if，v-else来表示条件语句


《--------------------------》


<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>


《--------------------------》


条件组可以使用template来表示


《--------------------------》


<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>


《--------------------------》


v-else必须紧跟v-if元素之后，不然会无法识别。
然后还有就是v-else-if元素的使用。


《--------------------------》


<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>


《--------------------------》