-
Vue组件化编程（模块与组件、模块化与组件化，非单文件组件，单文件组件）
Vue组件化编程
1 什么是组件？2 组件化编程和传统的相比有什么优势？
传统方式编写应用
使用组件方式编写应用
组件的定义：
实现应用中局部功能代码和资源的集合
组件就是集合。代码就是css,html,js。资源指的是mp3,mp4,ttf,.zip
2.1 模块与组件、模块化与组件化
2.1.1. 模块
- 理解: 向外提供特定功能的 js 程序, 一般就是一个 js 文件
- 为什么: js 文件很多很复杂
- 作用: 复用 js, 简化 js 的编写, 提高 js 运行效率
2.1.2. 组件
- 理解: 用来实现局部(特定)功能效果的代码集合(html/css/js/image…)
- 为什么: 一个界面的功能很复杂
- 作用: 复用编码, 简化项目编码, 提高运行效率
组件就是一块砖，哪里需要哪里搬
2.1.3. 模块化
当应用中的 js 都以模块来编写的, 那这个应用就是一个模块化的应用。
2.1.4. 组件化
当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用。
组件有两种编写形式：非单文件组件，单文件组件
2.2. 非单文件组件
一个文件中包含有n个组件
非单文件组件几乎不用，都是用单文件组件，但是在这里可以学到很多写法，先忍忍
- 模板编写没有提示
- 没有构建过程, 无法将 ES6 转换成 ES5
- 不支持组件的 CSS
- 真正开发中几乎不用
2.2.1 非单文件组件基本使用
Vue中使用组件的三大步骤：
一、定义组件(创建组件)
二、注册组件
三、使用组件(写组件标签)一、如何定义一个组件？
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
区别如下：
1.el不要写，为什么？
——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
2.data必须写成函数，为什么？
——— 避免组件被复用时，数据存在引用关系。备注：使用template可以配置组件结构。
二、如何注册组件？
1.局部注册：靠new Vue的时候传入components选项
2.全局注册：靠Vue.component('组件名',组件)三、编写组件标签：
eg: 基本使用.html
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <script src="../代码/vue_basic/js/vue.js">script> head> <body> <div id="root"> <hello>hello> <hr> <h1>{{msg}}h1> <hr> <school>school> <hr> <student>student> div> <div id="root2"> <hello>hello> div> body> <script> Vue.config.productionTip = false // 第一步：创建school组件 // 只要在Vue创建组件都要用这个api : Vue.extend // 这是个函数调用，调用要传入配置对象 const school = Vue.extend({ template:``, // el:'#root', // 组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。 data(){ return { schoolName:'尚硅谷', address:'北京', } }, methods: { showName(){ alert(this.schoolName) } }, }) //第一步：创建student组件 const student = Vue.extend({ template:`学校名称：{{schoolName}}
学校地址：{{address}}
`, data(){ return { studentName:'张三', age:18, } } }) //第一步：创建hello组件 const hello = Vue.extend({ template:`学生姓名：{{studentName}}
学生年龄：{{age}}
`, data(){ return { name:'tom', } } }) // 第二步：注册组件（局部注册） Vue.component('hello',hello) // 创建vm new Vue({ el:'#root', data:{ msg:'你好啊', }, // 第二步：注册组件（局部注册） // components 组件 key(组件名) value(上面创建组件是命名的) components:{ school, student, } }) new Vue({ el:'#root2', }) script> html>你好啊！{{name}}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
几个注意点
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <script src="../代码/vue_basic/js/vue.js">script> head> <body> <div id="root"> <h1>{{msg}}h1> <school>school> div> body> <script> Vue.config.productionTip = false // 定义组件 const school = Vue.extend({ // 开发者工具 显示的是这个name name:'atguigu', template:``, data(){ return { name:'尚硅谷', address:'北京', } } }) // 简写 // 表面上是没有调用 Vue.extend,但是最终还是被调用了 可以去Vue源码里面看看 // const school = { // name:'atguigu', // template:` //学校名称：{{name}}
学校地址：{{address}}
//// `, // data(){ // return { // name:'尚硅谷', // address:'北京', // } // } // } new Vue({ el:'#root', data:{ msg:'欢迎学习Vue！' }, components:{ // school:school, // 同名直接简写 // 此处注册叫什么名字，标签就叫什么 school } }) script> html>学校名称：{{name}}
//学校地址：{{address}}
//- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
2.2.2 组件的嵌套
图中蓝色的在红色里面，这个就是嵌套。父子关系。
eg. 组件的嵌套.html
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <script src="../代码/vue_basic/js/vue.js">script> head> <body> <div id="root"> div> body> <script> Vue.config.productionTip = false // 定义student组件 const student = Vue.extend({ name:'student', template:``, data(){ return { name:'张三', age:18, } } }) // 定义school组件 const school = Vue.extend({ name:'school', template:`学生姓名：{{name}}
学生年龄：{{age}}
`, data(){ return { name:'尚硅谷', address:'北京', } }, components:{ student } }) // 定义hello组件 const hello = Vue.extend({ template:`学校名称：{{name}}
学校地址：{{address}}
{{msg}}
`, data(){ return { msg:'欢迎来到尚硅谷学习' } } }) // 定义app组件 // 用app管理所有的组件，app被vm管理 const app = Vue.extend({ template:``, components:{ school, hello, } }) // 创建vm new Vue({ template:``, el:'#root', // 注册组件（局部） components:{ app } }) script> html> - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
2.2.3 VueComponent函数
要想更加理解组件，需要了解VueComponent
关于VueComponent：
1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。2.我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，
即Vue帮我们执行的：new VueComponent(options)。3.特别注意：每次调用
Vue.extend，返回的都是一个全新的VueComponent！！！！4.关于this指向：
(1).组件配置中：
data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。(2).new Vue(options)配置中：
data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。
Vue的实例对象，以后简称vm。eg.VueComponent.html
DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>VueComponenttitle> <script type="text/javascript" src="../js/vue.js">script> head> <body> <div id="root"> <school>school> <hello>hello> div> body> <script type="text/javascript"> Vue.config.productionTip = false //定义school组件 const school = Vue.extend({ name:'school', template:``, data(){ return { name:'尚硅谷', address:'北京' } }, methods: { showName(){ // this是VueComponent实例对象 console.log('showName',this) } }, }) const test = Vue.extend({ template:`atguigu` }) //定义hello组件 const hello = Vue.extend({ template:`学校名称：{{name}}
学校地址：{{address}}
`, data(){ return { msg:'你好啊！' } }, components:{test} }) // console.log('@',school) // console.log('#',hello) //创建vm const vm = new Vue({ el:'#root', components:{school,hello} }) script> html>{{msg}}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
vc和vm能划等号吗？
一个重要的内置关系
1.一个重要的内置关系：
VueComponent.prototype.__proto__ === Vue.prototype
2.为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。此处vc只是我们自己的简便叫法，vm是程序员们官网都说的，而vc是我们自己起的名字，出去别人问，就说是组件实例对象，
组件实例对象怎么理解？ 就是一个小型的vm，跟vm比还差点事，他的data必须写成函数，不能写el配置项eg.一个重要的内置关系.html
DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>一个重要的内置关系title> <script type="text/javascript" src="../js/vue.js">script> head> <body> <div id="root"> <school>school> div> body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 Vue.prototype.x = 99 //定义school组件 const school = Vue.extend({ name:'school', template:``, data(){ return { name:'尚硅谷', address:'北京' } }, methods: { showX(){ console.log(this.x) } }, }) //创建一个vm const vm = new Vue({ el:'#root', data:{ msg:'你好' }, components:{school} }) //定义一个构造函数 /* function Demo(){ this.a = 1 this.b = 2 } //创建一个Demo的实例对象 const d = new Demo() console.log(Demo.prototype) //显示原型属性 console.log(d.__proto__) //隐式原型属性 console.log(Demo.prototype === d.__proto__) //程序员通过显示原型属性操作原型对象，追加一个x属性，值为99 Demo.prototype.x = 99 console.log('@',d) */ script> html>学校名称：{{name}}
学校地址：{{address}}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
部分代码分析：
Vue与VueComponent的关系
可以补一下原型链的知识
2.3. 单文件组件
一个文件中只包含有1个组件
既然要写单文件组件了，就要写xxxx.vue，单文件组件后缀都是vue结尾。.vue文件要经过加工处理编程.js浏览器才认识
处理加工：
1 webpack(自己搭建工作流，有点麻烦，而且效果可能不太好)
2 脚手架(借助Vue官方提供的,别惹女帮我们搭建好的webpack,我们直接用)2.3.1. 一个.vue 文件的组成(3个部分)
命名：
一般开发都是使用 School.vue 或者 MySchool.vue 这个能跟开发者工具里面呈现的能呼应上
回顾：
组件的定义：实现界面局部功能的代码和资源的集合 三个元素 html css js- 模板页面
<template> 页面模板 template>- 1
- 2
- 3
- JS 模块对象
<script> export default { data() {return {}}, methods: {}, computed: {}, components: {} } </script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 样式
- 1
- 2
- 3
踩一下非单文件组件：非单文件组件的样式不能跟着组件走
2.3.2. 基本使用
引入组件
别人在使用这个组件时，需要通过import去引入，我们组件里面就需要暴露他才能发现
模块化的引入不太熟悉，建议去看es6模块化内容
const school = Vue.extend({ data() { return { schoolName: "尚硅谷", address: "北京昌平", }; }, methods: { showName() { alert(this.schoolName); }, }, }); export default school- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
上面的写法可以简化
export default{ name:'school' data() { return { schoolName: "尚硅谷", address: "北京昌平", }; }, methods: { showName() { alert(this.schoolName); }, }, }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
2.3.3 单文件组件代码案例
main.js 管理 App.vue, App.vue 管理 Student.vue, School.vue
Student.vue, School.vue写每一个功能组件，App.vue是汇总的，main就是最大级别的，vm书写顺序：
Student.vue, School.vue —> App.vue —> main.js —> index.html
整理一下一整个流程代码逻辑：
我们打开index.html，准备好一个容器，然后，引入vue，再引入main.js，一切的开端来自main.js,我们把它叫做入口文件。然后就进入到了main.js，引入App.vue，然后来到App.vue，里面有template结构，又引入了Student.vue, School.vue，引入的时候就开始读取这个文件了，就绪之后，然后就注册，再把整个模板解析。这样就把main.js里面引入的App.vue执行完了，执行完之后就去new Vue(因为在引入mian.js之前就引入了vue.js所以main就可以直接new vue)
代码如下：
School.vue
学校名称：{{name}}
学校地址：{{address}}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
Student.vue
学生姓名：{{name}}
学生年龄：{{age}}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
App.vue
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
main.js
import App from './App.vue' new Vue({ el:'#root', template:``, components:{App}, }) - 1
- 2
- 3
- 4
- 5
- 6
- 7
index.html
DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>练习一下单文件组件的语法title> head> <body> <div id="root">div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
运行起来有报错
但是，一旦我们把这些代码放在了脚手架里面就运行起来了
再总结一下：
打开一个组件，template里面写结构，script里面写脚本，脚本里面包括给组件命名，配置数据，style里面配置样式，App.vue是汇总所有组件的，main.js创建vue实例，并且指明为哪个容器服务，页面在index.html。html里面引入的vue.js main,js意义不大，这个东西是不能运行的，只要放在脚手架里面就好了
-
相关阅读:
Hibernate 环境搭建
【Java语言IntelliJ IDEA 2021.1.3 x64安装包】IntelliJ IDEA软件到期解决办法以及json文件示例
Dubbo 03: 直连式 + 接口工程
Redis原理篇——五种基本数据类型
【Linux练习生】线程安全
Python机器学习算法入门教程（四）
Flutter高仿微信-第39篇-单聊-删除单条信息
IO应知应会
基于GFS进行威斯康星州乳腺癌（诊断）数据分析（Matlab代码实现）
MES选型注意事项
- 原文地址：https://blog.csdn.net/weixin_51249285/article/details/127729797
