• vue爬坑之路2----vue实例


    构造器

      每个vue.js应用都是通过构造函数Vue穿件一个Vue的根实例启动的:

      var vm = new Vue({

           //选项

    })

      在实例化Vue时,需要传入一个选项对象,他可以包含数据,模板,挂在元素,方法,生命周期钩子等选项。

      vue构造器是可扩展的,实际上,所有的vue.js组件其实都是被扩展的vue实例。

        var MyComponent = Vue.extend({

            //扩展选项

        })

        //所有的’MyComponent'实例都将以预定义的扩展选项被创建

        var myComponentInstance = new MyComponent();

    属性与方法

      每个Vue实例都会代理七data对象里所有的属性:

        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

      注意只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。

      除了data属性,Vue实例暴露了一些有用的实例属性。这些属性与方法都有前缀$,以便于与代理的data属性区分。例如:

      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.$watch('a',newVal => this.myMethond()))使用箭头函数。因为箭头函数绑定父上下文,所以this不会像预想的一样是Vue实例,而是this.myMethod未被定义。

    实例生命周期

      每个Vue实例在被创建之前都要经过一系列的初始化过程。例如,实例需要配置数据观测(data observer)、编译模板、挂在实例到DOM,然后在数据变化时更新DOM。在这个过程中,实例也会调用一些生命周期钩子,这就给我们提供了执行自定义逻辑的机会。例如,created这个钩子在实例被创建之后调用:

        var vn = new Vue({

      data:{

          a:1

      },

      created: function (){

        //this 指向 vm实例

      console.log('a is'+this.a)

      }

    })   //  ->'a is: 1'

        Vue.js是否有‘控制器’的概念?答案是:没有

         所谓“生命周期”,就是在类实例化的过程中,构造函数执行的不同阶段。
           “钩子”就是在某个阶段给你一个做某些处理的机会,当做回调函数就行。

  • 相关阅读:
    PC端圣诞树下载
    win7开机一直在正在启动windows界面怎么办?
    EFI、UEFI、MBR、GPT的区别
    进入BIOS中,设置U盘启动
    CSS3摆动动画效果
    比特币钱包搭建与使用
    自动校时工具
    windows7蓝屏0x000000c4
    如何使用webpack打包你的项目
    开源货币/比特币Multiminer、bitrade、bitcoinjs-lib、python-bitcoinrpc介绍
  • 原文地址:https://www.cnblogs.com/koutuzai/p/6666206.html
Copyright © 2020-2023  润新知