前端学习笔记（4）-VUE组件化编程

1-4 Vue基础

5 Vue组件化编程

5.1 模块与组件、模块化与组件化

5.1.1. 模块
理解：向外提供特定功能的 js 程序，一般就是一个 js 文件
为什么：js 文件很多很复杂
作用：复用 js，简化 js 的编写，提高 js 运行效率
5.1.2. 组件
定义：用来实现局部功能的代码和资源的集合（html/css/js/image…）
为什么：一个界面的功能很复杂
作用：复用编码，简化项目编码，提高运行效率
5.1.3. 模块化
当应用中的 js 都以模块来编写的，那这个应用就是一个模块化的应用

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

5.2 非单文件组件

5.2.1 实现步骤：

1.创建组件

使用Vue.extend({配置对象})创建，其中配置对象和new Vue(options)时传入的那个options几乎一样，但也有点区别。
区别如下:

el不要写。最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。组件就是一块砖，哪里需要哪里搬
data必须写成函数。避免组件被复用时，数据存在引用关系。即如果data是一个配置对象，那么如果该组件被多个html引用，那么多个html的该组件的data是指向同一个对象的，则只要一个html改变data值，其他所有的html页面的该data值也改变，这样不好。
定义组件时，要把组件中html对应的内容写在template中。使用template配置组件结构。

 const school = Vue.extend({
      //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
      // 组件就是一块砖，哪里需要往哪搬！
      template: `
				<div class="demo">
					<h2>学校名称：{
   
   {schoolName}}</h2>
					<h2>学校地址：{
   
   {address}}</h2>	
				</div>
			`,
			// data不能用对象的形式，不然都引用到同一个对象，要写成函数形式
      data() {
        return {
          schoolName: "尚硅谷",
          address: "北京昌平",
        };
      },
    });

2.注册组件

注册局部组件

在vue实例中注册组件，靠new Vue的时候传入components选项

 //创建vm
    new Vue({
      el: "#root",
      data: {
        msg: "你好！",
      },
      //第二步：注册组件（局部注册）
      components: {
        school,
        student,
      },
    });

注册全局组件

局部注册是说，只有在vue实例中注册该组件，才能使用该组件，不注册就不能使用。
那如何不在vue实例中注册就可以使用组件呢?——全局注册
全局注册靠Vue.component('组件名',组件位置)

//   第二步，注册组件(全局注册)
      Vue.component("school", school);
      Vue.component("student", student);

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>基本使用</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h1>{
   
   {msg}}</h1>
      <hr />
      <!-- 第三步：编写组件标签 -->
      <school></school>
      <hr />
      <!-- 第三步：编写组件标签 -->
      <student></student>
    </div>
  </body>

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

    //第一步：创建school组件
    const school = Vue.extend({
      //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
      // 组件就是一块砖，哪里需要往哪搬！
      template: `
				<div class="demo">
					<h2>学校名称：{
   
   {schoolName}}</h2>
					<h2>学校地址：{
   
   {address}}</h2>	
				</div>
			`,
			// data不能用对象的形式，不然都引用到同一个对象，要写成函数形式
      data() {
        return {
          schoolName: "尚硅谷",
          address: "北京昌平",
        };
      },
    });

    //第一步：创建student组件
    const student = Vue.extend({
      template: `
				<div>
					<h2>学生姓名：{
   
   {studentName}}</h2>
					<h2>学生年龄：{
   
   {age}}</h2>
				</div>
			`,
      data() {
				// 调用了给你新对象
        return {
          studentName: "JZY",
          age: 20,
        };
      },
    });

    //创建vm
    new Vue({
      el: "#root",
      data: {
        msg: "你好！",
      },
      //第二步：注册组件（局部注册）
      components: {
        school,
        student,
      },
    });
  </script>
</html>

3 编写组件标签

      <!-- 第三步：编写组件标签 -->
      <school></school>

5.2.2 注意事项及总结

关于组件名：

一个单词组成：

第一种写法（首字母小写）：school
第二种写法（首字母大写）：School

多个单词组成：

第一种写法（kebab-case命名）：my-school
第二种写法（CamelCase命名）：MySchool （需要Vue脚手架支持）

注：

组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行
可以使用name配置项指定组件在开发者工具中呈现的名字
关于组件标签：

第一种写法：<school></school>
第二种写法：<school/>

注：不使用脚手架时，<school/>会导致后续组件不能渲染
一个简写方式：const school = Vue.extend(options)可简写为：const school = options
5.2.3 组件嵌套

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>基本使用</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <hr />
      <!-- 第三步：编写组件标签 -->

      <hr />
    </div>
  </body>

  <script type="text/javascript">
    Vue.config.productionTip = false;
    //第一步：创建student组件
    const student = Vue.extend({
      template: `
				<div>
					<h2>学生姓名：{
   
   {studentName}}</h2>
					<h2>学生年龄：{
   
   {age}}</h2>
				</div>
			`,
      data() {
        // 调用了给你新对象
        return {
          studentName: "JZY",
          age: 20,
        };
      },
    });
    //第一步：创建school组件
    const school = Vue.extend({
      //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
      // 组件就是一块砖，哪里需要往哪搬！
      template: `
				<div class="demo">
					<h2>学校名称：{
   
   {schoolName}}</h2>
					<h2>学校地址：{
   
   {address}}</h2>	
					<student></student>
				</div>
			`,
      // data不能用对象的形式，不然都引用到同一个对象，要写成函数形式
      data() {
        return {
          schoolName: "尚硅谷",
          address: "北京昌平",
        };
      },
      components: {
        student,
      },
    });
    //定义hello组件
    const hello = Vue.extend({
      template: `<h1>{
   
   {msg}}</h1>`,
      data() {
        return {
          msg: "欢迎学习Vue",
        };
      },
    });

		//定义app组件
		const app = Vue.extend({
			template:`
			<div>
				<hello></hello>
				<school></school>
			</div>`,
			components:{
				school,
				hello
			}
		})
    //创建vm
    new Vue({
			template:`<app></app>`,
      el: "#root",
      data: {
        msg: "你好！",
      },
      //第二步：注册组件（局部注册）
      components: {
				app,
      },
    });
  </script>
</html>

5.2.4. VueComponent
关于VueComponent：

组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)

特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！

关于this指向：

组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是VueComponent实例对象
new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是Vue实例对象
VueComponent的实例对象，简称vc（也可称之为：组件实例对象）

vm与vc关系

vm能通过_el决定为哪个容器服务

一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue 原型上的属性、方法

vue的原型上有很多方法和属性，如果没有黄色线，vue原型上的方法和属性只能vm用。

5.3 单文件组件

什么是单文件组件？

单文件组件就是一个文件扩展名为 .vue 的 single-file components (单文件组件)的文件。是Vue.js自定义的一种文件格式，一个.vue文件就是一个单独的组件，在文件内封装了组件相关的代码：html、css、js

并且还可以使用 webpack 或 Browserify 等构建工具。

单文件组件的好处

在 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。

这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。

单文件组件格式

temlate标签里面的内容，必须有一个根标签
写入的组件必须要暴露【不然等于没写】(es6模块化)
csss coped样式

作用：让样式局部生效【防止和其他组件样式冲突被覆盖】
写法：

<template>
<!--这里面写html-->
</template>

<script>
export default {
  name: "qq"
}
</script>

<style scoped>
/*这里面写css*/
</style>

组件使用

1.首先要在我们使用的地方去引入组件
2.引入后，配置一项components:{组件名,组件名}
3.配置后,直接当做标签中使用<组件名></组件名>

<template>
<div>
  <h1>我是App</h1>
  <School></School>
  <bus></bus>
  <jv-ming></jv-ming>
  
</div>
</template>

<script>
import School from "./components/School";
import Bus from "./components/Bus";
import JvMing from "./components/JvMing";
export default {
  components:{JvMing, Bus, School},
  data(){
    return{',
    }
    },
}
</script>