组件:实现应用中--局部--功能--代码--和--资源--的集合(组件就是一块砖,哪里需要,哪里搬)
模块
- 理解:向外提供特定功能的js程序,一般就是一个js文件
- 为什么:js文件很多很复杂
- 作用:复用js,简化js的编写,提高js运行效率
组件
- 理解:用来实现局部特定功能效果的代码集合(html、css、js、image......)
- 为什么:一个界面的功能很复杂
- 作用:复用编码,简化项目编码,提高运行效率
模块化:当应用中的js都以模块化来编写的,那这个应用就是一个模块化的应用。
组件化:当应用中的功能都是多组件的方式来编写的,那么这个应用就是一个组件化的应用。
----------------------------------------------------组件----------------------------------------------------
非单文件组件:一个文件中包含N个组件。
单文件组件:一个文件中只包含 1 个组件。
组件使用步骤:定义组件==》注册组件==》组件应用
第一步:定义组件
//#region 创建组件 const school = Vue.extend({ template: '<div>' + ' <h3>学校名称:{{schoolName}}</h3>' + ' <h3> 学校地址:{{ schoolAddress }}</h3>' + ' <button @click="showInfo">点我提示学校信息</button>' + '</div>', data () { return { schoolName: '希望小学', schoolAddress: '西安/110号/希望小学', } }, methods: { showInfo () { alert(this.schoolName + '/' + this.schoolAddress) } } })
第二步:注册组件
局部注册
//#region root1 局部注册 new Vue({ el: '#root', data: { msg: '你好vue 组件|可复用', }, // ---------------注册组件|局部注册--------------- components: { // school: school, // student: student, // 上方代码等价于--可简写为如下代码 school, student, }, }) //#endregion
全局注册
//#region 全局注册组件,注意:注册全局组件代码书写位置,需放在 new Vue之前 Vue.component('temp', temp)
第三步:组件应用
略
示例一(vm):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>计算属性</title> <script type="text/javascript" src="../../Js/vue.js"></script> </head> <body> <div id="root"> <!-- <h3>学校名称:{{school.name}}</h3> <h3>学校地址:{{school.address}}</h3> <hr> <h3>学生姓名:{{student.name}}</h3> <h3>学生年龄:{{student.age}}</h3> --> <h3>学校名称:{{schoolName}}</h3> <h3>学校地址:{{schoolAddress}}</h3> <hr> <h3>学生姓名:{{studentName}}</h3> <h3>学生年龄:{{studentAge}}</h3> </div> </body> </html> <script type="text/javascript"> //console.log(vm) Vue.config.productionTip = false // ----------------------创建vm---------------------- const vm = new Vue({ el: '#root', data: { schoolName: '希望小学', schoolAddress: '西安/110号/希望小学', studentName: '心仪', studentAge: 6 /* school: { name: '希望小学', address: '西安/110号/希望小学', }, student: { name: '心仪', age: '6' } */ }, }) </script>
示例二(组件):局部注册
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>计算属性</title> <script type="text/javascript" src="../../Js/vue.js"></script> </head> <body> <div id="root"> {{msg}} <!-- 使用组件标签 --> <school></school> <school></school> <hr> <student></student> </div> </body> </html> <script type="text/javascript"> Vue.config.productionTip = false // ----------------------创建组件---------------------- const school = Vue.extend({ template: '<div>' + ' <h3>学校名称:{{schoolName}}</h3>' + ' <h3> 学校地址:{{ schoolAddress }}</h3>' + ' <button @click="showInfo">点我提示学校信息</button>' + '</div>', data () { return { schoolName: '希望小学', schoolAddress: '西安/110号/希望小学', } }, methods: { showInfo () { alert(this.schoolName + '/' + this.schoolAddress) } } }) const student = Vue.extend({ template: '<div><h3>学生姓名:{{studentName}}</h3> <h3> 学生年龄:{{ studentAge }}</h3></div>', data () { return { studentName: '心仪', studentAge: 6 } } }) new Vue({ el: '#root', data: { msg: '你好vue 组件|可复用', }, // 注册组件|局部注册 components: { // school: school, // student: student, // 上方代码等价于--可简写为如下代码 school, student, }, }) </script> <!-- <script type="text/javascript"> Vue.config.productionTip = false // ----------------------创建vm---------------------- const vm = new Vue({ el: '#root', data: { schoolName: '希望小学', schoolAddress: '西安/110号/希望小学', studentName: '心仪', studentAge: 6 /* school: { name: '希望小学', address: '西安/110号/希望小学', }, student: { name: '心仪', age: '6' } */ }, }) </script> -->
示例二(组件):全局注册
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>非单文件组件--全局注册</title> <script type="text/javascript" src="../../Js/vue.js"></script> </head> <body> <div id="root"> {{msg}} <!-- 使用组件标签 --> <school></school> <school></school> <hr> <student></student> <hr> <temp></temp> </div> <div id="root2"> {{msg}} <!-- 使用组件标签 --> <!-- <school></school> --> <temp></temp> </div> </body> </html> <script type="text/javascript"> Vue.config.productionTip = false //#region 创建组件 const school = Vue.extend({ template: '<div>' + ' <h3>学校名称:{{schoolName}}</h3>' + ' <h3> 学校地址:{{ schoolAddress }}</h3>' + ' <button @click="showInfo">点我提示学校信息</button>' + '</div>', data () { return { schoolName: '希望小学', schoolAddress: '西安/110号/希望小学', } }, methods: { showInfo () { alert(this.schoolName + '/' + this.schoolAddress) } } }) const student = Vue.extend({ template: '<div><h3>学生姓名:{{studentName}}</h3> <h3> 学生年龄:{{ studentAge }}</h3></div>', data () { return { studentName: '心仪', studentAge: 6 } } }) //#endregion //#region 创建组件 const temp = Vue.extend({ template: '<div>' + '<h2>你好 Vue {{name}}</h2>' + '</div>', data () { return { name: 'tom 全局组件示例' } } }) //#endregion //#region 全局注册组件,注意:注册全局组件代码书写位置,需放在 new Vue之前 Vue.component('temp', temp) //#endregion //#region root1 局部注册 new Vue({ el: '#root', data: { msg: '你好vue 组件|可复用', }, // ---------------注册组件|局部注册--------------- components: { // school: school, // student: student, // 上方代码等价于--可简写为如下代码 school, student, }, }) //#endregion new Vue({ el: '#root2', data: { msg: '你好vue roor2 组件|可复用', }, /* // ---------------注册组件|局部注册--------------- components: { // school: school, // student: student, // 上方代码等价于--可简写为如下代码 school, student, }, */ }) </script>
总结:
1.Vue中使用组件的步骤==》定义组件(也叫创建组件)==》注册组件==》使用组件(写组件标签)
2.如何定义一个组件==》
使用Vue.extend(options)创建,其中options和new Vue(options)几乎一样,但区别如下:
- el 不要写,因为最终所有的组件都要经过一个vm的管理。由vm中的el决定服务那个容器
- data必须写成函数,因为用于避免组件被复用时,数据存在引用关系
注:使用template可以配置组件结构。
3.如何注册组件
- 局部注册:使用 new Vue的时候传入 components选项
- 全局注册:使用Vue.component('组件名称',组件)
注意:
一:组件命名:
- 一个单词
- 第一种写法:首字母大写componets:{School:s}可大写,和Vue开发者工具进行呼应
- 第二种写法:首字母小写
- 多个单词
- 第一种写法:使用类似 'my-school' :s方式命名、
- 第二种写法:每个单词首字母大写(MySchool:s)——需要Vue脚手架支持
注:
- 组件名尽可能回避html中已有的元素名称
- 可以使用name配置项指定组件在开发者工具中呈现的名字
-
const student = ({ name: 'component-name', template: '<div><h3>学生姓名:{{studentName}}</h3> <h3> 学生年龄:{{ studentAge }}</h3></div>', data () { return { studentName: '心仪', studentAge: 6 } } }
-
二:关于组件标签
第一种写法:<test></test>
第二种写法:<test/>
注:不用使用脚手架时,<test/>会导致后续组件不能渲染。
三:简写方式
const school = Vue.extend(options) 可简写为 const school =options
// const student = Vue.extend({ // template: '<div><h3>学生姓名:{{studentName}}</h3> <h3> 学生年龄:{{ studentAge }}</h3></div>', // data () { // return { // studentName: '心仪', // studentAge: 6 // } // } // }) // -----------等价于----------- const student = ({ template: '<div><h3>学生姓名:{{studentName}}</h3> <h3> 学生年龄:{{ studentAge }}</h3></div>', data () { return { studentName: '心仪', studentAge: 6 } } })