脚本宝典收集整理的这篇文章主要介绍了

深入浅出vue1.0:Vue 实例

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

构造器

用vue必须先 通过构造函数Vue 创建一个 Vue 的根实例(喂!我要用vm啦!)

//vm是 MVVM 模式中所描述的 ViewModel 缩写
var vm = new Vue({
  // 选项(必选,可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。)
})

组件构造器(所有的 Vue.js 组件其实都是被扩展的 Vue 实例)

var MyComponent = Vue.extend({
  // 扩展选项
})
// 所有的 `MyComponent` 实例都将以预定义的扩展选项被创建
var myComponentInstance = new MyComponent()

属性与方法

每个 Vue 实例都会代理其 data 对象里所有的属性(意思是:data内的属性就是vm的属性)

var data = { a: 1 }
var vm = new Vue({
  data: data
})

vm.a === data.a // -> true

// 设置属性也会影响到原始数据
vm.a = 2
data.a // -> 2

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

注意!只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。

data没有,Vue 实例自有的实例属性与方法都有前缀 $,以便与代理的数据属性区分。

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true

// $watch 是一个实例方法
vm.$watch('a', function (newVal, oldVal) {
  // 这个回调将在 `vm.a`  改变后调用
})

实例生命周期

Vue 实例在创建后会自己执行一些程序(调用一些生命周期钩子
你可以在被这些钩子里 自定义逻辑
例如 created 钩子在实例创建后调用:

var vm = new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// -> "a is: 1"

还有一些其它的钩子,在实例生命周期的不同阶段调用,如 compiled、 ready 、destroyed。钩子的 this 指向调用它的 Vue 实例。
因为Vue.js没有“控制器”,所以 组件的自定义逻辑可以分割在这些钩子中。

生命周期图示

clipboard.png

吐槽

$属性用的少,data都是后台传来的,除特殊的需要前端处理下,剩下都是有啥用啥~
created钩子是用来运行,不用操作,页面刷新就会同步加载的逻辑。(如刷新页面,就会获取数据)

总结

以上是脚本宝典为你收集整理的

深入浅出vue1.0:Vue 实例

全部内容,希望文章能够帮你解决

深入浅出vue1.0:Vue 实例

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过