1.代码示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>基本使用</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h1>{{msg}}</h1> <hr> <!-- 第三步：编写组件标签 --> <school></school> <hr> <!-- 第三步：编写组件标签 --> <student></student> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //第一步：创建school组件 const school = Vue.extend({ //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。 template:` <div class="demo"> <h2>学校名称：{{schoolName}}</h2> <h2>学校地址：{{address}}</h2> </div> `, data(){ return { schoolName:'尚硅谷', address:'北京昌平' } } }) //第一步：创建student组件 const student = Vue.extend({ template:` <div> <h2>学生姓名：{{studentName}}</h2> <h2>学生年龄：{{age}}</h2> </div> `, data(){ return { studentName:'JOJO', age:20 } } }) //创建vm new Vue({ el:'#root', data:{ msg:'你好，JOJO！' }, //第二步：注册组件（局部注册） components:{ school, student } }) </script> </html>
效果：
2.关于组件名在命名时的注意点：
一个单词组成：
第一种写法（首字母小写）：school
第二种写法（首字母大写）：School
多个单词组成：
第一种写法（kebab-case命名）：my-school
第二种写法（CamelCase命名）：MySchool （需要Vue脚手架支持）
备注：
组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行
可以使用name配置项指定组件在开发者工具中呈现的名字
关于组件标签：
第一种写法：<school></school>
第二种写法：<school/>
备注：不使用脚手架时，<school/>会导致后续组件不能渲染
一个简写方式：const school = Vue.extend(options)可简写为：const school = options
3.组件的嵌套
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>组件的嵌套</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //定义student组件 const student = Vue.extend({ template:` <div> <h2>学生名称：{{name}}</h2> <h2>学生年龄：{{age}}</h2> </div> `, data(){ return { name:'JOJO', age:20 } } }) //定义school组件 const school = Vue.extend({ template:` <div> <h2>学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2> <student></student> </div> `, components:{ student }, data(){ return { name:'尚硅谷', address:'北京' } } }) //定义hello组件 const hello = Vue.extend({ template:` <h1>{{msg}}</h1> `, data(){ return { msg:"欢迎学习尚硅谷Vue教程！" } } }) //定义app组件 const app = Vue.extend({ template:` <div> <hello></hello> <school></school> </div> `, components:{ school, hello } }) //创建vm new Vue({ template:` <app></app> `, el:'#root', components:{ app } }) </script> </html>
