首页 > 其他分享 >动力节点老杜Vue框架教程【三】Vue组件化

动力节点老杜Vue框架教程【三】Vue组件化

时间：2023-04-26 10:32:15浏览次数：48  
标签：教程 vue vm js Vue 组件 脚手架 老杜

Vue.js是一个渐进式 MVVM 框架，目前被广泛使用，也成为前端中最火爆的框架

Vue可以按照实际需要逐步进阶使用更多特性，也是前端的必备技能

动力节点老杜的Vue2+3全家桶教程已经上线咯！

学习地址：https://www.bilibili.com/video/BV17h41137i4/

视频将从Vue2开始讲解，一步一个案例，知识点由浅入深，然后很自然的过度到Vue3版本。

每一个Vue的知识点讲解的非常通透，不但举例告诉你怎么用，还会告诉你底层实现原理。

3 Vue组件化

3.1 什么是组件

  1. 传统方式开发的应用

一个网页通常包括三部分：结构（HTML）、样式（CSS）、交互（JavaScript）

动力节点老杜Vue框架教程【三】Vue组件化_前端

传统应用存在的问题：

  1. 关系纵横交织，复杂，牵一发动全身，不利于维护。
  2. 代码虽然复用，但复用率不高。
  3. 组件化方式开发的应用

动力节点老杜Vue框架教程【三】Vue组件化_vue3_02

使用组件化方式开发解决了以上的两个问题：

  1. 每一个组件都有独立的js，独立的css，这些独立的js和css只供当前组件使用，不存在纵横交错。更加便于维护。
  2. 代码复用性增强。组件不仅让js css复用了，HTML代码片段也复用了（因为要使用组件直接引入组件即可）。
  3. 什么是组件？
  1. 组件：实现应用中局部功能的代码和资源的集合。凡是采用组件方式开发的应用都可以称为组件化应用。
  2. 模块：一个大的js文件按照模块化拆分规则进行拆分，生成多个js文件，每一个js文件叫做模块。凡是采用模块方式开发的应用都可以称为模块化应用。
  3. 任何一个组件中都可以包含这些资源：HTML CSS JS 图片 声音 视频等。从这个角度也可以说明组件是可以包括模块的。
  1. 组件的划分粒度很重要，粒度太粗会影响复用性。为了让复用性更强，Vue的组件也支持父子组件嵌套使用。

动力节点老杜Vue框架教程【三】Vue组件化_vue教程_03

子组件由父组件来管理，父组件由父组件的父组件管理。在Vue中根组件就是vm。因此每一个组件也是一个Vue实例。

3.2 组件的创建、注册和使用

  1. **
  2. <html lang="en">

**<meta** charset="UTF-8"**>**
**<title>**组件的创建注册和使用**</title>**
**<script** src="../js/vue.js"**></script>**


**<div** id="app"**>**
**<h1>**{{msg}}**</h1>**
<!-- 3.使用组件 -->
**<userlist></userlist>**
**<userlist></userlist>**
**<userlogin></userlogin>**
**<userlogin></userlogin>**
**</div>**
**<script>**
// 1.创建组件
const userListComponent = Vue.extend({
template : `
**<ul>**
**<li** v-for="(user,index) of users" :key="user.id"**>**
{{index}},{{user.name}}
**</li>**
**</ul>**
`,
data(){
return {
users : [
{id:'001', name:'jack'},
{id:'002', name:'lucy'},
{id:'003', name:'james'}
]
}
}
})

// 1.创建组件
const userLoginComponent = Vue.extend({
template : `
**<div>**
**<h3>**用户登录**</h3>**
**<form** @submit.prevent="login"**>**
账号：**<input** type="text" v-model="username"**><br><br>**
密码：**<input** type="password" v-model="password"**><br><br>**
**<button>**登录**</button>**
**</form>**
**</div>**
`,
data(){
return {
username : 'admin',
password : '123'
}
},
methods : {
login(){
alert(this.username + "," + this.password)
}
}
})

const vm = new Vue({
el : '#app',
data : {
msg : '组件的创建注册和使用'
},
// 2.注册组件（局部注册）
components : {
// userlist 就是组件的名字
userlist : userListComponent,
userlogin : userLoginComponent
}
})
**</script>**


  3. 创建组件
  1. const userComponent = Vue.extend({这个配置项和创建Vue实例的配置项几乎是一样的，只是略有差异})
  2. 需要注意的是：
  1. el不能用。组件具有通用性，不特定为某个容器服务，它为所有容器服务。
  2. data必须使用函数形式：return {}
  3. 使用template配置项配置页面结构：HTML。
  1. 注册组件
  1. 局部注册
  1. 使用components配置项：components : {user : userComponent}，user就是组件名。
  1. 全局注册
  1. Vue.component(‘user’, userComponent)
  1. 使用组件
  1. 直接在页面需要使用组件的位置：
  2. 也可以这样使用： （不在脚手架环境中使用这种方式会出现后续元素不渲染的问题。）
  1. 创建组件对象也有简写形式：Vue.extend() 可以省略。直接写：{}
  2. 组件的命名细节：
  1. 全部小写
  2. 首字母大写，后面全部小写
  3. kebab-case串式命名法
  4. CamelCase驼峰式命名法（这种方式需要在脚手架环境中使用）
  5. 不要使用HTML内置的标签作为组件名称。
  6. 可以使用name配置项来指定Vue开发者工具中显示的组件名。

3.3 组件嵌套

  1. **
  2. <html lang="en">

**<meta** charset="UTF-8"**>**
**<title>**组件嵌套**</title>**
**<script** src="../js/vue.js"**></script>**


**<div** id="root"**></div>**
**<script>**
// 创建Y1组件
const y1 = {
template : `
**<div>**
**<h3>**Y1组件**</h3>**
**</div>**
`
}
// 创建X1组件
const x1 = {
template : `
**<div>**
**<h3>**X1组件**</h3>**
**</div>**
`
}
// 创建Y组件
const y = {
template : `
**<div>**
**<h2>**Y组件**</h2>**
**<y1></y1>**
**</div>**
`,
components : {y1}
}
// 创建X组件
const x = {
template : `
**<div>**
**<h2>**X组件**</h2>**
**<x1></x1>**
**</div>**
`,
components : {x1}
}
// 创建app组件
const app = {
template : `
**<div>**
**<h1>**App组件**</h1>**
**<x></x>**
**<y></y>**
**</div>**
`,
// 注册X组件
components : {x,y}
}
// vm
const vm = new Vue({
el : '#root',
template : `
**<app></app>**
`,
// 注册app组件
components : {app}
})
**</script>**


嵌套结构：这种结构更加贴切实际项目的开发

动力节点老杜Vue框架教程【三】Vue组件化_vue3_04

3.4 VueComponent & Vue

3.4.1 this

new Vue({})配置项中的this和Vue.extend({})配置项中的this他们分别是谁？

  1. **
  2. <html lang="en">

**<meta** charset="UTF-8"**>**
**<title>**vm与vc**</title>**
**<script** src="../js/vue.js"**></script>**


**<div** id="app"**>**
**<mc></mc>**
**</div>**
**<script>**
const myComponent = Vue.extend({
template : `**<h1></h1>**`,
mounted(){
console.log('vc', this)
}
})

const vm = new Vue({
el : '#app',
components : {
mc : myComponent
},
mounted() {
console.log('vm', this)
},
})
**</script>**


测试结果：

动力节点老杜Vue框架教程【三】Vue组件化_前端_05

new Vue({})配置项中的this就是：Vue实例（vm）。Vue.extend({})配置项中的this就是：VueComponent实例（vc）。打开vm和vc你会发现，它们拥有大量相同的属性。例如：生命周期钩子、methods、watch等。

3.4.2 vm === vc ???

只能说差不多一样，不是完全相等。例如：vm上有el，vc上没有。另外data也是不一样的。vc的data必须是一个函数。只能这么说：vm上有的vc上不一定有，vc上有的vm上一定有。

3.4.3 Vue.extend()方法做了什么？

每一次的extend调用返回的都是一个全新的VueComponent函数。以下是Vue.extend()的源码：

动力节点老杜Vue框架教程【三】Vue组件化_vue3_06

动力节点老杜Vue框架教程【三】Vue组件化_Vue_07

注意：是每一次都会返回一个全新的VueComponent构造函数。是全新的！！！

构造函数有了，什么时候会调用构造函数来实例化VueComponent对象呢？

动力节点老杜Vue框架教程【三】Vue组件化_Vue_08

Vue在解析****时会创建一个VueComponent实例，也就是：new VueComponent()

3.4.4 通过vc可以访问Vue原型对象上的属性

通过vc可以访问Vue原型对象上的属性：

  1. Vue.prototype.counter = 100
  2. console.log(vc.counter) // 100

为什么要这么设计？代码复用。Vue原型对象上有很多方法，例如：动力节点老杜Vue框架教程【三】Vue组件化_vue教程_09mount()，代码得到了复用。Vue框架是如何实现以上机制的呢？

  1. VueComponent.prototype.proto = Vue.prototype

测试：

  1. **
  2. <html lang="en">

**<meta** charset="UTF-8"**>**
**<title>**测试**</title>**
**<script** src="../js/vue.js"**></script>**


**<div** id="app"**></div>**
**<script>**
const userlist = Vue.extend({
template : `**<div><h1>**用户列表**</h1></div>**`,
})
const vm = new Vue({
el : '#app',
template : `**<userlist></userlist>**`,
components : {userlist}
})
console.log(userlist.prototype.__proto__ === Vue.prototype) // true
**</script>**


3.4.4.1 回顾原型对象

prototype称为：显示的原型属性，用法：函数.prototype，例如：Vue.prototype

proto__称为：隐式的原型属性，用户：实例.proto，例如：vm.proto 无论是通过prototype还是__proto，获取的对象都是同一个，它是一个共享的对象，称为：XX的原型对象。如果通过Vue.prototype获取的对象就叫做：Vue的原型对象。如果通过User.prototype获取的对象就叫做：User的原型对象。请看下图：

动力节点老杜Vue框架教程【三】Vue组件化_vue3_10

3.4.4.2 原理剖析

VueComponent.prototype.proto = Vue.prototype

动力节点老杜Vue框架教程【三】Vue组件化_前端_11

这样做的话，最终的结果就是：Vue、vm、VueComponent、vc都共享了Vue的原型对象（并且这个Vue的原型对象只有一个）。

3.5 单文件组件

  1. 什么是单文件组件？
  1. 一个文件对应一个组件（之前我们所学的是非单文件组件，一个html文件中定义了多个组件）
  2. 单文件组件的名字通常是：x.vue，这是Vue框架规定的，只有Vue框架能够认识，浏览器无法直接打开运行。需要Vue框架进行编译，将x.vue最终编译为浏览器能识别的html js css。
  3. 单文件组件的文件名命名规范和组件名的命名规范相同：
  1. 全部小写：userlist
  2. 首字母大写，后面全部小写：Userlist
  3. kebab-case命名法：user-list
  4. CamelCase命名法：UserList（我们使用这种方式，和Vue开发者工具呼应。）
  1. x.vue文件的内容包括三块：
  1. 结构：
  2. 交互：
  3. 样式：
  1. export和import，ES6的模块化语法。
  1. 使用export导出（暴露）组件，在需要使用组件的x.vue文件中使用import导入组件
  1. 默认导入和导出
  1. export default {}
  2. import 任意名称 from ‘模块标识符’
  1. 按需导入和导出
  1. export {a, b}
  2. import {a, b} from ‘模块标识符’
  1. 分别导出

export var name = ‘zhangsan’export function sayHi(){}

  1. VSCode工具可以安装一些插件，这样在编写x.vue的时候有提示。例如：vetur插件。
  1. 使用该插件之后，有高亮显示，并且也可以通过输入 <v 生成代码。
  1. 把之前“组件嵌套”的例子修改为单文件组件

动力节点老杜Vue框架教程【三】Vue组件化_Vue_12

动力节点老杜Vue框架教程【三】Vue组件化_Vue_13

auto rename tag插件

动力节点老杜Vue框架教程【三】Vue组件化_vue3_14

动力节点老杜Vue框架教程【三】Vue组件化_前端_15

动力节点老杜Vue框架教程【三】Vue组件化_vue3_16

记住一个要领：不管是单文件组件还是非单文件组件，永远都包括三步：创建组件、注册组件、使用组件。 创建vm的代码就不是一个组件了，这个js代码写到一个js文件中即可，一般这个起名：main.js。寓意：入口

动力节点老杜Vue框架教程【三】Vue组件化_前端_17

还剩最后的一点HTML代码，一般这个文件叫做index.html，代码如下：

动力节点老杜Vue框架教程【三】Vue组件化_Vue_18

如上图，注意引入顺序。 代码执行原理：

  1. 第一步：浏览器打开index.html页面，加载容器
  2. 第二步：加载vue.js文件，有了Vue
  3. 第三步：加载main.js
  1. import App from ‘./App.vue’
  2. import X from './X.vue'
  3. import X1 from './X1.vue'
  4. import Y from './Y.vue'
  5. import Y1 from './Y1.vue'

这样就完成了所有组件以及子组件的创建和注册。

  1. 第四步：创建Vue实例vm，编译模板语句，渲染。

写完之后不能直接运行，浏览器不认识.vue文件，不认识ES6的模块化语法。需要安装Vue脚手架。

3.6 Vue脚手架

3.6.1 确保npm能用（安装Node.js）

Node.js的下载地址:https://nodejs.org/zh-cn/download/

动力节点老杜Vue框架教程【三】Vue组件化_vue教程_19

动力节点老杜Vue框架教程【三】Vue组件化_前端_20

安装步骤如下：

动力节点老杜Vue框架教程【三】Vue组件化_vue3_21

动力节点老杜Vue框架教程【三】Vue组件化_vue3_22

动力节点老杜Vue框架教程【三】Vue组件化_前端_23

动力节点老杜Vue框架教程【三】Vue组件化_vue教程_24

动力节点老杜Vue框架教程【三】Vue组件化_vue教程_25

动力节点老杜Vue框架教程【三】Vue组件化_Vue_26

动力节点老杜Vue框架教程【三】Vue组件化_vue3_27

动力节点老杜Vue框架教程【三】Vue组件化_vue3_28

动力节点老杜Vue框架教程【三】Vue组件化_前端_29

打开dos命令窗口，输入npm命令。

动力节点老杜Vue框架教程【三】Vue组件化_前端_30

3.6.2 Vue CLI（脚手架安装）

  1. Vue的脚手架（Vue CLI: Command Line Interface）是Vue官方提供的标准化开发平台。它可以将我们.vue的代码进行编译生成html css js代码，并且可以将这些代码自动发布到它自带的服务器上，为我们Vue的开发提供了一条龙服务。脚手架官网地址：https://cli.vuejs.org/zh

注意：Vue CLI 4.x需要Node.js v8.9及以上版本，推荐v10以上。

  1. 脚手架安装步骤：
  2. 建议先配置一下npm镜像：
  1. npm config set registry https://registry.npm.taobao.org
  2. npm config get registry 返回成功，表示设置成功
  1. 第一步：安装脚手架（全局方式：表示只需要做一次即可）
  1. npm install -g @vue/cli
  2. 安装完成后，重新打开DOS命令窗口，输入vue命令可用表示成功了
  1. 第二步：创建项目（项目中自带脚手架环境，自带一个HelloWorld案例）
  1. 切换到要创建项目的目录，然后使用 vue create vue_pro

动力节点老杜Vue框架教程【三】Vue组件化_vue教程_31

这里选择Vue2， babel：负责ES6语法转换成ES5。 eslint：负责语法检查的。 回车之后，就开始创建项目，创建脚手架环境（内置了webpack loader），自动生成HelloWorld案例。

动力节点老杜Vue框架教程【三】Vue组件化_vue3_32

  1. 第三步：编译Vue程序，自动将生成html css js放入内置服务器，自动启动服务。
  1. dos命令窗口中切换到项目根：cd vue_pro
  2. 执行：npm run serve，这一步会编译HelloWorld案例

动力节点老杜Vue框架教程【三】Vue组件化_vue3_33

ctrl + c停止服务。

  1. 打开浏览器，访问：http://localhost:8080

动力节点老杜Vue框架教程【三】Vue组件化_vue教程_34

动力节点老杜Vue框架教程【三】Vue组件化_Vue_35

3.6.3 认识脚手架结构

使用VSCode将vue_pro项目打开：

动力节点老杜Vue框架教程【三】Vue组件化_Vue_36

package.json：包的说明书（包的名字，包的版本，依赖哪些库）。该文件里有webpack的短命令： serve（启动内置服务器） build命令是最后一次的编译，生成html css js，给后端人员 lint做语法检查的。

3.6.4 分析HelloWorld程序

动力节点老杜Vue框架教程【三】Vue组件化_vue教程_37

可以看到在index.html中只有一个容器。没有引入vue.js，也没有引入main.js Vue脚手架可以自动找到main.js文件。（所以main.js文件名不要修改，位置也不要随便移动）

动力节点老杜Vue框架教程【三】Vue组件化_前端_38

接下来就是将之前写的程序拷贝到脚手架中，进行测试。 需要拷贝过来的是：App.vue、X.vue、Y.vue、X1.vue、Y1.vue。 main.js和index.html都不需要了，因为脚手架中有。

动力节点老杜Vue框架教程【三】Vue组件化_前端_39

只需要将App.vue中的路径修改一下即可：

动力节点老杜Vue框架教程【三】Vue组件化_Vue_40

打开VSCode终端：ctrl + ` 在终端中执行：npm run serve 报错了：

动力节点老杜Vue框架教程【三】Vue组件化_Vue_41

导致这个错误的原因是：组件的名字应该由多单词组成。这是eslint进行的es语法检测。 解决这个问题有两种方案： 第一种：把所有组件的名字修改一下。 第二种：在vue.config.js文件中进行脚手架的默认配置。配置如下：

动力节点老杜Vue框架教程【三】Vue组件化_前端_42

在终端中ctrl + c 两次，终止之前的服务，再次运行命令：npm run serve

动力节点老杜Vue框架教程【三】Vue组件化_Vue_43

动力节点老杜Vue框架教程【三】Vue组件化_Vue_44

3.6.5 脚手架默认配置

脚手架默认配置在vue.config.js文件中进行。main.js、index.html等都是可以配置的。配置项可以参考Vue CLI官网手册，如下：

动力节点老杜Vue框架教程【三】Vue组件化_vue3_45

例如配置这两项： 第一个：保存时不检查语法 lintOnSave : false 第二个：配置入口

动力节点老杜Vue框架教程【三】Vue组件化_vue教程_46

3.6.6 解释main.js中的render函数

将render函数更换为：template配置项，你会发现它是报错的。说明引入的Vue无法进行模板编译。原因：Vue脚手架默认引入的是精简版的Vue，这个精简版的Vue缺失模板编译器。

动力节点老杜Vue框架教程【三】Vue组件化_vue3_47

实际引入的vue.js文件是：dist/vue.runtime.esm.js（esm版本是ES6模块化版本） 为什么缺失模板编译器？ Vue包含两部分：一部分是Vue的核心，一部分是模板编译器（模板编译器可能占整个vue.js文件的一大部分体积）。程序员最终使用webpack进行打包的时候，显然Vue中的模板编译器就没有存在的必要了。为了缩小体积，所以在Vue脚手架中直接引入的就是一个缺失模板编译器的vue.js。 这样就会导致template无法编译（注意：

标签：教程,vue,vm,js,Vue,组件,脚手架,老杜
From： https://blog.51cto.com/u_16086446/6226536

相关文章

  • Java8 教程_编程入门自学教程_菜鸟教程-免费教程分享
    教程简介Java8(又称为jdk1.8)是Java语言开发的一个主要版本。Java8是oracle公司于2014年3月发布，可以看成是自Java5以来最具革命性的版本。Java8为Java语言、编译器、类库、开发工具与JVM带来了大量新特性。Java8入门教程-从简单的步骤了解Java8，从基本到高级概......
  • 老杜2023最新Vue实战精讲（三）Vue组件化
    动力节点老杜全新版Vue教程笔记分享给大家学习の地止：https://www.bilibili.com/video/BV17h41137i4视频教程从Vue2开始讲解，一步一个案例，知识点由浅入深，然后很自然的过度到Vue3版本。Vue3是目前企业中使用最多的一个版本。视频中会把每一个Vue的知识点讲解的非常通透，不但举例......
  • VUE在Return中定义变量，放在方法中使用
    Return中定义CSS变量在Return中定义一个比变量data(){return{'--mg_top1':'3vh',},}在methods方法使用this.$el.style.setProperty('--mg_top1','3.6vh') 在CSS中使用.mg_top{margin-top:var(--mg_top1)......
  • Vue3 + element-plus使用注意
    1.给组件设置ref="xxx"例如：<el-tableref="tableRef"定义tableRef时，需要注意尽量使用ref()而非ref(null)consttableRef=ref();因为使用ref(null）会得不到$el的相关属性，即undefined例如：表格自适应高度consttableRef=ref();constsetTableHeight=()=>......
  • ant-design blazor 简单使用教程
    使用教程  先本地安装模板，然后再创建项目例：dotnetnew--installAntDesign.Templates dotnetnewantdesign--host=wasm--full-omonitor生成后的项目如图所示： 直接运行，就可以看到结果了，开发效率确实很高，适用于小型项目，比如监控面板这种内部用，又没有多少开发资......
  • 【Vue】如何watch v-for中的元素属性值
     如果你想watch一个v-for中的变量，你可以在vue组件的watch对象中创建一个函数，来监听这个变量。假设你有一个数组items，它是一个对象数组，你想要监听每个对象的name属性。那么你可以这样写：<template><divv-for="iteminitems":key="item.id">{{item.name}}</div></tem......
  • vue2项目中调取登录接口登录以后获取个人信息以后,储存在哪里,怎么在不同的页面展示想
    在Vue2项目中，可以将个人信息存储在Vuex状态管理中或者浏览器的本地存储中，具体取决于项目的需求和规模。1.Vuex状态管理在Vuex中定义一个user模块，用于存储用户信息，可以在登录成功后将用户信息存储到该模块中。```javascript//store/user.jsconststate={userInfo:null}......
  • vue 使用Element 的form表单如何校验对象中的对象属性？
    1、校验对象中的对象属性，需要特殊处理下：<templatev-if="form.dataType===0"><el-form-itemlabel="芯片类型"prop="configExtend.schemeVersion"><el-selectv-model="form.configExtend.schemeVersion&quo......
  • vue使用vue-qr生成二维码
    vue-qr基础使用：第一步，先安装vue-qr插件npminstallvue-qr--save第二步，在想要生成vueQr的Vue页面引入组件importvueQrfrom'vue-qr'第三步，在components中引入VueQr组件components:{VueQr}如下：<script>importVueQrfrom'vue-qr';exportdefault{componen......
  • React和Vue的区别
    React和Vue是两个非常流行的JavaScript框架，用于构建前端Web应用程序。以下是它们之间的一些区别：模板语法：Vue使用模板语法，它允许您在HTML模板中嵌入Vue代码，类似于AngularJS。React使用JSX语法，它允许您将JavaScript代码嵌入HTML模板中。数据绑定：Vue使用双向数据绑定，这意味着当......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99