学习 Vue组件化编程这一篇就够了

发布时间：2023-08-13 19:00

目录：Java工程师的进阶之旅
vue2.0 核心
vue-cli

一、对组件的理解

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

1、模块

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

2、组件

理解：用来实现局部(特定)功能效果的代码集合(html/css/js/image……)
为什么使用：一个界面的功能很复杂
作用：复用编码, 简化项目编码, 提高运行效率

3、模块化

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

4、组件化

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

1.2、传统方式编写应用

依赖关系混乱，不好维护
代码复用率不高

$\"学习$

1.3、组件方式编写应用

实现应用中 局部功能代码 和资源的集合
$\"学习$
通常一个应用会以一棵嵌套的组件树的形式来组织：

例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。
$\"学习$

二、非单文件组件

2.1、简介

一个文件包含多个n个组件

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

2.2、基本使用

Vue中使用组件的三大步骤：

定义组件(创建组件)
注册组件
使用组件(写组件标签)

1、如何定义一个组件

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

el不要写：最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
data必须写成函数：避免组件被复用时，数据存在引用关系
使用template可以配置组件结构

2、如何注册组件？

局部注册：new Vue 的时候传入 components 选项
全局注册：Vue.component(\'组件名\',组件)

3、编写组件标签：

代码展示

<body>
	<div id=\"root1\">
		<hello>hello>
		<author>author>
	div>
	
	<hr>
	
	<div id=\"root2\">
		<hello>hello>
	div>
body>

<script src=\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\">script>

<script type=\"text/javascript\">
	Vue.config.productionTip = false
	//第一步：创建author组件
	const author = Vue.extend({
		template:`
			
				{{name}}
			
		`,
		data(){
			return {
				name:\'Laptoy\',
			}
		},
	})
	//第一步：创建hello组件
	const hello = Vue.extend({
		template:`
				
				Hello World
			
		`
	})
	
	//第二步：全局注册组件
	Vue.component(\'hello\',hello)
	
	new Vue({
		el:\'#root1\',
		//第二步：注册组件（局部注册）
		components:{
			author
		}
	})
	new Vue({
		el:\'#root2\',
	})
script>

$\"学习$
$\"学习$

2.3、注意点

1、关于组件名:

一个单词组成：
- 第一种写法(首字母小写)：school
- 第二种写法(首字母大写)：School
多个单词组成：
- 第一种写法(kebab-case命名)：my-school
- 第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
备注：
- 组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
- 可以使用 name 配置项指定组件在开发者工具中呈现的名字。

2、关于组件标签:

第一种写法：
第二种写法：
备注：不用使用脚手架时，会导致后续组件不能渲染。

3、一个简写方式：

const school = Vue.extend(options) 可简写为：const school = options

<body>
	<div id=\"root\">
		<hello>hello>
		<hello/>
	div>
body>

<script src=\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\">script>

<script type=\"text/javascript\">
	Vue.config.productionTip = false
	
	//定义组件
	const hello = Vue.extend({
		// 指定组件在开发者工具中呈现的名字
		name:\'Laptoy\',
		template:`Hello World`,
	})
	new Vue({
		el:\'#root\',
		components:{
			hello
		}
	})
script>

$\"在这里插入图片描述\"$

2.4、组件的嵌套

<body>
	
	<div id=\"root\">
		
	div>
body>

<script src=\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\">script>

<script type=\"text/javascript\">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
	//定义student组件
	const student = Vue.extend({
		template:`
			
				学生姓名:Laptoy
			
		`,
	})
	
	//定义school组件
	const school = Vue.extend({
		name:\'school\',
		template:`
			
				学校名称:CSDN
				
			
		`,
		//注册组件（局部）
		components:{
			student
		}
	})
	//定义hello组件
	const hello = Vue.extend({
		template:`Hello World`,
	})
	
	//定义app组件
	const app = Vue.extend({
		template:`
				
				
				
			
		`,
		components:{
			school,
			hello
		}
	})
	//创建vm
	new Vue({
		template:\'\',
		el:\'#root\',
		//注册组件（局部）
		components:{app}
	})
script>

$\"学习$
$\"学习$

三、VueComponent

1、介绍

组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
我们只需要写或，Vue解析时会帮我们创建组件的实例对象，即Vue帮我们执行的：new VueComponent(options)
特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！

2、关于this指向：

组件 配置中：data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象】（简称VC）
new Vue(options) 配置中：data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【Vue实例对象】（简称VM）

3、【Vue实例对象】管理一个或多个【VueComponent实例对象】
$\"学习$
4、VM与VC的区别

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

// 定义一个名为 button-counter 的新组件
Vue.component(\'button-counter\', {
  data: function () {
    return {
      count: 0
    }
  },
  template: \'\'
})

<div id=\"app\">
  <button-counter>button-counter>
div>

new Vue({ el: \'#app\' })

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

vc：data可以是kv形式，可以传递 el 绑定容器
vm：data必须是函数

总结：vc与vm几乎一致，但有部分不同（底层构造代码大部分都是复用的）

四、内置关系

function A(){
	this.x = 1
}
const a = new A()

console.log(A.prototype) // 显式原型属性
console.log(a.__proto__) // 隐式原型属性

console.log(A.prototype === a.__proto__) // true

A.prototype.y = 2 // 通过显式原型属性操作原型对象追加y属性

console.log(a) // 可以看到 a.__proto__ 中多了 y 属性

1、一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype

2、为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue 原型上的属性、方法
$\"学习$

五、单文件组件

实现效果

App.vue 管理 School.vue+Student.vue
main.js 引入 App.vue
index.html 作为容器给 main.js 挂载

在浏览器无法直接运行，这里只是为了分析脚手架结构

1、创建子组件 School.vue 和 Student.vue

School.vue

<template>
  <div class=\"demo\">
    <h2>学校名称：{{name}}h2>
    <h2>学校地址：{{address}}h2>
    <button @click=\"showName\">点我提示学校名button>
  div>
template>

<script>
// 导出
export default {
  // 开发者工具的名字
  name: \'School\',
  data() {
    return {
      name: \'xxx\',
      address: \'广州\'
    }
  },
  methods: {
    showName() {
      alert(this.name)
    }
  },
}
script>

<style>
.demo {
  background-color: orange;
}
style>

Student.vue

<template>
  <div>
    <h2>学生姓名：{{name}}h2>
    <h2>学生年龄：{{age}}h2>
  div>
template>

<script>
export default {
  name: \'Student\',
  data() {
    return {
      name: \'张三\',
      age: 18
    }
  }
}
script>

2、App.vue

<template>
  <div>
    <School>School>
    <Student>Student>
  div>
template>

<script>
//引入组件
import School from \'./School.vue\'
import Student from \'./Student.vue\'

export default {
  name: \'App\',
  components: {
    School,
    Student
  }
}
script>

3、main.js

import App from \'./App.vue\'

new Vue({
	el: \'#root\',
	// 为root容器渲染，这样能保证root容器为干净的div
	template: ``,
	components: { App },
})

4、index.html

DOCTYPE html>
<html>

<head>
	<meta charset=\"UTF-8\" />
	<title>练习一下单文件组件的语法title>
head>

<body>
	
	<div id=\"root\">
		
	div>
	
	<script type=\"text/javascript\" src=\"../js/vue.js\">script>

	<script type=\"text/javascript\" src=\"./main.js\">script>
body>

html>

学习 Vue组件化编程 这一篇就够了

目录