初識Vue

首先在html中導入Vue的js文件 可以下載vue.min.js或者使用cdn方法https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

第二步: Hello Vue

效果:

vue將dom與數據建立連接 並且是響應式的: 在控制檯輸入app.message = 'helloword'  Enter

還有另一種方法:

<meta charset=utf-8>
<script src="../js/vue.min.js"></script>
<div id="app" style="color: red;font-weight: bold">
    {{message}}
</div>
<div id="app-2">
    <span v-bind:title="message">
        鼠標懸停幾秒鐘查看此處動態綁定的提示信息！
    </span>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'hello Vue!'
        }
    })
    var app2 = new Vue({
        el: '#app-2',
        data: {
            message: '頁面加載於 ' + new Date().toLocaleString()
        }
    })
</script>

帶有"v-"前綴的爲Vue指令 

v-bind:該指令的意思是：“將這個元素節點的 title 特性和 Vue 實例的 message 屬性保持一致”

v-once: 該指令表示該元素下的數據只更新一次(初始化那次)

v-html: {{}}的變量會顯示爲文本 該指令的值會解析爲html

v-if: 判斷該元素是否顯示

控制檯輸入app3.seen = false Enter 元素消失 (此外，Vue 也提供一個強大的過渡效果系統，可以在 Vue 插入/更新/移除元素時自動應用過渡效果)

v-for: 該指令可以綁定數組的數據來渲染一個項目列表

在控制檯裏，輸入 app4.todos.push({ text: '新項目' })，你會發現列表最後添加了一個新項目。

v-on: 該指令添加一個事件監聽器，通過它調用在 Vue 實例中定義的方法

     我們只修改狀態  將狀態對應到Dom的操作由Vue完成

v-model: 它能輕鬆實現表單輸入和應用狀態之間的雙向綁定

將一個變量顯示在兩處 在input修改message,p標籤的文本也會修改

第三步: 組件化應用構建

理解: 基於已有的html標籤 封裝自己的標籤

<div id="app-7">
  <ol>
    <!--
      現在我們爲每個 todo-item 提供 todo 對象
      todo 對象是變量，即其內容可以是動態的。
      我們也需要爲每個組件提供一個“key”，稍後再
      作詳細解釋。
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item" //todo爲自定義prop
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>

Vue.component('todo-item', {
  props: ['todo'], //自定義屬性數組
  template: '<li>{{ todo.text }}</li>' //將todo屬性的值與dom元素的樣式相連,使todo有實際意義
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '隨便其它什麼人吃的東西' }
    ]
  }
})

     官方對組件化解釋: Vue 組件提供了純自定義元素所不具備的一些重要功能，最突出的是跨組件數據流、自定義事件通信以及構建工具集成。

vue實例的幾個知識點

一 實例初始化就存在的屬性對應值一旦改變Vue就會將其對應到Dom元素,初始化後加如的屬性沒有效果 還有:

<div id="app">
  <p>{{ foo }}</p>
  <!-- 這裏的 `foo` 不會更新！ -->
  <button v-on:click="foo = 'baz'">Change it</button>
</div>

<script>
    var obj = {
      foo: 'bar'
    }

    Object.freeze(obj)

    new Vue({
      el: '#app',
      data: obj
    })
</script>

二 Vue實例屬性與用戶自定義屬性用$區分

var data = { a: 1 }
    var vm = new Vue({
        el: '#example',
        data: data
    })
    console.log("vm.data: "+vm.data);
    console.log("vm.$data: "+vm.$data);
    console.log("vm.el: "+vm.el);
    console.log("vm.$el: "+vm.$el);

效果:

        

三 實例生命期鉤子

理解: 實例的幾種狀態切面

                       

   有 created,mounted,updated,destored (都是動詞的過去式) 官方提醒:不要將這些屬性的值與箭頭函數() =>綁定

第四步: 語法瞭解

 一 {{}}與指令的的值可以爲變量(如上:''message")與表達式(單目,雙目,三目連接的運算或message.split('').reverse().join('')) 

二 修飾符:例如 .prevent 修飾符告訴 v-on 指令對於觸發的事件調用event.preventDefault()(阻止元素該事件的默認行爲)

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

還有.stop停止冒泡 .self該事件不接受冒泡或捕獲的觸發 .Middle點擊鼠標中鍵才觸發 .once...等

三  縮寫 最常用的 "v-bind:" 可以縮寫爲":","v-on:"可以縮寫爲"@"(就這兩個)   

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

<a v-on:click="doSomething">...</a>
<a @click="doSomething">...</a>

第五步: 瞭解計算屬性與偵聽器   

一 基礎例子:

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 計算屬性的 getter (後面有設置setter方法)
    reversedMessage: function () {
      // `this` 指向 vm 實例
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

二 計算屬性(computed)與方法(methods)的比較   用方法實現上操作:

<p>Reversed message: "{{ reversedMessage() }}"</p>

// 在組件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

計算屬性是屬性對應的值會存入緩存,當響應式依賴的數據(message)發生改變時 值會自動改變 其他時候不用計算直接調用 和其他鍵值對一樣   方法擇每次取值都會調用一次     

三 計算屬性與偵聽屬性    

watch(偵屬性)實現:

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello',
    reversedMessage: ''
  },
  watch: {
    //鍵爲要偵聽的屬性,值爲回調函數或函數名
    message: function (val) {
      // `this` 指向 vm 實例
      this.reversedMessage = val.split('').reverse().join('')
    }
  }
})
</script>

對比: 當reversedMessage 由多個屬性(message1,message2..)動態決定時 watch的寫法就麻煩一些,當需要在數據變化時執行異步或開銷較大的操作時watch會好一點

四 setter方法

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  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]
        }
  }
}
})
</script>