码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-08-23 22:13:08      阅读:234      评论:0      收藏:0      [点我收藏+]

标签:数据   box   component   new   关联   html   标题   继承   style   

初学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)

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

标签:数据   box   component   new   关联   html   标题   继承   style   

原文地址:http://www.cnblogs.com/qkabcd/p/7420275.html

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