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

sevencui發表於2018-07-29
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()
      })
    }
  }
})

相關文章