跟着官档学 Vue.js (二) - Vue 实例

对于 实例 这个词,需要你对 Javascript 这门语言有一定理解啦,才能看懂。所以说,要学Vue.js,并不适合刚学web开发的小朋友。

但是简单地说,我喜欢把 比作 图纸,所以 实例 就是 图纸实际造出来的东西

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

官方的例子中说上面的 vm 变量就是一个 Vue 实例,在生成这个实例的时候,你可以往其中添加一些选项。例如第一节我们就经常看到类似于这样的代码:

<div id="app">
    {{ message }}
</div>
<script>
var app = new Vue({
   el: '#app',
   data: {
        message: 'Hello Vue!'
   }
})
</script>

上面的 app 就是一个 实例,而 el,data就是传入 Vue 这个构造器的选项。

选项有很多种,具体可以在 官档的API页面查看

一个页面也可以包含有很多个实例,但是越少越好啦~

由于我在这里是跳过了 组件 方面的内容,所以就不介绍组件的构造器。学习要一步一步来嘛。

属性和方法

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

官方的描述也容易懂:只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。

也就是说按照上面的代码片段,我再在控制台里输入

vm.b = 1;
data.b; // <- undefined

所以,如果有一个想要使用的响应的变量,或者说是数据,就必须在构造的时候初始化这个变量。(不知道说的对不对,我们要往下学才知道)

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

手贱尝试了一下

vm.el // <- undefined
vm.data // <- undefined

为什么呢?因为,构造这个实例的时候,每个 Vue 实例都会代理其 data 对象里所有的属性,也就是说,假设你的 data 里面有一个属性叫做 el 或者 data,当你想要获取实例的 el 的时候,如果是 vm.el,那不就很奇怪吗?获取到的究竟是什么?所以,Vue 特别聪明地,在这些实例的方法或者属性前面加上了一个美元符号 $

反过来,如果你在 data 中给一个属性的命名是以 $ 开头的,那这个数据你将永远获取不到。

上面的例子中有一个实例方法 vm.$watch ,它的作用是,监听某个变量,一旦发生了变化就执行函数。

需要注意的是,监听某个变量,传入的是变量名的字符串形式,正如上面的例子传入的是 'a' 而不是 a


这一节最重要的就是记住 实例 这个概念,还有记住它提供的方法和属性是以 $ 开头的。

实例的生命周期将放在下一篇里来说~因为独立出来以后要查才方便~

  vue.js