Vue初学笔记

新项目开始前的间隙，久闻Vue大名，今天终于有机会可以见识见识了。

 

废话少说，直接从官方文档引导开始看起

http://http://cn.vuejs.org/v2/guide

前面都是一些很常规的语法和指令，因为之前用过Angular，这一部分还是有些相似，不同之处在于Vue取消了控制器(Controller)这个概念(就目前了解)。

例如v-bind是单向绑定，v-model是双向绑定之类的，都和Angualr异曲同工。

 

这里记录一些Vue的特色语法

• 可以绑定参数。例如将a标签的href属性与值url绑定：
  

  <a v-bind:href="url"></a>

• 修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指定应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

  <form v-on:submit.prevent="onSubmit"></form>

• Vue还贴心为常用指令v-bind和v-on提供了缩写

  <!-- 完整语法 -->
  <a v-bind:href="url"></a>
  <!-- 缩写 -->
  <a :href="url"></a>
  
  
  <!-- 完整语法 -->
  <a v-on:click="doSomething"></a>
  <!-- 缩写 -->
  <a @click="doSomething"></a>

   

• 计算属性

　　与直接定义data属性有所不同，计算属性是一个方法的返回值，方法中可以获取到data中的属性。

　　

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

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

结果：

Original message: "Hello"

Computed reversed message: "olleH"

需要注意的是，最好不要在计算属性的方法中对data中的属性进行修改。

 

计算属性和直接调用方法返回值的区别在于计算属性会产生缓存，而调用方法返回值每次都是重新计算。