第二章Vue组件化编程

已于 2023-03-29 12:05:23 修改
阅读量880 收藏 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>
库里不会投三分
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
vue组件化编程-todoList案例.zip
07-14
vue组件化编程-todoList案例.zip
第二章 Vue组件化编程
m0_56878426的博客
01-30 662
模块定义：向外提供特定功能的 js 程序，一般就是一个 js 文件为什么用：js 文件很多很复杂作用：复用 js，简化 js 的编写，提高 js 运行效率当应用中的 js 都以模块来编写的，那这个应用就是一个模块化的应用组件定义：用来实现局部功能的代码和资源的集合（html/css/js/image…）为什么用：一个界面的功能很复杂作用：复用编码，简化项目编码，提高运行效率当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用。
第二章--Vue组件化编程
qq_43527345的博客
12-21 433
Vue组件化编程 为什么要使用组件化编程？ 传统：顶部 导航 内容 底部。四个css，html中引入。依赖关系混乱、不好维护 1.1、模块与组件、模块化与组件化 1.1.1、模块 向外提供特定功能的js程序，一般就是一个js文件 js文件很多并且复杂 复用js，简化js的编写，提高js运行效率 1.1.2、组件 实现应用中局部功能代码和资源的集合 一个界面的功能很复杂 复用编码，简化项目编码，提高运行效率 1.1.3、模块化 当应用中的js是以模块来编写的，这个应用就是一个模块化的应用 1.1.4、组件化
Vue从入门到精通——第二章 Vue组件化编程
m0_63853448的博客
09-06 131
1.模块与组件、模块化与组件化 2.非单文件组件 3.组件的嵌套
第 2 章：Vue组件化编程
qq_40832034的博客
11-12 62
使用。
Vue组件化开发思考
08-28
主要介绍了Vue组件化开发的思考以及相关的原理介绍，如果你对此有兴趣，可以学习参考下。
vue - Vue组件化编程.doc
07-08
vue - Vue组件化编程.doc
vue第三章组件.pdf
08-12
vue 入门到进阶第三章 #资源达人分享计划 # 技术文档
Vue关于组件化开发知识点详解
10-15
在本篇文章里，小编给大家分享的是关于Vue关于组件化开发知识点详解内容，有兴趣的朋友们可以学习下。
HOW - Canvas 入门系列之基于vue-konva的多维表格（四）
weixin_58540586的博客
05-17 1192
今天我们将将基于vue-konva 实现的一个表格渲染的组件。
WEB转Flutter基础学习笔记（内含vue和flutter对比）
小易不止于搬砖的博客
05-17 682
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue中的事件
weixin_43390711的博客
05-16 165
需要使用emit方法，emit(‘事件名’,参数)自定义事件名的规范（script中用小驼峰，模板中用短横线）1、组合api中2、setup语法糖中(非TS)3、setup语法糖中（使用TS）}>()
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1131
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
Vue.js的发展史（一）
2301_79683791的博客
05-15 760
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
Vue3实战笔记（23）—路由Vue-Router 实战指南（关于路由命名那点事儿）
山花的博客
05-15 1042
除了 path 之外，你还可以为任何路由提供 name。在 Vue Router 中，命名路由是一种通过指定名称来标识路由的方式，而不是使用路径。这为路由的跳转提供了一种更直观和易于维护的方式。命名路由特别有用，尤其是在链接到路由时，不必硬编码 URL，也不必在路由对象中查找路径字符串。},在这个例子中，我们给路径为 /user/:username的路由命名为 user。User在这两种情况下，路由将导航到路径 /user/erina。
基于Vue3 + js-tool-big-box工具库实现3个随机数字的小游戏动画，快来挑战你的非凡手气！
xingyu_qie的专栏
05-17 845
基于Vue3 + js-tool-big-box的3个随机数字
vue 使用draggable拖拽实现响应式侧边栏，拖拽数据悬停在侧边栏分区超一秒时自动切换到对应分区
最新发布
weixin_45956838的博客
05-17 564
使用draggable拖拽实现响应式侧边栏，拖拽数据悬停在侧边栏分区超过一秒自动切换到对应分区
javascript-Vue：防抖 (Debouncing)、节流 (Throttling)
阿牛哥的博客
05-16 341
javascript-Vue：防抖 (Debouncing)、节流 (Throttling)
Vue的组件化编程的实例
04-25
好的，下面是一个Vue组件化编程的实例： ``` <h1>{{ title }} <p>{{ message }} export default { name: "example-component", props: { title: String, message: String, }, }; ``` 在这个例子中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

库里不会投三分

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

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

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

打赏作者

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

抵扣说明：

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

余额充值