vue入門筆記體系（一）vue實例

vue實例

每一個 Vue 應用都是經過用 Vue 函數建立一個新的 Vue 實例開始的：

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

當建立一個 Vue 實例時，你能夠傳入一個選項對象。做爲參考，你也能夠在 api/#選項-數據 文檔 中瀏覽完整的選項列表。

const app = new Vue({
  el: '#root', // vue實例掛載的位置，若是不用el掛載，則也能夠用app.#mount('#root')
  template: '<div ref="div">{{text}} {{obj.a}}</div>', //模板選項
  data: { //實例數據選項
    text: 0
  }
})

vue實例屬性（經常使用）

除了數據屬性，Vue 實例還暴露了一些有用的實例屬性與方法。它們都有前綴 $，以便與用戶定義的屬性區分開來。

$data

app.$data //{text:1},就是vue實例中的data對象

$props

app.$props // 當前組件接收到的 props 對象。父組件向子組件傳遞的數據

$el

app.$el //vue掛載的dom節點

$options

// 須要在選項中包含自定義屬性時會有用處
app.$options //當前 Vue 實例的初始化選項，注意：直接修改app.$options.data.text = 1的值是沒有效果的

$parent

app.$parent //父實例，若是當前實例有的話。

$root

app.$root //當前組件數的根vue實例,若是當前實例沒有父實例，此實例將會是其本身

$children

// 當前實例的直接子組件。使用組件時使用，好比使用<item><div></div></item>組件時，裏面的<div</div>就是item的children
app.$children

$slots

app.$slots//做爲插槽的時候引用
app.$scopedSlots//

$refs

//模板的引用，快速定位到節點或組件，返回HTML對象或組件，例如<div ref="div"></div>
app.$refs

$isServer

app.$isServer//當前 Vue 實例是否運行於服務器。 應用於服務端渲染

實例方法

$watch( expOrFn, callback, [options] )

app.$watch //監聽數據變化時執行，與選項裏面的watch同樣

對比：

unWatch = this.$watch('text', (newText, oldText) => {
      console.log(`${newText} : ${oldText}`)
})
watch: {
    text(newText, oldText) {
      console.log(`${newText} : ${oldText}`);
    }
  },
//使用watch監聽時，組件銷燬時會自動銷燬，而$watch則不會，必須本身調用unWatch()進行銷燬

$on(event,callback) $emit( eventName, […args] ) $once( event, callback )

//監聽事件
app.$on('test', function (msg) {
  console.log(msg) //hi
})
//觸發事件
app.$emit('test', 'hi')
//監聽事件,只觸發一次
app.$once('test', function (msg) {
  console.log(msg) //hi
})

$forceUpdate()

//迫使 Vue 實例從新渲染。
app.$forceUpdate()
//當給初始化未設置的屬性時，就不會自動響應數據，這樣迫使從新渲染，能夠從新響應
//儘可能不要以這種方式來作，這樣性能開銷很大

$set( target, key, value ) $delete( target, key )

//設置某一個值
app.$set(this.obj,'a',i)
//刪除某一個值
app.$set(this.obj,'a)

$nextTick ( [callback] )

//$nextTick 是在下次 DOM 更新循環結束以後執行延遲迴調，在修改數據以後使用 $nextTick，則能夠在回調中獲取更新後的 DOM，Vue 實現響應式並非數據發生變化以後 DOM 當即變化，而是異步更新的
new Vue({
  // ...
  methods: {
    // ...
    example: function () {
      // 修改數據
      this.message = 'changed'
      // DOM 尚未更新
      this.$nextTick(function () {
        // DOM 如今更新了
        // `this` 綁定到當前實例
        this.doSomethingElse()
      })
    }
  }
})