码迷,mamicode.com
首页 > Web开发 > 详细

Vue.js入门学习

时间:2018-10-29 18:29:48      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:last   运行   created   需要   区分   基于   bar   改变   函数   

一、创建一个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入门学习

标签:last   运行   created   需要   区分   基于   bar   改变   函数   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!