一、非单文件组件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>非单文件组件</title> 6 <script src="js/vue.js"></script> 7 </head> 8 <body> 9 <!-- 10 Vue中使用组件的三大步骤： 11 一、定义组件(创建组件) 12 二、注册组件 13 三、使用组件(写组件标签) 14 一、如何定义一个组件？ 15 使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别； 16 区别如下： 17 1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。 18 2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。 19 备注：使用template可以配置组件结构。 20 二、如何注册组件？ 21 1.局部注册：靠new Vue的时候传入components选项 22 2.全局注册：靠Vue.component('组件名',组件) 23 三、编写组件标签： 24 <school></school> 25 --> 26 <!-- 27 几个注意点： 28 1.关于组件名: 29 一个单词组成： 30 第一种写法(首字母小写)：school 31 第二种写法(首字母大写)：School 32 多个单词组成： 33 第一种写法(kebab-case命名)：my-school 34 第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持) 35 备注： 36 (1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。 37 (2).可以使用name配置项指定组件在开发者工具中呈现的名字。 38 2.关于组件标签: 39 第一种写法：<school></school> 40 第二种写法：<school/> 41 备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。 42 3.一个简写方式： 43 const school = Vue.extend(options) 可简写为：const school = options 44 --> 45 <div id="root"> 46 <hello></hello> 47 <hr> 48 <h1>{{msg}}</h1> 49 <!-- 第三步：编写组件标签 --> 50 <school></school> 51 <hr> 52 <!-- 第三步：编写组件标签 --> 53 <student></student> 54 </div> 55 </body> 56 <script type="text/javascript"> 57 58 // 第一步：创建school组件 59 const school = Vue.extend({ 60 template:` 61 <div> 62 <h2>学校名称：{{schoolName}}</h2> 63 <h2>学校地址：{{address}}</h2> 64 <button @click="showName">点我提示学校名</button> 65 </div> 66 `, 67 data(){ 68 return{ 69 schoolName:"京东", 70 address:"北京" 71 } 72 }, 73 methods:{ 74 showName(){ 75 alert(this.schoolName) 76 } 77 } 78 }) 79 // 第一步：创建student组件 80 const student = Vue.extend({ 81 template:` 82 <div> 83 <h2>学生姓名：{{studentName}}</h2> 84 <h2>学生年龄：{{age}}</h2> 85 </div> 86 `, 87 data(){ 88 return{ 89 studentName:"张三", 90 age:18 91 } 92 } 93 }) 94 95 //第一步：创建hello组件 96 const hello = Vue.extend({ 97 template:` 98 <div> 99 <h2>你好啊！{{name}}</h2> 100 </div> 101 `, 102 data(){ 103 return { 104 name:'Tom' 105 } 106 } 107 }) 108 109 Vue.component('hello',hello) 110 111 new Vue({ 112 el:'#root', 113 data: { 114 msg:'你好啊！' 115 }, 116 //第二步：注册组件（局部注册） 117 components:{ 118 school, 119 student 120 } 121 }) 122 </script> 123 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>非单文件组件2</title> 6 <script src="js/vue.js"></script> 7 </head> 8 <body> 9 <div id="root"> 10 <h1>{{msg}}</h1> 11 <app></app> 12 </div> 13 </body> 14 <script type="text/javascript"> 15 const student = Vue.extend({ 16 template:` 17 <div> 18 <h2>学生姓名：{{name}}</h2> 19 <h2>学生年龄：{{age}}</h2> 20 </div> 21 `, 22 data(){ 23 return{ 24 name:"张三", 25 age:18 26 } 27 } 28 }) 29 30 const school = Vue.extend({ 31 template: ` 32 <div> 33 <h2>学校名称：{{name}}</h2> 34 <h2>学校地址：{{address}}</h2> 35 <student></student> 36 </div> 37 `, 38 data(){ 39 return{ 40 name:"京东", 41 address:"北京" 42 } 43 }, 44 components:{ 45 student 46 } 47 }) 48 49 //定义hello组件 50 const hello = Vue.extend({ 51 template:`<h1>{{msg}}</h1>`, 52 data(){ 53 return { 54 msg:'欢迎来到京东学习！' 55 } 56 } 57 }) 58 59 //定义app组件 60 const app = Vue.extend({ 61 template:` 62 <div> 63 <hello></hello> 64 <school></school> 65 </div> 66 `, 67 components:{ 68 school, 69 hello 70 } 71 }) 72 73 new Vue({ 74 el:'#root', 75 data: { 76 msg:'你好啊！' 77 }, 78 components:{ 79 app 80 } 81 }) 82 </script> 83 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>非单文件组件3-VueComponent</title> 6 <script src="js/vue.js"></script> 7 </head> 8 <body> 9 <!-- 10 关于VueComponent： 11 1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。 12 2.我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象， 13 即Vue帮我们执行的：new VueComponent(options)。 14 3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！ 15 4.关于this指向： 16 (1).组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。 17 (2).new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。 18 5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。 19 Vue的实例对象，以后简称vm。 20 21 一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype !!!!!!!!! 22 为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。 23 --> 24 <div id="root"> 25 <h1>{{msg}}</h1> 26 <school></school> 27 <hello></hello> 28 </div> 29 </body> 30 <script type="text/javascript"> 31 32 const school = Vue.extend({ 33 name:"school", 34 template: ` 35 <div> 36 <h2>学校名称：{{name}}</h2> 37 <h2>学校地址：{{address}}</h2> 38 <button @click="showName">点我提示学校名</button> 39 </div> 40 `, 41 data(){ 42 return{ 43 name:"京东", 44 address:"北京" 45 } 46 }, 47 methods: { 48 showName(){ 49 console.log('showName',this) 50 } 51 }, 52 }) 53 54 const test = Vue.extend({ 55 template:`<span>jingdong</span>` 56 }) 57 58 //定义hello组件 59 const hello = Vue.extend({ 60 template:` 61 <div> 62 <h2>{{msg}}</h2> 63 <test></test> 64 </div> 65 `, 66 data(){ 67 return { 68 msg:'欢迎来到京东学习！' 69 } 70 }, 71 components:{test} 72 }) 73 74 // console.log('@',school) 75 // console.log('#',hello) 76 77 const vm = new Vue({ 78 el:'#root', 79 data: { 80 msg:'你好啊！' 81 }, 82 components:{ 83 school, 84 hello 85 } 86 }) 87 </script> 88 </html>
二、单文件组件
1、index.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 </head> 7 <body> 8 <div id="root"></div> 9 <script type="text/javascript" src="../js/vue.js"></script> 10 <script type="text/javascript" src="./main.js"></script> 11 </body> 12 </html>
2、main.js
1 import App from "./App"; 2 3 new Vue({ 4 el:'#root', 5 template: `<App></App>`, 6 component:{ 7 App 8 } 9 })
3、App.vue
1 <template> 2 <div> 3 <School></School> 4 <Student></Student> 5 </div> 6 </template> 7 8 <script> 9 import School from "./School"; 10 import Student from "./Student"; 11 12 export default { 13 name:'App', 14 components:{ 15 School, 16 Student 17 }, 18 data(){ 19 return { 20 21 } 22 } 23 } 24 </script>
4、School.vue
1 <template> 2 <div class="demo"> 3 <h2>学校名称：{{name}}</h2> 4 <h2>学校地址：{{address}}</h2> 5 <button @click="showName">点我提示学校名</button> 6 </div> 7 </template> 8 9 <script> 10 export default { 11 name:'School', 12 data(){ 13 return { 14 name:'京东', 15 address:'北京' 16 } 17 }, 18 methods: { 19 showName(){ 20 alert(this.name) 21 } 22 }, 23 } 24 </script> 25 26 <style> 27 .demo{ 28 background-color: orange; 29 } 30 </style>
5、Student.vue
1 <template> 2 <div> 3 <h2>学生姓名：{{name}}</h2> 4 <h2>学生年龄：{{age}}</h2> 5 </div> 6 </template> 7 8 <script> 9 export default { 10 name:'Student', 11 data(){ 12 return { 13 name:'张三', 14 age:18 15 } 16 } 17 } 18 </script>
