Vue.js入门学习

一、创建一个Vue实例

每个Vue应用都是使用Vue函数创建一个Vue实例。所有的Vue组件都是一个Vue实例，并且接受相同的选项对象（一些根实例特有的选项除外）。

数据和方法

当一个实例被创建后，它向Vue的响应式系统加入了其data对象中能找到的所有属性。当这些属性的值改变的时候，视图也会跟着响应。

注意：

1.值得注意的是，只有当Vue实例被创建的时候的data对象中的存在的属性才是响应式的。
2.如果你知道你会在晚些时候需要一个属性，但是一开始它为空或者不存在，那么你仅需要设置一些初始值。
3.这里唯一的例外是使用object.freeze()，这会阻止修改现有的属性。
4.当然除了数据属性，Vue实例还暴露出了一些实例属性和方法，它们都有前缀$,这样便于和用户自定义的属性区分开来。

二、实例生命周期钩子

每个Vue实例在被创建时都要经过一系列的初始化过程，例如，需要设置数据监听，编译模板，将实例挂载到DOM并且在数据变化时更新DOM。同时在这个
过程中会运行一些叫生命周期钩子的函数。生命周期钩子的this上下文指向调用它的实例

• created：用于在一个实例被创建之后执行的代码
• mounted:
• updated:
• destroyed:

三、计算属性和侦听器

1.计算属性

var vm = new Vue({ ???el: ‘#example‘, ???data:{ ???????message: ‘hello‘ ???}, ???computed:{ ???????????????//reverseMessage是计算属性，因为其依赖了message数据属性，当message变化的时候，reverseMessage也跟着改变 ???????reverseMessage: function(){ ???????????return this.message.split("").reverse().join(""); ???????}, ??????????????????//now也是计算属性，但是它并不是响应式依赖，计算属性是基于它们的依赖来缓存 ???????now: function(){ ???????????return Date.now(); ???????} ???} ???methods:{ ???????reverseMessage:function(){ ???????????return this.message.split("").reverse().join(""); ???????} ???}})

2.侦听属性

var vm = new Vue({ ?el: ‘#demo‘, ?data: { ???firstName: ‘Foo‘, ???lastName: ‘Bar‘, ???fullName: ‘Foo Bar‘ ?}, ?watch: { ???firstName: function (val) { ?????this.fullName = val + ‘ ‘ + this.lastName ???}, ???lastName: function (val) { ?????this.fullName = this.firstName + ‘ ‘ + val ???} ?}})

看起来计算属性要比侦听属性好用得多，侦听属性看起来滥用watch。

3.计算属性的setter
计算属性默认只有getter，不过在需要的时候，也提供一个setter。

computed:{ ???????reverseMessage: function(){ ???????????return this.message.split("").reverse().join(""); ???????}, ???????now: function(){ ???????????return Date.now(); ???????}, ???????fullName:{ ???????????get: function(){ ???????????????return this.firstName + this.lastName; ???????????}, ???????????set:function(newValue){ ???????????????var names = newValue.split(" "); ???????????????this.firstName = names[0]; ???????????????this.lastName = names[names.length - 1] ????????????} ???????} ???}

4.侦听器
虽然计算属性在大多数情况下合适，但也需要一个自定义的侦听器。Vue通过watch选项，提供一个更通用的方法，来响应数据的变化。
当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

Vue.js入门学习

原文地址：https://www.cnblogs.com/sminocence/p/9872138.html