Vue（二）组件化编程 | 前端 | 课程笔记

Vue知识点系列笔记：
Vue（一）基础 | 前端 | 课程笔记
Vuex（四） | 前端 | 课程笔记
Vue-router（五） | 前端 | 课程笔记
Vue2+Vue3课程视频链接

---

1 Vue组件化编程

1.1 模块与组件、模块化与组件化

1.1.1 模块

1. 理解：向外提供特定功能的js程序，一般就是一个js文件
2. 为什么：js文件很多很复杂
3. 作用：复用js，简化js的编写，提高js运行效率

1.1.2 组件

1. 理解：用来实现局部（特定）功能效果的代码集合
2. 为什么：一个界面的功能很复杂
3. 作用：复用编码，简化项目编码，提高运行效率

1.1.3 模块化

当应用中的js都以模块来编写的，那这个应用就是一个模块化的应用

1.1.4 组件化

当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用

1.2 非单文件组件

1.2.1 存在的问题

1. 模板编写没有提示
2. 没有构建过程，无法将ES6转换成ES5
3. 不支持组件的CSS
4. 真正开发中几乎不用

1.2.2 一个.vue文件的组成

1. 模板页面

<template>
页面模板
</template>

2. JS模板对象

<script>
export default{
   
  data(){
   
    return {
   }
    }
  methods:{
   },
  computed:{
   },
  components:{
   }
}
</script>

3. 样式

<style>
样式定义
</style>

1.2.3 基本使用

Vue中使用组件的三大步骤：
（1）定义组件(创建组件)
（2）注册组件
（3）使用组件(写组件标签)

1. 定义组件
   使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
   区别如下：

• el不要写 原因是：最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
• data必须写成函数 原因是：避免组件被复用时，数据存在引用关系。

<script type="text/javascript">
    Vue.config.productionTip = false

    //第一步：创建school组件
    const school = Vue.extend({
   
        template:`
				<div class="demo">
					<h2>学校名称：{
    {schoolName}}</h2>
					<h2>学校地址：{
    {address}}</h2>
					<button @click="showName">点我提示学校名</button>	
    </div>
			`,
        // el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
        data(){
   
            return {
   
                schoolName:'尚硅谷',
                address:'北京昌平'
            }
        },
        methods: {
   
            showName(){
   
                alert(this.schoolName)
            }
        },
    })

    //第一步：创建student组件
    const student = Vue.extend({
   
        template:`