首页 > 代码库 > vue2.0学习笔记之组件
vue2.0学习笔记之组件
【易错点】：
1. 组件内html代码片段超过一个标签时必须套一个根元素，即template模板子元素只能是一个。
2. 组件名称采用横杠间隔命名时，第一个字母大写会报错。
写法一：全局组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app">
<Demo></Demo> </div></body><script src="vue.js"></script><script> Vue.component("Demo",{ template:"<h3>全局组件</h3>" }) new Vue({ el:"#app" })</script></html>
写法二：全局组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app">
<my-temp></my-temp> </div> <template id="DemoTemp"> <h3>全局组件</h3> </template></body><script src="vue.js"></script><script> var Home = { template:"#DemoTemp" }; Vue.component("my-temp",Home) new Vue({ el:"#app" })</script></html>
写法三：局部组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <my-temp></my-temp></div><template id="DemoTemp"> <h3>局部组件</h3></template></body><script src="vue.js"></script><script> var Home = { template:"#DemoTemp" };// Vue.component("my-temp",Home) new Vue({ el:"#app", components:{ "my-temp":Home } })</script></html>
vue2.0学习笔记之组件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。