第二章Vue组件化编程

已于 2023-03-29 12:05:23 修改
阅读量962 收藏 5
点赞数 1
分类专栏： Vue 文章标签： vue.js javascript 前端
于 2023-03-26 16:05:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50985215/article/details/129780463
版权

文章目录

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

image-20210723115936262

image-20210723120028543

模块

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

组件

  • 定义：用来实现局部功能的代码和资源的集合（html/css/js/image…）
  • 为什么：一个界面的功能很复杂
  • 作用：复用编码，简化项目编码，提高运行效率

模块化

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

组件化

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

Vue中的组件含义

组件是可复用的Vue实例， 说白了就是一组可以重复使用的模板， 跟JSTL的自定义标签、Thymeleal的th:fragment等框架有着异曲同工之妙，通常一个应用会以一棵嵌套的组件树的形式来组织：

  • 组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树

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

非单文件组件

基本使用

<!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">
    <script type="text/javascript" src="../js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root">
        <!-- 3使用组件 -->
        <school></school>
        <student></student>
    </div>
    <script type="text/javascript">
        //1创建组件
        const school=Vue.extend({
            template: `
            <div>
                <h1>{{schoolName}}</h1>
                <h2>{{address}}</h2>
            </div>
            `,
            data() {
                return {
                    schoolName: '一中',
                    address: '柳岸'
                }
            },
        })
        //1创建组件的快捷方式
        const student={
            template: `
            <div>
                <h1>{{studentName}}</h1>
                <h2>{{age}}</h2>
            </div>
            `,
            data() {
                return {
                    studentName: 'lsc',
                    age: 22
                }
            },
        }
        //2全局注册组件
        Vue.component('student',student)
        new Vue({
            el: '#root',
            data: {
                msg: 'hello compentments'
            },
            //2局部注册组件
            components: {
                school:school //这种可以简写为 school
            }
        })
    </script>
</body>
</html>

image-20230324235329231

总结：

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

  • 定义组件(创建组件)——Vue.extend

  • 注册组件——局部和全局

  • 使用组件(写组件标签)

如何定义一个组件？

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

  • el不要写，为什么？

    • 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器

  • data必须写成函数，为什么？

    • 避免组件被复用时，数据存在引用关系，防止同一个组件的实例对象之间数据相互影响

如何注册组件？

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

全局注册

Vue.component('my-component-name', {
// ... 选项 ...
})

这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中

Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

new Vue({ el: '#app' })
<div id="app">
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>
</div>

在所有子组件中也是如此，也就是说这三个组件在各自内部也都可以相互使用。

局部注册

  • 全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件：

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

然后在 components 选项中定义你想要使用的组件：

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

对于 components 对象中的每个 property 来说，其 property 名就是自定义元素的名字，其 property 值就是这个组件的选项对象。

注意局部注册的组件在其子组件中不可用。例如，如果你希望 ComponentA 在 ComponentB 中可用，则你需要这样写：

var ComponentA = { /* ... */ }

var ComponentB = {
  components: {
    'component-a': ComponentA
  },
  // ...
}

如果你通过 Babel 和 webpack 使用 ES2015 模块

import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  },
  // ...
}

注意在 ES2015+ 中，在对象中放一个类似 ComponentA 的变量名其实是 ComponentA: ComponentA 的缩写，即这个变量名同时是用在模板中的自定义元素的名称

  • 包含了这个组件选项的变量名

如何使用

编写组件标签：<school></school>

组件注意事项

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>组件注意事项</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h1>{{msg}}</h1>
			<school></school>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		const school = Vue.extend({
			name:'atguigu',
			template:`
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
				</div>
			`,
			data(){
				return {
					name:'尚硅谷',
					address:'北京'
				}
			}
		})

		new Vue({
			el:'#root',
			data:{
				msg:'欢迎学习Vue!'
			},
			components:{
				school
			}
		})
	</script>
</html>

总结：

关于组件名：

一个单词组成：

  • 第一种写法（首字母小写）：school

  • 第二种写法（首字母大写）：School

多个单词组成：

  • 第一种写法（kebab-case命名）：my-school

  • 第二种写法（CamelCase命名）：MySchool （需要Vue脚手架支持）

组件名大小写

定义组件名的方式有两种：

使用 kebab-case
Vue.component('my-component-name', { /* ... */ })

当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。

使用 PascalCase
Vue.component('MyComponentName', { /* ... */ })

当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

备注：

  • 组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行

  • 可以使用name配置项指定组件在开发者工具中呈现的名字

关于组件标签：

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

  • 第二种写法：<school/>

  • 备注：不使用脚手架时，<school/>会导致后续组件不能渲染

一个简写方式：const school = Vue.extend({options})可简写为：const school = {options}

组件的嵌套

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>组件的嵌套</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		//定义student组件
		const student = Vue.extend({
			template:`
				<div>
					<h2>学生名称：{{name}}</h2>	
					<h2>学生年龄：{{age}}</h2>	
				</div>
			`,
			data(){
				return {
					name:'JOJO',
					age:20
				}
			}
		})

		//定义school组件
		const school = Vue.extend({
			template:`
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
					<student></student>
				</div>
			`,
			components:{
				student
			},
			data(){
				return {
					name:'尚硅谷',
					address:'北京'
				}
			}
		})

		//定义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',
			components:{
				app
			}
		})
	</script>
</html>

效果：

img

  • 对于一个组件想嵌套在哪个组件中，就要将对于的字组件嵌套在对应的父组件中

模板template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="static/script/vue.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="app">
   <myfirstcomponent></myfirstcomponent>
</div>

<script language="JavaScript">
    // 定义一个Vue组件
    Vue.component("myfirstcomponent", {
        template: '<div> hello,我是一个组件 </div>'
    });
    var vm=new Vue({
        el: "#app",
        data: {
        }
    });
</script>
</body>
</html>
  • 组件的第一个参数就是组件名
    • 当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候，我们强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。
  • 组件失效的原因
    • 没有实例化某个Vue对象
    • 组件必须挂载在某个Vue实例之下，否则不会生效
    • 标签名称不能有大写字母
    • 创建组件构造器和注册组件的代码必须在Vue实例之前

VueComponent

const school = Vue.extend({
			name:'atguigu',
			template:`
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
				</div>
			`,
			data(){
				return {
					name:'尚硅谷',
					address:'北京'
				}
			}
		})

关于VueComponent：

  • school组件本质是一个名为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（也可称之为：组件实例对象）

  • Vue的实例对象，以后简称vm

  • 只有在本笔记中VueComponent的实例对象才简称为vc

    • vc在创建的时候不能写el，只能跟着对应的vm的时候，来决定

一个重要的内置功能

<!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.prototype.x = 99

		const school = Vue.extend({
			name:'school',
			template:`
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
					<button @click="showX">点我输出x</button>
				</div>
			`,
			data(){
				return {
					name:'尚硅谷',
					address:'北京'
				}
			},
			methods: {
				showX(){
					console.log(this.x)
				}
			},
		})

		const vm = new Vue({
			el:'#root',
			data:{
				msg:'你好'
			},
			components:{school}
		})
	</script>
</html>

img

image-20210730113353890

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

    • VueComponent.prototype指的是我们的VueComponent的原型对象 Vue.prototype指的是Vue的原型对象

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

    • 通过显示原型链可以给原型对象添加属性，实例对象通过隐式原型链获取原型对象的属性，从自身沿着原型链一直找到window的原型对象为空

单文件组件

School.vue

<template>
    <div id='Demo'>
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
        <button @click="showName">点我提示学校名</button>
    </div>
</template>

<script>
    export default {
        name:'School',
        data() {
            return {
                name:'尚硅谷',
                address:'北京'
            }
        },
        methods: {
            showName(){
                alert(this.name)
            }
        },
    }
</script>

<style>
    #Demo{
        background: orange;
    }
</style>
  • export default 默认暴露，将我们的组件School暴露出去
    • 可以使用name配置项指定组件在开发者工具中呈现的名字
  • 其实export default {}是 简写 全称是 export default Vue.expend({optitons})

Student.vue

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

<script>
    export default {
        name:'Student',
        data() {
            return {
                name:'JOJO',
                age:20
            }
        },
    }
</script>

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>

main.js

import App from './App.vue'

new Vue({
    template:`<App></App>`,
    el:'#root',
    components:{App}
})

index.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>单文件组件练习</title>
</head>
<body>
    <div id="root"></div>
    <script src="../../js/vue.js"></script>
    <script src="./main.js"></script>
</body>
</html>
  • 直接这样写，并不能成功。需要我们的Vue 脚手架的帮助，才能实现

Vue脚手架

使用Vue CLI脚手架

先配置环境

Node.js：http://nodejs.cn/download/安装就是无脑的下一步就好，安装在自己的环境目录下

  • 确认nodejs安装成功
    • cmd下输入node -v，查看是否能够正确打印出版本号即可！
    • cmd下输入npm -v，查看是否能够正确打印出版本号即可！
      • 这个npm，就是一个软件包管理工具，就和linux下的apt软件安装差不多！

Git：https://git-scm.com/doenloads

初始化脚手架

  • Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）
  • 最新的版本是 4.x
  • 文档：Vue CLI

具体步骤

  • 如果下载缓慢请配置 npm 淘宝镜像：npm config set registry http://registry.npm.taobao.org

-g 就是全局安装

npm install cnpm -g

或使用如下语句解决npm速度慢的问题

npm install --registry=https://registry.npm.taobao.org

  • 但是能不用cnpm就不用，npm比较好，因为cnpm可能打包的时候会出现问题
  • 全局安装@vue/cli——npm install -g @vue/cli
  • 切换到你要创建项目的目录，然后使用命令创建项目：vue create xxx(项目名)
    • 选择使用vue的版本,我们学习的是Vue2,所以选择2
  • 启动项目：npm run serve
  • 暂停项目：Ctrl+C
  • Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpakc 配置，请执行：vue inspect > output.js

呈现效果——访问http://localhost:8080/

image-20230325113825842

  • 这就是 Node.js的服务，跟tomcat 差不多。
  • Node.js它是一个服务器，它可以运行一些东西。

webpack 的主要编程语言是 js，想要在你的机器上跑 js 脚本，就需要一个解释执行 js 的环境，nodejs 出现之前我们只能在浏览器环境下解释执行 js，而 nodejs 基于 V8 引擎进行了一系列封装，使得我们可以在非浏览器环境下解释执行 js。

nodejs 可以支持本地文件的操作，也就是文件读写，webpack 基于此提供了编译前端代码的功能，使得我们可以在前端代码开发的过程中选择我们喜欢的框架和预编译语言。

nodejs 也可以支持搭建网络服务，webpack 基于此提供了开发环境的搭建，使得我们可以轻松的在本地构建服务调试我们的前端代码。

说 webpack 依赖 nodejs 其实并不太准确，应该说 webpack 是用 nodejs 执行的，js 不是机器语言，解释执行 js 必须要一个特定的环境，nodejs 提供了这个环境。

什么是Webpack

  • 本质上， webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler) 。当webpack处理应用程序时， 它会递归地构建一个依赖关系图(dependency graph) ， 其中包含应用程序需要的每个模块， 然后将所有这些模块打包成一个或多个bundle.
  • Webpack是当下最热门的前端资源模块化管理和打包工具， 它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离，等到实际需要时再异步加载。通过loader转换， 任何形式的资源都可以当做模块， 比如Commons JS、AMD、ES 6、CSS、JSON、Coffee Script、LESS等；

伴随着移动互联网的大潮， 当今越来越多的网站已经从网页模式进化到了WebApp模式。它们运行在现代浏览器里， 使用HTML 5、CSS 3、ES 6等新的技术来开发丰富的功能， 网页已经不仅仅是完成浏览器的基本需求； WebApp通常是一个SPA(单页面应用) ， 每一个视图通过异步的方式加载，这导致页面初始化和使用过程中会加载越来越多的JS代码，这给前端的开发流程和资源组织带来了巨大挑战。

前端开发和其他开发工作的主要区别，首先是前端基于多语言、多层次的编码和组织工作，其次前端产品的交付是基于浏览器的，这些资源是通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和资源，并且保证他们在浏览器端快速、优雅的加载和更新，就需要一个模块化系统，这个理想中的模块化系统是前端工程师多年来一直探索的难题。

模块化的演进

Script标签

<script src = "module1.js"></script>
<script src = "module2.js"></script>
<script src = "module3.js"></script>

这是最原始的JavaScript文件加载方式，如果把每一个文件看做是一个模块，那么他们的接口通常是暴露在全局作用域下，也就是定义在window对象中，不同模块的调用都是一个作用域。

这种原始的加载方式暴露了一些显而易见的弊端：

  • 全局作用域下容易造成变量冲突
  • 文件只能按照<script>的书写顺序进行加载
  • 开发人员必须主观解决模块和代码库的依赖关系
  • 在大型项目中各种资源难以管理，长期积累的问题导致代码库混乱不堪

CommonsJS
  服务器端的NodeJS遵循CommonsJS规范，该规范核心思想是允许模块通过require方法来同步加载所需依赖的其它模块，然后通过exports或module.exports来导出需要暴露的接口。

require("module");
require("../module.js");
export.doStuff = function(){};
module.exports = someValue;

  • 服务器端模块便于重用

  • NPM中已经有超过45万个可以使用的模块包

  • 简单易用

缺点：

  • 同步的模块加载方式不适合在浏览器环境中，同步意味着阻塞加载，浏览器资源是异步加载的不能非阻塞的并行加载多个模块

实现：

  • 服务端的NodeJS

  • Browserify，浏览器端的CommonsJS实现，可以使用NPM的模块，但是编译打包后的文件体积较大modules-webmake，类似Browserify，但不如Browserify灵活

  • wreq，Browserify的前身

AMD
  Asynchronous Module Definition规范其实主要一个主要接口define(id?,dependencies?,factory);它要在声明模块的时候指定所有的依赖dependencies，并且还要当做形参传到factory中，对于依赖的模块提前执行。

define("module",["dep1","dep2"],functian(d1,d2){
	return someExportedValue;
});
require（["module","../file.js"],function(module，file){});

优点

  • 适合在浏览器环境中异步加载模块

  • 可以并行加载多个模块

缺点

  • 提高了开发成本，代码的阅读和书写比较困难，模块定义方式的语义不畅

  • 不符合通用的模块化思维方式，是一种妥协的实现

实现

  • RequireJS

  • curl

CMD
  Commons Module Definition规范和AMD很相似，尽保持简单，并与CommonsJS和NodeJS的Modules规范保持了很大的兼容性。

define(function(require,exports,module){
	var $=require("jquery");
	var Spinning = require("./spinning");
	exports.doSomething = ...;
	module.exports=...;
});

优点：

  • 依赖就近，延迟执行

  • 可以很容易在NodeJS中运行

缺点

  • 依赖SPM打包，模块的加载逻辑偏重

实现

  • Sea.js

  • coolie

ES6模块
  EcmaScript 6标准增加了JavaScript语言层面的模块体系定义。ES 6模块的设计思想， 是尽量静态化， 使编译时就能确定模块的依赖关系， 以及输入和输出的变量。Commons JS和AMD模块，都只能在运行时确定这些东西。

import "jquery"
export function doStuff(){}
module "localModule"{}

优点

  • 容易进行静态分析

  • 面向未来的Ecma Script标准

缺点

  • 原生浏览器端还没有实现该标准
  • 全新的命令，新版的Node JS才支持

实现

  • Babel

  • 大家期望的模块

    • 系统可以兼容多种模块风格， 尽量可以利用已有的代码， 不仅仅只是JavaScript模块化， 还有CSS、图片、字体等资源也需要模块化。

分析脚手架结构

初始脚手架文件结构：

.文件目录
├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   └── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
└── package-lock.json: 包版本控制文件
  • main.js是一切的开端

实例

src/components/School.vue

<template>
    <div id='Demo'>
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
        <button @click="showName">点我提示学校名</button>
    </div>
</template>

<script>
    export default {
        name:'School',
        data() {
            return {
                name:'尚硅谷',
                address:'北京'
            }
        },
        methods: {
            showName() {
                alert(this.name)
            }
        },
    }
</script>

<style>
    #Demo{
        background: orange;
    }
</style>

src/components/Student.vue

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

<script>
    export default {
        name:'Student',
        data() {
            return {
                name:'JOJO',
                age:20
            }
        },
    }
</script>

src/App.vue

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

<script>
    import School from './components/School.vue'
    import Student from './components/Student.vue'

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

src/main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
   //将App组件放入容器中
  render: h => h(App),
}).$mount('#app')
  • 我们发现在main.js中，我们没有注册App组件，这些其实都是在render函数中，等会解释

public/index.html

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <!-- 针对IE浏览器的特殊配置，含义是让IE浏览器以最高渲染级别渲染页面 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- 开启移动端的理想端口 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- 配置页签图标 -->
        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
        <!-- 配置网页标题 -->
        <title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    <body>
        <!-- 容器 -->
        <div id="app"></div>
    </body>
</html>
  • 虽然在表面上我们没有使用<script src="./main.js"></script>来引入，但是我们可以进行使用 <div id="app"></div>,是因为脚手架帮我们做好了

render函数——解决无模板解析

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
    el:'#app',
    // 简写形式
	render: h => h(App),
    // 完整形式
	// render(createElement){
	//     return createElement(App)
	// }
   //  因为只有一个参数所以可以把括号去掉 和一条语句只是return，写成render createElement =>return createElement(App)
})

总结：

关于不同版本的函数：

  • vue.js 与 vue.runtime.xxx.js的区别：

    • vue.js 是完整版的 Vue，包含：核心功能+模板解析器
    • vue.runtime.xxx.js 是运行版的 Vue，只包含核心功能，没有模板解析器，我们的import Vue from 'vue’引入的就是import Vue from ‘vue’

  • 因为 vue.runtime.xxx.js 没有模板解析器，所以不能使用 template 配置项，需要使用 render函数接收到的createElement 函数去指定具体内容

修改默认配置

  • vue.config.js 是一个可选的配置文件，如果项目的（和 package.json 同级的）根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载
  • 使用 vue.config.js 可以对脚手架进行个性化定制，详见配置参考 | Vue CLI
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false /*关闭语法检查*/
})

webpack将配置文件放在了webpack.config.js中，这个文件被隐藏，就是防止我们乱改，对于我们想改Vue的配置，我们可以通过新建一个vue.config.js 文件，将这个文件和我们webpack.config.js进行合并，达到我们修改配置的功能

ref属性——定位元素

<template>
    <div>
        <h1 ref="title">{{msg}}</h1>
        <Student ref="sch"/>
        <button @click="show" ref="btn">点我输出ref</button>
    </div>
</template>

<script>
import Student from '../components/Student.vue'
    export default {
        name:'App',
        components: { Student },
        data() {
            return {
                msg:'欢迎学习Vue！'
            }
        },
        methods:{
            show(){
                console.log(this.$refs.title)
                console.log(this.$refs.sch)
                console.log(this.$refs.btn)
            }
        }
    }
</script>

img

总结：

ref属性：

  • 被用来给元素或子组件注册引用信息（id的替代者）

    • 应用在html标签上获取的是真实DOM元素，应用在组件标签上获取的是组件实例对象（vc）

  • 使用方式：

    • 打标识：<h1 ref="xxx"></h1> 或 <School ref="xxx"></School>

  • 获取：this.$refs.xxx

props配置项——传递参数

像上面那样用组件没有任何意义，所以我们是需要传递参数到组件的，此时就需要使用props属性了！注意：默认规则下props属性里的值不能为大写；

HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：

src/App.vue

<template>
    <div>
        <h1>{{msg}}</h1>
        <Student name="JOJO" sex="男" :age="20" />
        <Student name="POKO" sex="男" :age="30" />
        <Student name="SJO" sex="女" :age="25" />
    </div>
</template>

<script>
    import Student from './components/Student'

    export default {
        name:'App',
        components:{
            Student
        },
        data() {
            return {
                msg: '我是一个正常人'
            }
        },
    }
</script>

src/components/Student.vue

<template>
    <div>
        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别:{{sex}}</h2>
        <h2>学生年龄：{{myage}}</h2>
        <hr>
    </div>
</template>

<script>
    export default {
        name:'Student',
        //简单接收
        // props:['name','age','sex'],
        
        // 接收的同时对数据进行类型限制
		// props:{
		// 	name:String,
		// 	age:Number,
		// 	sex:String
		// },

        // 接收的同时对数据进行类型限制 + 指定默认值 + 限制必要性
		props:{
			name:{
				type:String,
				required:true,
			},
			age:{
				type:Number,
				default:99
			},
			sex:{
				type:String,
				required:true
			}
		},
        data() {
            return {
                myage: this.age
            }
        },
    }
</script>

image-20230326102808424

总结：

props配置项：

  • 功能：让组件接收外部传过来的数据

  • 传递数据：<Demo name="xxx"/>,在使用组件标签的时候，进行传递数据

  • 接收数据：

    • 第一种方式（只接收）：props:[‘name’]

    • 第二种方式（限制数据类型）：props:{name:String}

    • 第三种方式（限制类型、限制必要性、指定默认值）：

props:{
    name:{
    	type:String, //类型
        required:true, //必要性
        default:'JOJO' //默认值
    }
}

props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据

  • 经过测试，我们发现对于组件来说,prop的属性的优先级是大于我们的data里面的属性，所以我们复制可以data() return{ mydata: this.prop}

:age="20"和 age=“20的区别”

  • :age=“20” 的全称是v-bind:age=“20” ,也就是数据单向绑定了，而且我们知道这样绑定,""中的内容是表示js运算结果，所以传给age的值是数字20
  • age=“20”,就表示传给age的值是一个字符串

mixin混入

src/mixin.js

//注册组件并暴露出去
export const mixin = {
    methods: {
        showName() {
            alert(this.name)
        }
    },
    mounted() {
        console.log("你好呀~")
    }
}
  • 独立写一个混入的js文件

src/components/School.vue

<template>
    <div>
        <h2 @click="showName">学校姓名：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>   
    </div>
</template>

<script>
    //局部引入混入
    import {mixin} from '../mixin'
    
    export default {
        name:'School',
        data() {
            return {
             name:'尚硅谷',
				address:'北京'
            }
        },
        //局部注册
        mixins:[mixin]
    }
</script>

src/components/Student.vue

<template>
    <div>
        <h2 @click="showName">学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2>   
    </div>
</template>

<script>
    // 局部引入混入
    import {mixin} from '../mixin'
    
    export default {
        name:'Student',
        data() {
            return {
                name:'JOJO',
				sex:'男'
            }
        },
       //局部注册
		mixins:[mixin]
    }
</script>

src/App.vue

<template>
    <div>
        <School/>
        <hr/>
        <Student/>
    </div>
</template>

<script>
    import Student from './components/Student.vue'
    import School from './components/School.vue'

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

img

全局混入：

src/main.js:

import Vue from 'vue'
import App from './App.vue'
import {mixin} from './mixin'

Vue.config.productionTip = false
Vue.mixin(mixin)

new Vue({
    el:"#app",
    render: h => h(App)
})

总结：

mixin（混入）：

  • 功能：可以把多个组件共用的配置提取成一个混入对象

使用方式：

第一步定义混入：

const mixin = {
    data(){....},
    methods:{....}
    ....
}

第二步使用混入：

  • 全局混入：Vue.mixin(xxx)

  • 局部混入：mixins:[‘xxx’]

备注：

组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”，在发生冲突时以组件优先。

var mixin = {
	data: function () {
		return {
    		message: 'hello',
            foo: 'abc'
    	}
  	}
}

new Vue({
  	mixins: [mixin],
  	data () {
    	return {
      		message: 'goodbye',
            bar: 'def'
    	}
    },
  	created () {
    	console.log(this.$data)
    	// => { message: "goodbye", foo: "abc", bar: "def" }
  	}
})

同名生命周期钩子将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

var mixin = {
  	created () {
    	console.log('混入对象的钩子被调用')
  	}
}

new Vue({
  	mixins: [mixin],
  	created () {
    	console.log('组件钩子被调用')
  	}
})

// => "混入对象的钩子被调用"
// => "组件钩子被调用"

plugin插件

src/plugin.js:

export default {
	install(Vue,x,y,z){
		console.log(x,y,z)
		//全局过滤器
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})

		//定义混入
		Vue.mixin({
			data() {
				return {
					x:100,
					y:200
				}
			},
		})

		//给Vue原型上添加一个方法（vm和vc就都能用了）
		Vue.prototype.hello = ()=>{alert('你好啊')}
	}
}
  • 独立写一个插件的js文件

src/main.js:

import Vue from 'vue'
import App from './App.vue'
import plugin from './plugin'

Vue.config.productionTip = false
Vue.use(plugin,1,2,3)

new Vue({
    el:"#app",
    render: h => h(App)
})

src/components/School.vue:

<template>
    <div>
        <h2>学校姓名：{{name | mySlice}}</h2>
        <h2>学校地址：{{address}}</h2>   
    </div>
</template>
<script>
    export default {
        name:'School',
        data() {
            return {
             name:'尚硅谷atguigu',
				address:'北京'
            }
        }
    }
</script>

src/components/Student.vue:

<template>
    <div>
        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2> 
        <button @click="test">点我测试hello方法</button>  
    </div>
</template>
<script>
    export default {
        name:'Student',
        data() {
            return {
             name:'JOJO',
				sex:'男'
            }
        },
        methods:{
            test() {
                this.hello()
            }
        }
    }
</script>

img

总结：

插件：

  • 功能：用于增强Vue

  • 本质：包含install方法的一个对象，install的第一个参数是Vue,也就vm实例对象的构造函数，第二个以后的参数是插件使用者传递的数据

定义插件：

plugin.install = function (Vue, options) {
        // 1.添加全局过滤器
        	Vue.filter(....)
        // 2.添加全局指令
    		 Vue.directive(....)
    	// 3. 配置全局混入
   			Vue.mixin(....)
		// 4. 添加实例方法
   		    Vue.prototype.$myMethod = function () {...}
    		Vue.prototype.$myProperty = xxxx
}

使用插件：Vue.use(plugin)

scoped样式

src/components/School.vue

<template>
    <div class="demo">
        <h2>学校姓名：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>   
    </div>
</template>

<script>
    export default {
        name:'School',
        data() {
            return {
                name:'尚硅谷',
				address:'北京'
            }
        }
    }
</script>

<style scoped>
    .demo{
        background-color: blueviolet;
    }
</style>

src/components/Student.vue

<template>
    <div class="demo">
        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2> 
    </div>
</template>

<script>
    export default {
        name:'Student',
        data() {
            return {
                name:'JOJO',
				sex:'男'
            }
        }
    }
</script>

<style scoped>
    .demo{
        background-color: chartreuse;
    }
</style>

src/App.vue

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

<script>
    import Student from './components/Student.vue'
    import School from './components/School.vue'

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

img

总结：

scoped样式：

  1. 作用：让样式在局部生效，防止冲突
    • 我们在给组件写对应的样式时，可能会有类名相同而导致样式冲突，所以对于组件的样式，我们最好能让其只在组件内局部生效，而不影响其他组件的样式
  2. 写法：<style scoped>

scoped样式一般不会在App.vue中使用

ToList——基础版本

后面的改进不会再写style样式

MyHeader.vue

<template>
    <div class="todo-header">
        <input type="text" placeholder="请输入你的任务名称，按回车键确认" @keydown.enter="add" v-model="title"/>
    </div>
</template>

<script>
    import {nanoid} from 'nanoid'
    export default {
        name:'MyHeader',
        data() {
            return {
                title:''
            }
        },
        methods:{
            add(){
                if(!this.title.trim()) return
                const todoObj = {id:nanoid(),title:this.title,done:false}
                this.addTodo(todoObj)
                this.title = ''
            }
        },
        props:['addTodo']
    }
</script>

<style scoped>
    .todo-header input {
        width: 560px;
        height: 28px;
        font-size: 14px;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 4px 7px;
    }

    .todo-header input:focus {
        outline: none;
        border-color: rgba(82, 168, 236, 0.8);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
    }
</style>
  • MyHeader想实现一个输入内容，对应添加一个MyItem选项
  • 因为添加数据是要改变MyList内容，所以将动态数据放入到其公共的父组件，也就是我们的App.vue
    • 在App.vue实现对应改变我们数据的方法，然后将方法传递给我们的MyHeader组件，让我们的MyHeader调用方法，进行改变数据
    • 想要不是父子组件来进行数据交互传递，现在还不能实现，后面会继续学习进行实现

MyList.vue

<template>
    <ul class="todo-main">
        <MyItem 
            v-for="todo in todos" 
            :key="todo.id" 
            :todo="todo" 
            :checkTodo="checkTodo"
            :deleteTodo="deleteTodo"
        />
    </ul>
</template>

<script>
    import MyItem from './MyItem.vue'

    export default {
        name:'MyList',
        components:{MyItem},
        props:['todos','checkTodo','deleteTodo']
    }
</script>

<style scoped>
    .todo-main {
        margin-left: 0px;
        border: 1px solid #ddd;
        border-radius: 2px;
        padding: 0px;
    }

    .todo-empty {
        height: 40px;
        line-height: 40px;
        border: 1px solid #ddd;
        border-radius: 2px;
        padding-left: 5px;
        margin-top: 10px;
    }
</style>
  • props:[‘todos’,‘checkTodo’,‘deleteTodo’] ,因为数据是从App.vue传递给MyItem，现在学的知识只能从父传子，或者子传父，不能直接从爷传子，所以需要MyList进行中转过度

MyItem.vue

<template>
    <li>
        <label>
            <input type="checkbox" :checked="todo.done" @click="handleCheck(todo.id)"/>
            <span>{{todo.title}}</span>
        </label>
        <button class="btn btn-danger" @click="handleDelete(todo.id,todo.title)">删除</button>
    </li>
</template>

<script>
    export default {
        name:'MyItem',
        props:['todo','checkTodo','deleteTodo'],
        methods:{
            handleCheck(id){
                this.checkTodo(id)
            },
            handleDelete(id,title){
                if(confirm("确定删除任务："+title+"吗？")){
                    this.deleteTodo(id)
                }
            }
        }
    }
</script>

<style scoped>
    li {
        list-style: none;
        height: 36px;
        line-height: 36px;
        padding: 0 5px;
        border-bottom: 1px solid #ddd;
    }

    li label {
        float: left;
        cursor: pointer;
    }

    li label li input {
        vertical-align: middle;
        margin-right: 6px;
        position: relative;
        top: -1px;
    }

    li button {
        float: right;
        display: none;
        margin-top: 3px;
    }

    li:before {
        content: initial;
    }

    li:last-child {
        border-bottom: none;
    }

    li:hover {
        background-color: #eee;
    }

    li:hover button{
        display: block;
    }
</style>

MyFooter.vue

<template>
    <div class="todo-footer" v-show="total">
        <label>
            <input type="checkbox" v-model="isAll"/>
        </label>
        <span>
            <span>已完成{{doneTotal}}</span> / 全部{{total}}
        </span>
        <button class="btn btn-danger" @click="clearAll">清除已完成任务</button>
    </div>
</template>

<script>
    export default {
        name:'MyFooter',
        props:['todos','checkAllTodo','clearAllTodo'],
        computed:{
            doneTotal(){
                return this.todos.reduce((pre,todo)=> pre + (todo.done ? 1 : 0) ,0)
            },
            total(){
                return this.todos.length
            },
            isAll:{
                get(){
                    return this.total === this.doneTotal && this.total > 0
                },
                set(value){
                    this.checkAllTodo(value)
                }
            }
        },
        methods:{
            clearAll(){
                this.clearAllTodo()
            }
        }
    }
</script>

<style scoped>
    .todo-footer {
        height: 40px;
        line-height: 40px;
        padding-left: 6px;
        margin-top: 5px;
        }

    .todo-footer label {
        display: inline-block;
        margin-right: 20px;
        cursor: pointer;
    }

    .todo-footer label input {
        position: relative;
        top: -1px;
        vertical-align: middle;
        margin-right: 5px;
    }

    .todo-footer button {
        float: right;
        margin-top: 5px;
    }
</style>

src/App.vue

<template>
    <div id="root">
        <div class="todo-container">
            <div class="todo-wrap">
            <MyHeader :addTodo="addTodo"/>
            <MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/>
            <MyFooter :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"/>
            </div>
        </div>
    </div>
</template>

<script>
    import MyHeader from './components/MyHeader.vue'
    import MyList from './components/MyList.vue'
    import MyFooter from './components/MyFooter.vue'

    export default {
        name:'App',
        components: { MyHeader,MyList,MyFooter },
        data() {
            return {
                todos:[
                    {id:'001',title:'抽烟',done:false},
                    {id:'002',title:'喝酒',done:false},
                    {id:'003',title:'烫头',done:false},
                ]
            }
        },
        methods:{
            //添加一个todo
            addTodo(todoObj){
                this.todos.unshift(todoObj)
            },
            //勾选or取消勾选一个todo
            checkTodo(id){
                this.todos.forEach((todo)=>{
                    if(todo.id === id) todo.done = !todo.done
                })
            },
            //删除一个todo
            deleteTodo(id){
                this.todos = this.todos.filter(todo => todo.id !== id)
            },
            //全选or取消勾选
            checkAllTodo(done){
                this.todos.forEach(todo => todo.done = done)
            },
            //删除已完成的todo
            clearAllTodo(){
                this.todos = this.todos.filter(todo => !todo.done)
            }
        }
    }
</script>

<style>
    body {
    	background: #fff;
    }

    .btn {
        display: inline-block;
        padding: 4px 12px;
        margin-bottom: 0;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        border-radius: 4px;
    }

    .btn-danger {
        color: #fff;
        background-color: #da4f49;
        border: 1px solid #bd362f;
    }

    .btn-danger:hover {
        color: #fff;
        background-color: #bd362f;
    }

    .btn:focus {
    	outline: none;
    }

    .todo-container {
        width: 600px;
        margin: 0 auto;
    }
    .todo-container .todo-wrap {
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
</style>

实现效果

image-20230327094050003

总结：

组件化编码流程：

  • 拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突

image-20230327094220773

  • 实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：

    • 一个组件在用：放在组件自身即可
    • 一些组件在用：放在他们共同的父组件上（状态提升）

  • 实现交互：从绑定事件开始

  • props适用于：

    • 父组件 ==> 子组件 通信

    • 子组件 ==> 父组件 通信（要求父组件先给子组件一个函数）

  • 使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的

    • props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做

WebStorage——浏览器本地存储

localStorage

<!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>localStorage</title>
</head>
<body>
    <h2>localStorage</h2>
    <button onclick="saveDate()">点我保存数据</button><br/>
    <button onclick="readDate()">点我读数据</button><br/>
    <button onclick="deleteDate()">点我删除数据</button><br/>
    <button onclick="deleteAllDate()">点我清空数据</button><br/>

    <script>
        let person = {name:"JOJO",age:20}

        function saveDate(){
            localStorage.setItem('msg','localStorage')
            localStorage.setItem('person',JSON.stringify(person))
        }
        function readDate(){
            console.log(localStorage.getItem('msg'))
            const person = localStorage.getItem('person')
            console.log(JSON.parse(person))
        }
        function deleteDate(){
            localStorage.removeItem('msg')
            localStorage.removeItem('person')
        }
        function deleteAllDate(){
            localStorage.clear()
        }
    </script>
</body>
</html>

sessionStorage

<!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>sessionStorage</title>
</head>
<body>
    <h2>sessionStorage</h2>
    <button onclick="saveDate()">点我保存数据</button><br/>
    <button onclick="readDate()">点我读数据</button><br/>
    <button onclick="deleteDate()">点我删除数据</button><br/>
    <button onclick="deleteAllDate()">点我清空数据</button><br/>

    <script>
        let person = {name:"JOJO",age:20}

        function saveDate(){
            sessionStorage.setItem('msg','sessionStorage')
            sessionStorage.setItem('person',JSON.stringify(person))
        }
        function readDate(){
            console.log(sessionStorage.getItem('msg'))
            const person = sessionStorage.getItem('person')
            console.log(JSON.parse(person))
        }
        function deleteDate(){
            sessionStorage.removeItem('msg')
            sessionStorage.removeItem('person')
        }
        function deleteAllDate(){
            sessionStorage.clear()
        }
    </script>
</body>
</html>

总结：

  • 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）

  • 浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制

相关API：

  • xxxStorage.setItem(‘key’, ‘value’)：该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值

  • xxxStorage.getItem(‘key’)：该方法接受一个键名作为参数，返回键名对应的值

  • xxxStorage.removeItem(‘key’)：该方法接受一个键名作为参数，并把该键名从存储中删除

  • xxxStorage.clear()：该方法会清空存储中的所有数据

备注：

  • SessionStorage存储的内容会随着浏览器窗口关闭而消失

  • LocalStorage存储的内容，需要手动清除才会消失

  • xxxStorage.getItem(xxx)如果 xxx 对应的 value 获取不到，那么getItem()的返回值是null

  • JSON.parse(null)的结果依然是null

使用本地存储优化Todo-List

<template>
    <div id="root">
        <div class="todo-container">
            <div class="todo-wrap">
            <MyHeader :addTodo="addTodo"/>
            <MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/>
            <MyFooter :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"/>
            </div>
        </div>
    </div>
</template>

<script>
    import MyHeader from './components/MyHeader.vue'
    import MyList from './components/MyList.vue'
    import MyFooter from './components/MyFooter.vue'

    export default {
        name:'App',
        components: { MyHeader,MyList,MyFooter },
        data() {
            return {
                //若localStorage中存有'todos'则从localStorage中取出，否则初始为空数组
                todos:JSON.parse(localStorage.getItem('todos')) || []
            }
        },
        methods:{
            //添加一个todo
            addTodo(todoObj){
                this.todos.unshift(todoObj)
            },
            //勾选or取消勾选一个todo
            checkTodo(id){
                this.todos.forEach((todo)=>{
                    if(todo.id === id) todo.done = !todo.done
                })
            },
            //删除一个todo
            deleteTodo(id){
                this.todos = this.todos.filter(todo => todo.id !== id)
            },
            //全选or取消勾选
            checkAllTodo(done){
                this.todos.forEach(todo => todo.done = done)
            },
            //删除已完成的todo
            clearAllTodo(){
                this.todos = this.todos.filter(todo => !todo.done)
            }
        },
        watch:{
            todos:{
                //由于todos是对象数组，所以必须开启深度监视才能发现数组中对象的变化
                deep:true,
                handler(value){
                    localStorage.setItem('todos',JSON.stringify(value))
                }
            }
        }
    }
</script>

<style>
  
</style>

自定义事件——实现组件子传夫数据

之前我们实现子元素给父元素传递数据，是将父元素的方法传递给我们的子元素，然后子元素通过父元素传递的方法来进行传递数据给父元素

<template>
    <div class="school">
        <h2>学校名：{{name}}</h2>
        <button @click="sendschoolName">点我传递学校姓名</button> 
    </div>
</template>

<script>
    export default {
        name:'school',
        //接收父元素传递的方法
        props:['getSchoolName'],
        data() {
            return {
                name:'一中',
            }
        },
        methods:{
            sendschoolName(){
                //调用父组件传递的方法
               this.getSchoolName(this.name)
            }
        }
    }
</script>

<style scoped>
    .school{
        background-color: chartreuse;
        padding: 5px;
		margin-top: 30px;
    }
</style>

绑定

student.vue

<template>
    <div class="student">
        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2>
        <button @click="sendStudentName">点我传递学生姓名</button> 
    </div>
</template>

<script>
    export default {
        name:'Student',
        data() {
            return {
             name:'JOJO',
				sex:'男'
            }
        },
        methods:{
            sendStudentName(){
                this.$emit('myevent',this.name) //用emit来触发对应的自定义事件
            }
        }
    }
</script>

<style scoped>
    .student{
        background-color: chartreuse;
        padding: 5px;
		margin-top: 30px;
    }
</style>

App.vue——也是student,school的父组件

<template>
    <div class="app">
        <!-- 通过父组件给子组件传递函数类型的props实现子给父传递数据 -->
        <School :getSchoolName="getSchoolName"/>

        <!-- 通过父组件给子组件绑定一个自定义事件实现子给父传递数据（第一种写法，使用@或v-on） -->
        <!-- <Student @myevent="getStudentName"/> -->

        <!-- 通过父组件给子组件绑定一个自定义事件实现子给父传递数据（第二种写法，使用ref） -->
		 <Student ref="student"/>
    </div>
</template>

<script>
    import Student from './components/Student.vue'
    import School from './components/School.vue'

    export default {
        name:'App',
        components: { Student,School },
        methods:{
            getSchoolName(name){
                console.log("已收到学校的名称："+name)
            },
            getStudentName(name){
                console.log("已收到学生的姓名："+name)      
            }
        },
        mounted(){
            this.$refs.student.$on('myevent',this.getStudentName)
           // this.$refs.student.$once('myevent',this.getStudentName)//只调用一次
        }
    }
</script>


<style scoped>
	.app{
		background-color: gray;
		padding: 5px;
	}
</style>
  • this. r e f s . s t u d e n t . refs.student. refs.student.on(‘myevent’,this.getStudentName)这种方式更加灵活，比如我们可以在mounted钩子函数中调用定时器任务

解绑

student.vue

<template>
    <div class="student">
        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2>
        <button @click="sendStudentName">点我传递学生姓名</button> 
        <button @click="unbind">解绑自定义事件</button> 
    </div>
</template>

<script>
    export default {
        name:'Student',
        data() {
            return {
             name:'JOJO',
				sex:'男'
            }
        },
        methods:{
            sendStudentName(){
                this.$emit('myEvent',this.name)
            },
            unbind(){
                // 解绑一个自定义事件
                // this.$off('myEvent')
                // 解绑多个自定义事件
                // this.$off(['myEvent'])
                // 解绑所有自定义事件
                this.$off()
            }
        }
    }
</script>

<style scoped>
    .student{
        background-color: chartreuse;
        padding: 5px;
		margin-top: 30px;
    }
</style>

App.vue

<template>
    <div class="app">
        <Student @myEvent="getStudentName"/>
    </div>
</template>

<script>
    import Student from './components/Student.vue'

    export default {
        name:'App',
        components: { Student },
        methods:{
            getStudentName(name){
                console.log("已收到学生的姓名："+name)      
            }
        }
    }
</script>

<style scoped>
	.app{
		background-color: gray;
		padding: 5px;
	}
</style>

总结：

组件的自定义事件：

  • 一种组件间通信的方式，适用于：==子组件 > 父组件

  • 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）

  • 绑定自定义事件：

    • 第一种方式，在父组件中：<Demo @atguigu=“test”/> 或 <Demo v-on:atguigu="test"/>

    • 第二种方式，在父组件中

      • 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法
 mounted(){
            this.$refs.student.$on('myevent',this.getStudentName)
           // this.$refs.student.$once('myevent',this.getStudentName)//只调用一次
 }

  • 触发自定义事件：this.$emit(‘atguigu’,数据)——在对应触发事件的组件中，也就是子组件

  • 解绑自定义事件：this.$off(‘atguigu’)——在对应绑定的组件中，也就是子组件

  • 组件上也可以绑定原生DOM事件，需要使用native修饰符

<Student @click.native="getStudentName"/>
  • 注意：通过this. r e f s . x x x . refs.xxx. refs.xxx.on(‘atguigu’,回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

使用自定义事件优化Todo-List

src/App.vue

<template>
    <div id="root">
        <div class="todo-container">
            <div class="todo-wrap">
            <MyHeader @addTodo="addTodo"/>
            <MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/>
            <MyFooter :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/>
            </div>
        </div>
    </div>
</template>

<script>
    import MyHeader from './components/MyHeader.vue'
    import MyList from './components/MyList.vue'
    import MyFooter from './components/MyFooter.vue'

    export default {
        name:'App',
        components: { MyHeader,MyList,MyFooter },
        data() {
            return {
                todos:JSON.parse(localStorage.getItem('todos')) || []
            }
        },
        methods:{
            //添加一个todo
            addTodo(todoObj){
                this.todos.unshift(todoObj)
            },
            //勾选or取消勾选一个todo
            checkTodo(id){
                this.todos.forEach((todo)=>{
                    if(todo.id === id) todo.done = !todo.done
                })
            },
            //删除一个todo
            deleteTodo(id){
                this.todos = this.todos.filter(todo => todo.id !== id)
            },
            //全选or取消勾选
            checkAllTodo(done){
                this.todos.forEach(todo => todo.done = done)
            },
            //删除已完成的todo
            clearAllTodo(){
                this.todos = this.todos.filter(todo => !todo.done)
            }
        },
        watch:{
            todos:{
                deep:true,
                handler(value){
                    localStorage.setItem('todos',JSON.stringify(value))
                }
            }
        }
    }
</script>

<style>
  
</style>

MyHeader.vue

<template>
    <div class="todo-header">
        <input type="text" placeholder="请输入你的任务名称，按回车键确认" @keydown.enter="add" v-model="title"/>
    </div>
</template>

<script>
    import {nanoid} from 'nanoid'
    export default {
        name:'MyHeader',
        data() {
            return {
                title:''
            }
        },
        methods:{
            add(){
                if(!this.title.trim()) return
                const todoObj = {id:nanoid(),title:this.title,done:false}
                this.$emit('addTodo',todoObj)
                this.title = ''
            }
        }
    }
</script>

<style scoped>
   
</style>

MyFooter.vue

<template>
    <div class="todo-footer" v-show="total">
        <label>
            <input type="checkbox" v-model="isAll"/>
        </label>
        <span>
            <span>已完成{{doneTotal}}</span> / 全部{{total}}
        </span>
        <button class="btn btn-danger" @click="clearAll">清除已完成任务</button>
    </div>
</template>

<script>
    export default {
        name:'MyFooter',
        props:['todos'],
        computed:{
            doneTotal(){
                return this.todos.reduce((pre,todo)=> pre + (todo.done ? 1 : 0) ,0)
            },
            total(){
                return this.todos.length
            },
            isAll:{
                get(){
                    return this.total === this.doneTotal && this.total > 0
                },
                set(value){
                    this.$emit('checkAllTodo',value)
                }
            }
        },
        methods:{
            clearAll(){
                this.$emit('clearAllTodo')
            }
        }
    }
</script>

<style scoped>
   
</style>

全局事件总线——处理其他组件关系传递数据

在前面通过props可以解决父组件传递数据给子组件，也可以通过自定义事件将子组件数据传递给父组件，但是我们没法完成

全局事件总线是一种可以在任意组件间通信的方式，本质上就是一个对象。它必须满足以下条件：

  1. 所有的组件对象都必须能看见他
  2. 这个对象必须能够使用 o n 、 on、 on、emit和$off方法去绑定、触发和解绑事件

src/main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bus = this //安装全局事件总线
	}
})

App.vue

<template>
	<div class="app">
		<School/>
		<Student/>
	</div>
</template>

<script>
	import Student from './components/Student'
	import School from './components/School'

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

<style scoped>
	.app{
		background-color: gray;
		padding: 5px;
	}
</style>

Student.vue

<template>
	<div class="student">
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<button @click="sendStudentName">把学生名给School组件</button>
	</div>
</template>

<script>
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男'
			}
		},
		methods: {
			sendStudentName(){
				this.$bus.$emit('demo',this.name)
			}
		}
	}
</script>

<style scoped>
	.student{
		background-color: pink;
		padding: 5px;
		margin-top: 30px;
	}
</style>

School.vue

<template>
	<div class="school">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</template>

<script>
	export default {
		name:'School',
		data() {
			return {
				name:'尚硅谷',
				address:'北京',
			}
		},
		methods:{
			demo(data) {
				console.log('我是School组件，收到了数据：',data)
			}
		},
		mounted() {
			this.$bus.$on('demo',this.demo)
		},
		beforeDestroy() {
			this.$bus.$off('demo')
		},
	}
</script>

<style scoped>
	.school{
		background-color: skyblue;
		padding: 5px;
	}
</style>

总结：

全局事件总线（GlobalEventBus）：

  • 一种组件间通信的方式，适用于任意组件间通信

安装全局事件总线：

new Vue({
   	...
   	beforeCreate() {
   		Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
   	},
    ...
})

image-20230327222216787

  • 为什么我们选用Vue的原型对象，我们既然是全局的，肯定能让所有的组件实例对象和Vue的实例对象都能找到，一看就是需要我们的Vue的原型对象
    • 补充一下，我们的Vue.extends每次返回的VueComponent这个构造函数都是新建的，所以对应的VueComponent的实例对象访问的VueComponent的原型对象也不同

使用事件总线：

  • 接收数据：因为要被操作的组件是A，A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身
export default {
    methods(){
        demo(data){...}
    }
    ...
    mounted() {
        this.$bus.$on('xxx',this.demo)
    }
}
  • 提供数据：this. b u s . bus. bus.emit(‘xxx’,data)，因为谁想去操作A组件，那就使用emit去触发他的对应自定义事件
methods: {
	sendStudentName(){
		this.$bus.$emit('demo',this.name)
	}
}
  • 最好在A的beforeDestroy钩子中，用$off去解绑当前组件所用到的事件
export default {
	beforeDestroy() {
		this.$bus.$off('demo')
	},
}

使用全局总线事件优化Todo-List

先分析以下改改造那些

  • 父传子 用props最方便 不需要改造
  • 子传父 用自定义也很方便，也不需要
  • 其他的组件关系之间传递就用全局总线——所以改造MyItem传给App这种孙传爷的关系

src/main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
    el:"#app",
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.$bus = this
    }
})

App.vue

<template>
    <div id="root">
        <div class="todo-container">
            <div class="todo-wrap">
            <MyHeader @addTodo="addTodo"/>
            <MyList :todos="todos"/>
            <MyFooter :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/>
            </div>
        </div>
    </div>
</template>

<script>
    import MyHeader from './components/MyHeader.vue'
    import MyList from './components/MyList.vue'
    import MyFooter from './components/MyFooter.vue'

    export default {
        name:'App',
        components: { MyHeader,MyList,MyFooter },
        data() {
            return {
                todos:JSON.parse(localStorage.getItem('todos')) || []
            }
        },
        methods:{
            //添加一个todo
            addTodo(todoObj){
                this.todos.unshift(todoObj)
            },
            //勾选or取消勾选一个todo
            checkTodo(id){
                this.todos.forEach((todo)=>{
                    if(todo.id === id) todo.done = !todo.done
                })
            },
            //删除一个todo
            deleteTodo(id){
                this.todos = this.todos.filter(todo => todo.id !== id)
            },
            //全选or取消勾选
            checkAllTodo(done){
                this.todos.forEach(todo => todo.done = done)
            },
            //删除已完成的todo
            clearAllTodo(){
                this.todos = this.todos.filter(todo => !todo.done)
            }
        },
        watch:{
            todos:{
                deep:true,
                handler(value){
                    localStorage.setItem('todos',JSON.stringify(value))
                }
            }
        },
        mounted(){
            this.$bus.$on('checkTodo',this.checkTodo)
            this.$bus.$on('deleteTodo',this.deleteTodo)
        },
        beforeDestroy(){
            this.$bus.$off(['checkTodo','deleteTodo'])
        }
    }
</script>

<style>
   ...
</style>

MyItem.vue

<template>
    <li>
        <label>
            <input type="checkbox" :checked="todo.done" @click="handleCheck(todo.id)"/>
            <span>{{todo.title}}</span>
        </label>
        <button class="btn btn-danger" @click="handleDelete(todo.id,todo.title)">删除</button>
    </li>
</template>

<script>
    export default {
        name:'MyItem',
        props:['todo'],
        methods:{
            handleCheck(id){
                this.$bus.$emit('checkTodo',id)
            },
            handleDelete(id,title){
                if(confirm("确定删除任务："+title+"吗？")){
                    this.$bus.$emit('deleteTodo',id)
                }
            }
        }
    }
</script>

<style scoped>
  ....
</style>

消息的订阅与发布

需要我们额外去安装对应的包

npm i pubsub-js

其实用法跟全局总线差不多，我们最好还是用全局总线，因为是vue自带的，但是还是可以了解一下

src/components/School.vue

<template>
	<div class="school">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</template>

<script>
	import pubsub from 'pubsub-js'

	export default {
		name:'School',
		data() {
			return {
				name:'尚硅谷',
				address:'北京',
			}
		},
		methods:{
			demo(msgName,data) {
				console.log('我是School组件，收到了数据：',data)
			}
		},
		mounted() {
			this.pubId = pubsub.subscribe('demo',this.demo) //订阅消息
          //类似this.$bus.$on('xxx',this.demo)
		},
		beforeDestroy() {
			pubsub.unsubscribe(this.pubId) //取消订阅
           //类似this.$bus.$off('demo')
		}
	}
</script>

<style scoped>
	.school{
		background-color: skyblue;
		padding: 5px;
	}
</style>


<template>
	<div class="student">
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<button @click="sendStudentName">把学生名给School组件</button>
	</div>
</template>

<script>
	import pubsub from 'pubsub-js'

	export default {
		name:'Student',
		data() {
			return {
				name:'JOJO',
				sex:'男',
			}
		},
		methods: {
			sendStudentName(){
				pubsub.publish('demo',this.name) //发布消息
             //类似this.$bus.$emit('demo',this.name)
			}
		}
	}
</script>

<style scoped>
	.student{
		background-color: pink;
		padding: 5px;
		margin-top: 30px;
	}
</style>

总结：

消息订阅与发布（pubsub）：

  • 消息订阅与发布是一种组件间通信的方式，适用于任意组件间通信

  • 使用步骤：

    • 安装pubsub：npm i pubsub-js

    • 引入：import pubsub from ‘pubsub-js’

  • 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身

export default {
    methods(){
        demo(data){...}
    }
    ...
    mounted() {
		this.pid = pubsub.subscribe('xxx',this.demo)
    }
}
  • 提供数据：pubsub.publish(‘xxx’,data)
  • 最好在beforeDestroy钩子中，使用pubsub.unsubscribe(pid)取消订阅

$nextTick

$nextTick(回调函数)可以将回调延迟到下次 DOM 更新循环之后执行

使用$nextTick优化Todo-List

App.vue

<template>
    <div id="root">
        <div class="todo-container">
            <div class="todo-wrap">
            <MyHeader @addTodo="addTodo"/>
            <MyList :todos="todos"/>
            <MyFooter :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/>
            </div>
        </div>
    </div>
</template>

<script>
    import pubsub from 'pubsub-js'
    import MyHeader from './components/MyHeader.vue'
    import MyList from './components/MyList.vue'
    import MyFooter from './components/MyFooter.vue'


    export default {
        name:'App',
        components: { MyHeader,MyList,MyFooter },
        data() {
            return {
                todos:JSON.parse(localStorage.getItem('todos')) || []
            }
        },
        methods:{
            //添加一个todo
            addTodo(todoObj){
                this.todos.unshift(todoObj)
            },
            //勾选or取消勾选一个todo
            checkTodo(_,id){
                this.todos.forEach((todo)=>{
                    if(todo.id === id) todo.done = !todo.done
                })
            },
            //删除一个todo
            deleteTodo(id){
                this.todos = this.todos.filter(todo => todo.id !== id)
            },
            //更新一个todo
			updateTodo(id,title){
				this.todos.forEach((todo)=>{
					if(todo.id === id) todo.title = title
				})
			},
            //全选or取消勾选
            checkAllTodo(done){
                this.todos.forEach(todo => todo.done = done)
            },
            //删除已完成的todo
            clearAllTodo(){
                this.todos = this.todos.filter(todo => !todo.done)
            }
        },
        watch:{
            todos:{
                deep:true,
                handler(value){
                    localStorage.setItem('todos',JSON.stringify(value))
                }
            }
        },
        mounted(){
            this.pubId = pubsub.subscribe('checkTodo',this.checkTodo)
            this.$bus.$on('deleteTodo',this.deleteTodo)
            this.$bus.$on('updateTodo',this.updateTodo)
        },
        beforeDestroy(){
            pubsub.unsubscribe(this.pubId)
            this.$bus.$off('deleteTodo')
            this.$bus.$off('updateTodo')
        }
    }
</script>

<style>

</style>

MyItem.vue

<template>
    <li>
        <label>
            <input type="checkbox" :checked="todo.done" @click="handleCheck(todo.id)"/>
            <span v-show="!todo.isEdit">{{todo.title}}</span>
            <input type="text" v-show="todo.isEdit" :value="todo.title" @blur="handleBlur(todo,$event)" ref="inputTitle">
        </label>
        <button class="btn btn-danger" @click="handleDelete(todo.id,todo.title)">删除</button>
        <button class="btn btn-info" v-show="!todo.isEdit" @click="handleEdit(todo)">编辑</button>
    </li>
</template>

<script>
    import pubsub from 'pubsub-js'
    export default {
        name:'MyItem',
        props:['todo'],
        methods:{
            handleCheck(id){                    
                pubsub.publish('checkTodo',id)
            },
            handleDelete(id,title){
                if(confirm("确定删除任务："+title+"吗？")){
                    this.$bus.$emit('deleteTodo',id)
                }
            },
            handleEdit(todo){
                // 如果todo自身有isEdit属性就将isEdit改成true
				if(todo.prototype.hasOwnProperty.call(todo,'isEdit')){
					todo.isEdit = true
				}else{
                 // 如果没有就向todo中添加一个响应式的isEdit属性并设为true
					this.$set(todo,'isEdit',true)
				}
                // 当Vue重新编译模板之后执行$nextTick()中的回调函数
                this.$nextTick(function(){
                    // 使input框获取焦点
                    this.$refs.inputTitle.focus()
                })
			},
            // 当input框失去焦点时更新
            handleBlur(todo,event){
                todo.isEdit = false
				if(!event.target.value.trim()) return alert('输入不能为空！')
				this.$bus.$emit('updateTodo',todo.id,event.target.value)
            }
        }
    }
</script>

<style scoped>
   
</style>

总结：

$nextTick：

  1. 语法：this.$nextTick(回调函数)
  2. 作用：在下一次 DOM 更新结束后执行其指定的回调
  3. 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行
    • 比如我们的改变todo.isEdit的属性，如果isEdit值改变了，我们的Vue不会马上更新，会获取焦点后再更新，那么我们的获取焦点也就没有效果，所以加上this.$nextTick

过度和动画

  • 用来修饰我们的元素在出现和消失的时候对应播放的样式

transition需要触发一个事件才会随着时间改变其CSS属性；
animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果
1）动画不需要事件触发，过渡需要。
2）过渡只有一组（两个：开始-结束）关键帧，动画可以设置多个

App.vue

<template>
    <div id="root">
        <MyAnimation/>
        <MyTransition/>
        <MyTransitionGroup/>
        <ThirdPartAnimation/>
    </div>
</template>

<script>
    import MyAnimation from './components/MyAnimation.vue'
    import MyTransition from './components/MyTransition.vue'
    import MyTransitionGroup from './components/MyTransitionGroup.vue'
    import ThirdPartAnimation from './components/ThirdPartAnimation.vue'

    export default {
        name:'App',
        components: { MyAnimation,MyTransition,MyTransitionGroup,ThirdPartAnimation },
    }
</script>

MyAnimation.vue

<template>
    <div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition name="jojo" appear>
			<h1 v-show="isShow">你好啊！</h1>
		</transition>
	</div>
</template>

<script>
export default {
    name:'MyTitle',
	data() {
		return {
			isShow:true
		}
	}
}
</script>

<style scoped>
	h1{
		background-color: orange;
	}

	.jojo-enter-active{
		animation: jojo 0.5s linear;
	}

	.jojo-leave-active{
		animation: jojo 0.5s linear reverse;
	}

	@keyframes jojo {
		from{
			transform: translateX(-100%);
		}
		to{
			transform: translateX(0px);
		}
	}
</style>
  • vue想实现动画效果。将对应元素用transition标签包裹，如果给该标签加上name属性，去找对应的.name属性-enter/leave-active样式，如果不写name属性，则是.v-enter/leave-active样式
  • appear表示进入页面时，就播放一次动画

MyTransition.vue

<template>
    <div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition name="jojo" appear>
			<h1 v-show="isShow">你好啊！</h1>
		</transition>
	</div>
</template>

<script>
export default {
    name:'MyTitle',
	data() {
		return {
			isShow:true
		}
	}
}
</script>

<style scoped>
	h1{
		background-color: orange;
	}

	.jojo-enter,.jojo-leave-to{
		transform: translateX(-100%);
	}

	.jojo-enter-to,.jojo-leave{
		transform: translateX(0);
	}

	.jojo-enter-active,.jojo-leave-active{
		transition: 0.5s linear;
	}
</style>

MyTransitionGroup.vue

<template>
    <div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition-group name="jojo" appear>
			<h1 v-show="isShow" key="1">你好啊！</h1>
			<h1 v-show="!isShow" key="2">大笨蛋</h1>
		</transition-group>
	</div>
</template>

<script>
export default {
    name:'MyTitle',
	data() {
		return {
			isShow:true
		}
	}
}
</script>
·
<style scoped>
	h1{
		background-color: orange;
	}

	.jojo-enter,.jojo-leave-to{
		transform: translateX(-100%);
	}

	.jojo-enter-to,.jojo-leave{
		transform: translateX(0);
	}

	.jojo-enter-active,.jojo-leave-active{
		transition: 0.5s linear;
	}
</style>

ThirdPartAnimation.vue

<template>
    <div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition-group 
			appear
			name="animate__animated animate__bounce"
			enter-active-class="animate__backInUp" 
			leave-active-class="animate__backOutUp"
		>
			<h1 v-show="isShow" key="1">你好啊！</h1>
			<h1 v-show="!isShow" key="2">大笨蛋</h1>
		</transition-group>
	</div>
</template>

<script>
	import 'animate.css'
	export default {
		name:'MyTitle',
		data() {
			return {
				isShow:true
			}
		}
	}
</script>

<style scoped>
	h1{
		background-color: orange;
	}

</style>

总结：

Vue封装的过度与动画：

  • 作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名

image-20230328095530976

写法：

  • 准备好样式

    • 元素进入的样式

      • v-enter：进入的起点

      • v-enter-active：进入过程中

      • v-enter-to：进入的终点

    • 元素离开的样式：

      • v-leave：离开的起点

      • v-leave-active：离开过程中

      • v-leave-to：离开的终点

  • 使用<transition>包裹要过度的元素，并配置name属性：

<transition name="hello">
	<h1 v-show="isShow">你好啊！</h1>
</transition>
  • 备注：若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都要指定key值

过度和动画改造TodoList

我们的TodoList中会被删除，添加的是我们的MyItem组件

<template>
    <ul class="todo-main">
        <transition-group name="todo" appear>
            <MyItem v-for="todo in todos" :key="todo.id" :todo="todo"/>
        </transition-group>
    </ul>
</template>

<script>
    import MyItem from './MyItem.vue'

    export default {
        name:'MyList',
        components:{MyItem},
        props:['todos']
    }
</script>

<style scoped>
    .todo-main {
        margin-left: 0px;
        border: 1px solid #ddd;
        border-radius: 2px;
        padding: 0px;
    }

    .todo-empty {
        height: 40px;
        line-height: 40px;
        border: 1px solid #ddd;
        border-radius: 2px;
        padding-left: 5px;
        margin-top: 10px;
    }

    .todo-enter-active{
		animation: todo 0.5s linear;
	}

	.todo-leave-active{
		animation: todo 0.5s linear reverse;
	}

	@keyframes todo {
		from{
			transform: translateX(100%);
		}
		to{
			transform: translateX(0px);
		}
	}
</style>

插槽Slot

为什么我们需要插槽呢？——说直接点，就是想定制化组件，什么叫定制化组件？

image-20230328150437403

  • 我们很明显能看出来，这三个蓝色的框都是相同的组件，只是根据我们传入的数据不同，从而可以显示不同的数据

image-20230328150327310

  • 这个图就可以体现出来什么叫定制化？我们的第一个组件实例对象显示的是图片，第二是列表，第三个是一个视频，这就不是光光靠我们传入的数据不同，就可以做到的，因为照片和视频和列表的展示是需要不同的标签实现，这时候就体现出我们的插槽的作用

默认插槽

Category.vue

<template>
	<div class="category">
		<h3>{{title}}分类</h3>
		<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
		<slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
	</div>
</template>

<script>
	export default {
		name:'Category',
		props:['title']
	}
</script>

<style scoped>
	.category{
		background-color: skyblue;
		width: 200px;
		height: 300px;
	}
	h3{
		text-align: center;
		background-color: orange;
	}
	video{
		width: 100%;
	}
	img{
		width: 100%;
	}
</style>
  • 用slot表示这是一个插槽，这里可以进行定制化内容
<template>
	<div class="container">
		<Category title="美食" >
			<img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
		</Category>

		<Category title="游戏" >
			<ul>
				<li v-for="(g,index) in games" :key="index">{{g}}</li>
			</ul>
		</Category>

		<Category title="电影">
			<video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
		</Category>
	</div>
</template>

<script>
	import Category from './components/Category'
	export default {
		name:'App',
		components:{Category},
		data() {
			return {
				games:['植物大战僵尸','红色警戒','空洞骑士','王国']
			}
		},
	}
</script>

<style scoped>
	.container{
		display: flex;
		justify-content: space-around;
	}
</style>
  • 对slot进行传入对应格式，进行定制化

具名插槽

对于一个组件，可能会出现多个插槽的未知，所以我们在使用的时候需要指定用哪个插槽

<template>
	<div class="category">
		<h3>{{title}}分类</h3>
		<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
		<slot name="center">我是一些默认值，当使用者没有传递具体结构时，我会出现1</slot>
       <slot name="footer">我是一些默认值，当使用者没有传递具体结构时，我会出现2</slot>
	</div>
</template>

<script>
	export default {
		name:'Category',
		props:['title']
	}
</script>

<style scoped>
	.category{
		background-color: skyblue;
		width: 200px;
		height: 300px;
	}
	h3{
		text-align: center;
		background-color: orange;
	}
	video{
		width: 100%;
	}
	img{
		width: 100%;
	}
</style>

App.vue

<template>
	<div class="container">
		<Category title="美食" >
			<img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
			<a slot="footer" href="http://www.atguigu.com">更多美食</a>
		</Category>

		<Category title="游戏" >
			<ul slot="center">
				<li v-for="(g,index) in games" :key="index">{{g}}</li>
			</ul>
			<div class="foot" slot="footer">
				<a href="http://www.atguigu.com">单机游戏</a>
				<a href="http://www.atguigu.com">网络游戏</a>
			</div>
		</Category>

		<Category title="电影">
			<video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
			<template v-slot:footer>
				<div class="foot">
					<a href="http://www.atguigu.com">经典</a>
					<a href="http://www.atguigu.com">热门</a>
					<a href="http://www.atguigu.com">推荐</a>
				</div>
				<h4>欢迎前来观影</h4>
			</template>
		</Category>
	</div>
</template>

<script>
	import Category from './components/Category'
	export default {
		name:'App',
		components:{Category},
		data() {
			return {
				games:['植物大战僵尸','红色警戒','空洞骑士','王国']
			}
		},
	}
</script>

<style>
	.container,.foot{
		display: flex;
		justify-content: space-around;
	}
	h4{
		text-align: center;
	}
</style>
  • 一个插槽可以被使用多次
  • v-slot:这种用法只能在<template>中使用，其<template >会在解析之后消失
    • <template v-slot:footer>是新语法
    • <template slot="footer">是旧语法

image-20230328153255925

作用域插槽

也就是数据在我们的组件中，而我们的使用这个组件使用者在填充对应的插槽的时候，需要其这个组件中的数据，作用域插槽能够实现这个功能

Category.vue

<template>
	<div class="category">
		<h3>{{title}}分类</h3>
		<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
		<slot :games="games">我是一些默认值，当使用者没有传递具体结构时，我会出现1</slot>
	</div>
</template>

<script>
	export default {
		name:'Category',
		props:['title'],
        data() {
			return {
				games:['植物大战僵尸','红色警戒','空洞骑士','王国']
			}
		},
	}
</script>

<style scoped>
	.category{
		background-color: skyblue;
		width: 200px;
		height: 300px;
	}
	h3{
		text-align: center;
		background-color: orange;
	}
	video{
		width: 100%;
	}
	img{
		width: 100%;
	}
</style>
  • 注意我们的games数据在我们的Category.vue中，而使用我们的这个组件的是App.vue
  • <slot :games="games"></slot> :games=“games”,将数据放入我们的插槽，然后使用者调用插槽的时候，就可以拿到数据
    • 但是这种方式，要求我们使用<template>来使用插槽接收数据

App.vue

<template>
	<div class="container">
		<Category title="游戏" >
			<template scope="category">
				<ul>
					<li v-for="(g,index) in category.games" :key="index">{{g}}</li>
				</ul>
			</template>
		</Category>

		<Category title="游戏" >
			<template scope="category">
				<ol>
					<li v-for="(g,index) in category.games" :key="index">{{g}}</li>
				</ol>
			</template>
		</Category>

		<Category title="游戏" >
			<template slot-scope="category">
				<h4 v-for="(g,index) in category.games" :key="index">{{g}}</h4>
			</template>
		</Category>
	</div>
</template>

<script>
	import Category from './components/Category'
	export default {
		name:'App',
		components:{Category}
	}
</script>

<style>
	.container,.foot{
		display: flex;
		justify-content: space-around;
	}
	h4{
		text-align: center;
	}
</style>

在这里插入图片描述

总结

插槽：

  • 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于==父组件 > 子组件

  • 分类：默认插槽、具名插槽、作用域插槽

使用方式：

默认插槽：

父组件中：
        <Category>
           	<div>html结构1</div>
        </Category>
子组件中：
        <template>
            <div>
               	<slot>插槽默认内容...</slot>
            </div>
        </template>

具名插槽：

 父组件中：
 <Category>
       <template slot="center">
           <div>html结构1</div>
       </template>
 		 <template v-slot:footer>
       		<div>html结构2</div>
    	 </template>
</Category>
子组件中：
  		  <template>
            <div>
               	<slot name="center">插槽默认内容...</slot>
                <slot name="footer">插槽默认内容...</slot>
            </div>
        </template>
  • 名字对应使用对应名字的插槽，未指定名字则放置在默认插槽
  • v-slot只能添加在tenplate上

作用域插槽：

  • 理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

具体编码：

父组件中：
		<Category>
			<template scope="scopeData">
				<!-- 生成的是ul列表 -->
				<ul>
					<li v-for="g in scopeData.games" :key="g">{{g}}</li>
				</ul>
			</template>
		</Category>

		<Category>
			<template slot-scope="scopeData">
				<!-- 生成的是h4标题 -->
				<h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
			</template>
		</Category>

子组件中：
        <template>
            <div>
                <slot :games="games"></slot>
            </div>
        </template>
		

        <script>
            export default {
                name:'Category',
                props:['title'],
                //数据在子组件自身
                data() {
                    return {
                        games:['红色警戒','穿越火线','劲舞团','超级玛丽']
                    }
                },
            }
        </script>

具名和作用域同时使用

旧用法

<slot-example>
  <template slot="default" slot-scope="slotProps"><!-- 使用两个指令分别指定插槽name和插槽prop -->
    {{ slotProps.msg }}
  </template>
</slot-example>

新用法

<current-user>
  <template v-slot:default="slotProps"><!-- 使用一个指令同时指定插槽name和插槽prop -->
    {{ slotProps.user.firstName }}
  </template>
</current-user>
响应式Web开发项目教程 第二章
12-27
在"响应式Web开发项目教程 第二章"中，我们将深入探讨这些关键知识点。 首先，HTML5是现代Web开发的基础，它引入了许多新的元素和特性，以支持更好的结构化内容和多媒体处理。例如，`<header>`、`<footer>`、`...
用c#语言做课程表系统代码,winform用datagridview制作课程表实例
weixin_35822534的博客
05-25 1821
本文实例讲述了winform用datagridview制作课程表的方法。分享给大家供大家参考。具体分析如下：课程表的最终效果如下图所示：具体方法如下：1.首先定义一个datatable，并添加列集，行集。 一张课程表的表结构就出来了。(如上图表结构式4行8列)只有表有结构、有数据才可以绑到datagridivew控件里。否则绑上了，也没得显示。代码如下：int num , week ; // ...
基于SSM+VUE框架的企业合规管理系统.docx
10-26
### 第二章 SSN+VUE框架介绍 2.1 **SSM框架概述** SSM框架由Spring、SpringMVC和MyBatis组成。Spring提供依赖注入和面向切面编程，SpringMVC处理HTTP请求，MyBatis则负责数据库操作，三者协同工作，简化了Java Web...
第3章 前端面试技能拼第3章 前端面试技能拼
03-13
- **React**：掌握React组件化开发，状态管理和生命周期方法，以及React Hooks的使用。 - **Vue**：理解Vue的MVVM模式，组件、指令、计算属性和侦听器的使用，以及Vuex状态管理。 - **Angular**：学习Angular的...
HTML第五章-工具
12-16
Sass、LESS和Stylus是CSS预处理器，它们引入变量、嵌套规则、函数等编程概念，使得CSS编写更加模块化和可维护。 十、性能优化工具 PageSpeed Insights、Lighthouse等工具可以分析网页性能，提供优化建议，包括减少...
第二章第十四节——文件操作控件
09-03
在本章第十四节中，我们将深入探讨文件操作控件的概念、功能以及如何在不同编程环境中实现它们。 首先，了解文件操作控件的基本概念是必要的。文件操作控件是UI中的组件，通常表现为按钮、对话框、菜单项等形式，...
实战threeJS数字孪生开源 数字工厂
一个爱编程的人专栏
01-14 1005
该项目结合了现代前端技术栈，包括Vue 3、Element Plus、Three.js和ECharts等，实现了路线巡逻、巡逻轨迹展示、第一人称视角、视角切换、着色器渲染、设备定位、区域检测以及进入区域告警提示等核心功能。它结合了现代前端技术栈，实现了路线巡逻、巡逻轨迹展示、第一人称视角、视角切换、着色器渲染、设备定位、区域检测以及进入区域告警提示等核心功能。：作为数据可视化库，ECharts 提供了丰富的图表类型，用于展示生产数据、设备状态等信息，帮助用户更好地理解和分析生产数据。
vue 前端优化性能优化方法
lfl18326162160的博客
01-17 738
</div></section>
智能化的城市管理解决方案，智慧城管执法系统源码，微服务架构、Java编程语言、Spring Boot框架、Vue.js前端技术
zmm201453的博客
01-14 557
智慧城管执法系统是一种高度信息化、智能化的城市管理解决方案，它利用现代信息技术，如微服务架构、Java编程语言、Spring Boot框架、Vue.js前端技术、Element UI组件库、UniApp跨平台开发工具以及MySQL数据库等，构建了一个综合性的执法管理平台。支持事件处理的全流程管理，包括案件登记、立案、审批、处罚、执行、结案等，同时提供执法队员的日常巡查、执法记录、案件管理等工具。包括机构、部门、岗位、职务的管理，以及执法队员的调度和考勤管理，确保执法队伍的高效运作。
65.在 Vue 3 中使用 OpenLayers 绘制带有箭头的线条
小彭的博客
01-14 553
在现代的前端开发中，地图已经成为许多项目的核心功能之一。OpenLayers 是一个强大的开源地图库，它提供了丰富的功能和高度的定制化支持。在本篇文章中，我将向大家展示如何在 Vue 3 中使用 OpenLayers 绘制带有箭头的线条。在地图上动态绘制线条；在线条的每段末端添加箭头；箭头方向自动调整，以指示线条的方向。本文介绍了如何在 Vue 3 中结合 OpenLayers 使用矢量图层和交互功能，实现绘制带箭头的线条。通过这种方法，您可以轻松实现诸如路径指示、流向显示等功能。
vue3 + element-plus + el-table 实现三层嵌套表格（含分页）
weixin_50559423的博客
01-14 356
确保每次展开收起 都要将子级收缩起来，并且要把数据及入参清空！当然如果你想要多个行并列展开的话，有一个思路就是将分页 及 相关参数存到每条数据里，要将数据初始化好！项目需求 表格嵌套表格，一共三层表格，第二层基于第一层数据显示（流加载），第三层基于第二层数据（分页加载）。首先我这里使用的是 element-plus 的表格去实现的（含有扩展行 expand配置项），这个图没什么难得，就是逻辑交互可能稍微复杂一点！那个第二层数据 流加载，要确保有一定的高度哈！
Vue.js组件开发-如何实现表头搜索
LCG元的博客
01-16 418
在Vue.js组件开发中，实现表头搜索通常涉及在表格组件的表头添加输入框，并让用户能够输入搜索关键字来过滤表格数据。
Vue.js组件开发-实现后端返回二进制文件在浏览器自动下载
最新发布
LCG元的博客
01-17 403
在Vue.js组件开发中，若需实现从后端获取二进制文件并触发浏览器自动下载，可以利用axios（或其他HTTP客户端库）来向后端发送请求，随后利用Blob对象及URL.createObjectURL方法生成一个可供下载的链接，最后通过创建一个隐藏的元素或利用window.location来启动下载。
毕业就业信息|基于Vue的毕业就业信息管理系统的设计与实现(源码+数据库+文档)
伟庭的博客
01-17 941
毕业就业信息管理系统在对开发工具的选择上也很慎重，为了便于开发实现，选择的开发工具为Eclipse，选择的数据库工具为Mysql。以此搭建开发环境实现毕业就业信息管理系统的功能。其中管理员管理用户，新闻公告。毕业就业信息管理系统是一款运用软件开发技术设计实现的应用系统，在信息处理上可以达到快速的目的，不管是针对数据添加，数据维护和统计，以及数据查询等处理要求，毕业就业信息管理系统都可以轻松应对。关键词：毕业就业信息管理系统；SpringBoot框架，系统分析，数据库设计。
【Vue】使用 Pinia 进行状态管理
qq_45687669的博客
01-16 258
下面将展示如何在 Vue 3 项目中使用 Pinia 进行状态管理。这个示例包括多个 store，使用 getters 和 actions，以及在组件中使用这些 store。
【HTML+CSS+JS+VUE】web前端教程-35-字体图标
小啊宇的博客
01-14 102
兼容性：网页字体支持所有现代浏览器，包括IE低版本。轻量性：加载速度快，减少http请求。灵活性：可以利用CSS设置大小颜色等。5、选择font-class引用。2、选取图标或搜索图标。
基于Java+SpringMvc+Vue技术的宠物分享平台
mr_lili_111的博客
01-11 2145
Java是一种面向对象的编程语言，目前由美国Oracle公司开发。自1995年上线以来，已经广泛应用于Web开发、桌面应用开发等多个领域。Java语言的特点包括：1、面向对象：Java提供了类、接口和继承等面向对象的特性，支持单继承和多接口继承，以及动态绑定。2、分布式：Java支持Internet应用的开发，提供了网络应用编程接口(java.net)，支持RMI(远程方法激活)机制，适合开发分布式应用。3、健壮性：Java的强类型机制、异常处理、垃圾自动收集等特性保证了程序的健壮性。
vue 基础一
小画家
01-17 103
vite是新一代前端构建工具，vitejs.cn。
深入探索Vue.js 3中基于Composition API的动态组件开发
桂月二二博客
01-16 850
动态组件加载是指在运行时根据需求动态地创建、渲染或销毁组件，而不是在应用初始化时直接加载所有组件。这种技术可以帮助我们优化性能、减少初始加载时间，同时提高代码的灵活性。动态组件的开发在Vue 3中得到了更大的灵活性与性能优化支持。结合Composition API和动态导入机制，我们不仅能够按需加载组件，还能通过缓存与懒加载优化整体用户体验。希望本文能为您的项目带来启发，帮助更高效地构建复杂的前端应用。如果您对该技术有更多问题或建议，欢迎留言讨论！
SpringBoot+Vue开发供应商管理系统源码详解
第二章 相关技术介绍：本章是整个系统的技术基础，详细介绍了Java语言、Vue.js框架和MySQL数据库的知识点： - Java语言：一种广泛使用的面向对象的编程语言，是后端开发的核心技术之一。开发者应了解Java的面向对象...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

库里不会投三分

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值