<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>几个注意点</title> <script type="text/javascript" src="../vue.js"></script> </head> <body> <div id="root"> <h1>{{msg}}</h1> <xin-school></xin-school> <simple></simple> <!-- <xin-school/> 脚手架环境下可用此格式--> </div> <script type="text/javascript"> Vue.config.productionTip = false // 组织开发环境提示 // 创建school组件 const school = Vue.extend({ name: 'myschool', template: ` <div> <h2>学校名称:{{ schoolName }}</h2> <h2>学校地址:{{ address }}</h2> </div> `, data() { return { schoolName: '修仙学院', address: '长白山' } } }) // 组件创建简写模式(常用方式,Vue通过组件绑定来识别下面代码未组件) const simple = { name: 'simple', template: ` <div> <h2>{{ msg }}</h2> </div>`, data() { return { msg: "简写格式代码" } } } // 创建Vue实例 // 组件命令规则 // school // School // my-school // MySchool (脚手架使用) const vm = new Vue({ el: '#root', data: { msg: '欢迎来到修仙世界!' }, components: { XinSchool: school, Simple: simple } }) </script> </body> </html>