我所理解的Vue——学习心得体会1（Vue对象）

Posted 2020-10-04 qkabcd

初学Vue，总结如下：

1、首先要区分html的dom和js的dom

2、html的dom是View的范畴，js的dom是Model的范畴。

3、vue这库就是创建了伟大的new Vue()对象，把html的dom的范畴与js的dom范畴关联在一起，通过el这个属性，把js的dom与html的dom关联在一起了。

 

-----------------------------------

谈谈我对vuejs的组件的认识。

最开始的定义组件的方法，虽然有点复杂，但利于容易理解。请按照下面注解顺序阅读。

<div id="box">
                 <!-- 4、通过在html的dom标签，Vue对象渲染出js的dom内容-->
        <aaa></aaa>
    </div>

<script>
               //1、通过继承Vue生成js的dom模板对象
        var Aaa=Vue.extend({
            template:‘<h3>我是标题3</h3>‘
        });
        //2、通过Vue对象的组件方法把html的dom标签与js的dom模板对象关联一起
        Vue.component(‘aaa‘,Aaa);
            //3、通过Vue对象实例把html的dom与js的dom模型关联在一起
        new Vue({
            el:‘#box‘,
            
        });

    </script>

通过上面js定义dom->标签注册->html的绑定->Vue对象的渲染，就在html中产生了js的dom视图

上面代码可以简化为如下：直接在Vue.compoent方法里面定义js的dom描述

<div id="box">
    <aaa></aaa>
</div>
<script>
    Vue.compoent(‘aaa‘,{
     template:‘<h3>welcome to here</h3>‘
});
 new Vue({
 el:‘#box‘
});
</script>

 ---------------------------------------

**关于组件里面的数据必须是函数形式出现，且返回的数据必须是对象（即json）