vue实例-vue官网学习笔记

1、构造器 ①每个vue.js应用都是通过构造函数Vue创建一个Vue的根实例启动的:

var vm=new Vue({
     //选项
});

②在实例化Vue时,需要传入一个选项对象,它可以包含数据、模板挂载元素、方法、生命周期钩子等选项。

③可以扩展Vue构造器,从而用预定义选项创建可复用的组件构造器。而且所有的Vue.js组件其实都是被扩展的Vue实例。

var myComponent=Vue.extend({
    //扩展选项
});
var myComponentInstance = new MyComponent();

2、属性和方法 ①每个 Vue 实例都会代理其 data对象里所有的属性:

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 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $,以便与代理的 data 属性区分

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` 改变后调用
});

3、实例生命周期 ①每个Vue实例在被创建之前都要经过一系列的初始化过程。例如,实例需要配置数据观测(data observer)、编译模板(complie template)、挂载实例到DOM(mounted)、然后在数据变化时更DOM(update)。在这个过程中,实例也会调用一些 生命周期钩子,这就给我们提供了执行自定义逻辑的机会。例如,created这个钩子在实例被创建之后被调用:

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

②也有一些其它的钩子,在实例生命周期的不同阶段调用,如mounted/updated/destroyed等

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏机器学习实践二三事

Shell && Vim快捷键

刚买到了自己一直想买的HHKB pro 2 type S,不得不说手感什么的确实没让我失望,重点是Ctrl的位置很适合类unix环境啊,不会快捷键都不好意思敲这...

21650
来自专栏Modeng的专栏

Vue2.5笔记:v-if 和 v-show指令

熟悉 Angular 的同学对指令肯定不会陌生,Vue中也借鉴了指令这一特性,在 Vue 中指令都是带有 v-的特殊属性,那么指令有什么作用呢?

10010
来自专栏卡少编程之旅

四个Vue的写法优化技巧

37960
来自专栏GreenLeaves

Vue.js系列之三模板语法

Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,...

254100
来自专栏mySoul

jQuery(一)

jquery为一种库,属于最基础的一个库,伴随着h5的到来,很多jquery的规则直接融入到了规则本身了,直接使用原生的js也能达到相同的目的。虽然如此,不过依...

29440
来自专栏我和未来有约会

(收藏)JS验证

1 /* 2 函数名:检验表单的函数 3 作者:xuwen 日期:2007-2-10 4 参数 _obj:验证的对象 ...

290100
来自专栏郭少华

(第二季)Vue2.0-全局API

全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,说的简单些就是,在构造器外部用Vue提供给我们的API...

12910
来自专栏JadePeng的技术博客

Angular快速学习笔记(3) -- 组件与模板

20630
来自专栏别先生

Javascript函数的简单学习

第九课 函数的定义与调用 1:函数的定义     语法格式     function 函数名(数据类型 参数1){//function是定义函数的关键字    ...

19880
来自专栏日常学python

python爬虫常用库之BeautifulSoup详解

这是日常学python的第16篇原创文章 经过了前面几篇文章的学习,估计你已经会爬不少中小型网站了。但是有人说,前面的正则很难唉,学不好。正则的确很难,有人说...

30470

扫码关注云+社区

领取腾讯云代金券