初学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)
时间: 2024-10-21 14:20:27