创建非单文件组件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 创建非单文件组件 1.创建组件 const 变量名 = Vue.extend({里面写内容}) 注意:不能写箭头函数,data使用函数data() ,不能使用data: 2.注册组件(局部使用) component(组件) 第一个是 变量名,第二个值是 创建组件的变量名称 3.使用组件 template(写入html标签) 将注册组件的变量名写入html中 如:<school></school> 4.创建全局组件和创建局部组件操作一下,如下代码 5.注册全局组件 Vue.component('变量名',创建全局组件变量名) Vue.component('hello',assemblys) 注意事项: 1.组件名 一个单词组成: 第一种写法(首字母小写):school 第二种写法(首字母大写): School 多个单词组成: 第一种写法(kebab-case命名):my-school 第二种写法(CamelCase命名):MySchool()需要vue脚手架支持 备注: 1.组件名尽可能回避html中已有元素名称:如:h2 2.可以使用name配置项指定组件在开发者工具中呈现的名字 2.关于组件标签 第一种写法;<school></school> 第二种写法:<school/>备注:不用使用脚手架时,<school/>会导致后续组件不能渲染 3.简写方式 const school = Vue.extend(options) 可简写为:const school ={options} --> <script src="vue.js"></script> </head> <body> <div id="root"> <!-- 编辑组件标签 --> <school></school> <hr> <student></student> <hr> <hello></hello> </div> <script> Vue.config.productionTip=false //创建局部组件 const xuexiao = Vue.extend({ name:'wei', template: ` <div> <h3>学校名称:{{school.name}}</h3> <h3>学校地址:{{school.address}}</h3> </div> `, data(){ return { school:{ name:'轩染学校', address:'北京' } } } }) const student = Vue.extend({ template: ` <div> <h3>学生名称:{{name}}</h3> <h3>年龄:{{age}}</h3> </div> `, data(){ return{ name:'wei', age:19 } } }) //创建全局组件 const assemblys = Vue.extend({ template: ` <div> <h3>{{name}}</h3> </div> `, data(){ return{ name:'我是全局组件,可以用我' } } }) //注册全局组件 Vue.component('hello',assemblys) new Vue({ el:'#root', //注册组件(局部注册) //components 代表着引用那些组件 components:{ school:xuexiao, student }, // data:{ // school:{ // name:'轩染学校', // address:'北京' // }, // student:{ // name:'wei', // age:19 // } // } }) </script> </body> </html>