vue的灵魂 ---组件化
Vue 都是由一个个组件搭建而成，组件分为全局组件、局部组件。
- 全局组件，什么时间都能调用
<div id="app"> //3、调用组件 <my-date></my-date> <my-date></my-date> <my-date></my-date> </div> <script src="vue.js"></script> <script type="text/javascript"> //1、创建组件模板 let template = Vue.extend({ template:` <div> <input type="date"/> <p>为了梦想<p> <div> ` });
//2、注册组件 Vue.component("my-date",template);
//区域绑定 new Vue({ el:"#app", data:{
} }) </script> |
- 局部组件：就是在绑定空间内注册。 组件模板可以和注册组件合并
<body> <div id="app"> <my-date></my-date> </div> <div id="app1"> <my-date></my-date> //访问不到 </div> <script src="vue.js"></script> <script type="text/javascript"> //1、创建组件模板 let template = Vue.extend({ template:` <div> <input type="date"/> <p>为了梦想<p> <div> ` });
//2、注册组件 new Vue({ el:"#app", components:{ //'my-date':template 效果一样 'my-date':{template:` <div> <input type="date"/> <p>为了梦想<p> <div> `} }, data:{
} });
new Vue({ el:'#app1', }) </script> </body> |
