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