Vue官網教程-實例

var vm = new Vue({
  // 選項
})

 

去看一下經常使用的選項對象

el，就是指定Vue實例去接管哪里的

 

 

 提供的元素就是一個占位符，這個位置會被Vue生成的DOM替換掉。

 

template

 

 

寫一個帶有模板template的vue實例

    <div id="app">
        
        <!-- #app原來的內容 -->
        <P>Hello</P>
        <span>1234</span>

    </div>


    <script>
        var vm = new Vue({
            el:'#app',
            template:'<div>Vue.js!</div>'
        })
    </script>

 

可以看到，連注釋都被替換掉了

 

數據與方法

也就是說data對象里面的所有屬性，都是響應式的，它改變了，頁面也會改變

 

// 我們的數據對象
var data = { a: 1 }

// 該對象被加入到一個 Vue 實例中
//這樣是復制了引用，指向的是同一個實例
var vm = new Vue({
  data: data
})

// 獲得這個實例上的屬性
// 返回源數據中對應的字段
//可以不是同vm.$data.a
vm.a == data.a // => true

// 設置屬性也會影響到原始數據
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
vm.a // => 3

 

上文說 向 vue實例響應式系統里面加入了data的所有屬性，所以這些屬性直接使用即可。

 

 

直接新增的屬性，不會更新

 

 

 

//created 鈎子可以用來在一個實例被創建之后執行代碼：
new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 實例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

 

這就解釋了，為什么vue都是使用function來聲明。注意哦！選項里面都不許用箭頭函數

 

 

 

初始化是beforeCreate

 

數據都注入好了之后是Created

 

 

 

1、如果沒有模板，就把el掛載的地方的原來的代碼作為模板去渲染，比如第一節的代碼里面沒有使用模板。而是直接調用了一下{{message}}而已

2、如果有模板。就用模板去替代它。

 

渲染之前是beforeMount 

渲染完成之后是Mounted

 

Mounted之后如果有數據的更新新，就會觸發

 

 

顯示調用destory（）就會觸發下面的