vue实现原理

1、建立一个vue类:

   其constructor(options)包含

         $el  ---获取根对象

        $option   ---获取传递过来的options参数

       $watchEvent  --设置一个对象 保存修改更新事件

        this.observe(); // 劫持事件(劫持属性-set(设置并触发watch的key更新事件) get(得值)   、   劫持方法)

         this.compile(this.$el);//把view的数据和事件进行绑定(通过nodeType判断元素类型,建立Watch的实例,使用               $watchEvent 保存实该例)

2、建立一个wach类

   其constructor(vm,key,node,attr,nType)包含        

               vm; --- vue 实例化对象 ,这里就是 app

                key; ---  key即绑定vm触发的属性

                node;  ---  绑定在某元素上的节点

               attr;  --- 某元素的节点上 绑定的属性名称--》如 v-html 绑定的h1对象的innerHtml

               nType=nType  --- 绑定的节点类型

         2 、update()更新节点属性

 

    

    

information about Open Web technologies including HTML, CSS, and APIs for both

Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">

    

    

    vue原理1

    

    

        v-model="msg">

        

{{msg}}

        v-html="msg">

        @click="changeEvent">修改msg

        @click="changeEvent2">修改msg2

    

    

     

你可能感兴趣的:(vue)