Vue.js学习

Posted 2021-05-01 Martix

1、创建一个Vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

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

一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。

2、数据与方法

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的。也就是说如果你添加一个新的属性，那么对新属性的改动将不会触发任何视图的更新。

这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。

<div id="app-8">

    <p>{{ foo }}</p>

    <button v-on:click="foo = 'baz'">Change it</button>

</div>

var obj = {

foo: 'bar'

};

Object.freeze(obj);

var app8 = new Vue({

el: '#app-8',

data: obj

});

除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。

3、实例生命周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

生命周期钩子的 this 上下文指向调用它的 Vue 实例。

var obj = {

foo: 'bar'

};

Object.freeze(obj);

var app8 = new Vue({

el: '#app-8',

data: obj,

created: function() {

console.log('foo is ' + this.foo);

}

});

4、生命周期图示