常用js框架之vue.js(深入一:Vue实例)

    xiaoxiao2023-03-24  4

    选一个框架深入最怕选错,然而犹豫更让人蛋疼,终于看到一篇文章决定让我深入vue.js的学习。http://blog.csdn.net/maray/article/details/50986200今年3月份写的,应该不至于太落伍,虽然我也不明白作者为什么说它是梦想中的框架,先学了再说 官网(2.0rc了):http://vuejs.org/guide/ 中文版(1.0):http://cn.vuejs.org/guide/

    一、Vue实例是个什么概念?如果你了解面向对象编程比如java,这个概念就很容易懂了,没有基础的童鞋得先了解下类和对象(实例),百度一下就行了。后面均用这种概念来描述。

    我们把vue当做一个基类,那么前面我们入门时用的案例new vue()就是创建了vue类的一个实例(对象)。当一个类的实例(对象)被新建,新建之后数据就开始被绑定,也就是m-v-vm的vm层会做数据绑定处理。 实例创建的方式有多种: 1.new vue() 2.var vm = new Vue({ // 选项 }) ps:这里创建实例后赋值给变量vm 3.var MyComponent = Vue.extend({ // 扩展选项 }) // 所有的 MyComponent 实例都将以预定义的扩展选项被创建 var myComponentInstance = new MyComponent() ps:extend字段在java里是很眼熟的,就是继承。同样的,不懂得去查。此时,MyComponent相当于vue的子类,其拥有了vue中的一切,同时他还可以自定义一些内容进行扩展。 同样的new MyComponent会创建这个类的实例(对象)。

    二、vue中的属性和方法 前面也用过

    var vm = new Vue({ el:'#app', data:{message:'我去!!'}, methods:{ reverseMessage:function(){ this.message = this.message.split("").reverse().join(""); } } })

    这个vm实例,el,data,methods都是他的属性。当然了还有一些来自基类vue的属性和方法,比如watch,on等。 每个 Vue 实例都会代理其 data 对象里所有的属性:所以vm可以访问message,vm.message。同样的可以vue基类的属性和方法,为了有所区分,使用vue的属性时得添加$ ,比如vm.$el vm.$on vm.$watch 所以我们前面猜测代码中的this指的是data可能不对,是vm实例会比较像,这样猜测会比较正常。

    三、vue的生命周期 说道生命周期,开发过移动app的肯定特别熟悉。生命周期在这里暂时这样描述,一个实例从创建到销毁,它会经历的所有方法。 vue基类中有许多方法,其中一些便是这种生命周期方法,比如创建的时候会触发create,销毁的时候会触发destroy。所以再去看看官网的流程图,可能就会明白它有哪些生命周期方法,上面出现的方法都是。 create: beforeCompile: compiled: ready: beforeDestroy: destoryed: 执行时机上面也有说明,后面会慢慢理解。

    转载请注明原文地址: https://ju.6miu.com/read-1201345.html
    最新回复(0)