标签:数据 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)
标签:数据 box component new 关联 html 标题 继承 style
原文地址:http://www.cnblogs.com/qkabcd/p/7420275.html