Vue 实例

创建 Vue 实例

开发一个 Vue 应用,首先要通过 new Vue 创建一个根 Vue 实例。通常这个实例要与 HTML 中的元素关联。

示例

<!DOCTYPE html>
<html>

<head>
    <title>My first Vue app</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        {{ message }}
    </div>

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

</html>

数据和方法

使用 new Vue() 创建 Vue 实例时,需要传入一个参数对象。

这个对象最主要的属性有三个:

通过 Vue 实例变量可以直接访问 data 对象和 methods 对象的属性。

示例

// 我们的数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})

// 获得这个实例上的 property
// 返回源数据中对应的字段
vm.a == data.a // => true

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

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

除了用户(开发人员)传入的 datamethods 对象,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 (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

生命周期

Vue 生命周期是指 Vue 实例从创建到销毁都要经历一系列的不同阶段,如下图所示:

在 Vue 实例的生命周期中,Vue 提供了一些钩子函数(如上图所示),通过这些钩子函数开发人员可以在不同的阶段添加自己的代码。

示例:利用 created 函数添加代码,让其在实例创建之后执行:

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

相关资料

Vue 实例

  • Vue.js

    Vue.js(读音 /vjuː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    231 引用 • 641 回帖 • 459 关注

广告 我要投放

回帖

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...