第 3 章：使用 Vue 脚手架

Muko_0x7d2

已于 2024-10-14 16:56:24 修改

阅读量1.6k

点赞数 28

分类专栏： Vue 文章标签： vue.js 前端

于 2024-10-11 16:49:20 首次发布

本文链接：https://blog.youkuaiyun.com/2203_75300307/article/details/142522310

版权

1. 初始化脚手架

1.1 说明

Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）。
最新的版本是 5.x。
文档: https://cli.vuejs.org/zh/

1.2 具体步骤

第一步（仅第一次执行）：全局安装@vue/cli。
npm install -g @vue/cli
第二步：切换到你要创建项目的目录，然后使用命令创建项目
vue create xxxx（项目名称）
第三步：启动项目
npm run serve

备注：

如出现下载缓慢请配置 npm 淘宝镜像：
npm config set registry https://registry.npm.taobao.org
. Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpakc 配置，请执行：
vue inspect > output.js

待解决，cli安装失败报错

C:\Users\Administrator>npm config set registry https://registry.npm.taobao.org

C:\Users\Administrator>npm install -g @vue/cli
npm error code CERT_HAS_EXPIRED
npm error errno CERT_HAS_EXPIRED
npm error request to https://registry.npm.taobao.org/@vue%2fcli failed, reason: certificate has expired

npm error A complete log of this run can be found in: C:\Users\Administrator\AppData\Local\npm-cache\_logs\2024-09-26T06_33_01_984Z-debug-0.log

1.3 模板项目的结构

├── 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：包版本控制文件

1.4 关于不同版本的Vue

vue.js与vue.runtime.xxx.js的区别：
1. vue.js是完整版的Vue，包含：核心功能 + 模板解析器。
2. vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
因为vue.runtime.xxx.js没有模板解析器，所以不能使用template这个配置项，需要使用render函数接收到的createElement函数去指定具体内容。

1.4.1 render 函数的应用

/* 
	该文件是整个项目的入口文件
*/
//引入Vue
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'
//关闭vue的生产提示
Vue.config.productionTip = false

//创建Vue实例对象---vm
new Vue({
   
	el:'#app',
	//render函数完成了这个功能：将App组件放入容器中
  render: h => h(App),  // es6 箭头函数简写语法
  // 完整写法
//   render: function(createElement){
   
// 		return createElement('h1','你好啊')
//   }
	// render:q=> q('h1','你好啊')

	// template:`<h1>你好啊</h1>`,
	// components:{App},
})

1.5 vue.config.js配置文件

使用vue inspect > output.js可以查看到Vue脚手架的默认配置。
使用vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh

2. ref

被用来给元素或子组件注册引用信息（id的替代者）
应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
使用方式：
1. 打标识：<h1 ref="xxx">.....</h1>或 <School ref="xxx"></School>
2. 获取：this.$refs.xxx
作用：用于给节点打标识
读取方式：this.$refs.xxxxxx

2.1 ref 的实际应用

<template>
	<div>
		<h1 v-text="msg" ref="title"></h1>
		<button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
		<School ref="sch"/>
	</div>
</template>

<script>
	//引入School组件
	import School from './components/School'

	export default {
     
		name:'App',
		components:{
     School},
		data() {
     
			return {
     
				msg:'欢迎学习Vue！'
			}
		},
		methods: {
     
			showDOM(){
     
				console.log(this.$refs.title) //真实DOM元素
				console.log(this.$refs.btn) //真实DOM元素
				console.log(this.$refs.sch) //School组件的实例对象（vc）
			}
		},
	}
</script>

3. props

功能：让组件接收外部传过来的数据
传递数据：<Demo name="xxx"/>

3.1 接收数据

第一种方式（只接收）：props:['name','age','sex']
第二种方式（限制类型）：props:{name:String}

//接收的同时对数据进行类型限制
props:{
   
	name:String,
	age:Number,
	sex:String
}

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

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

3.2 props 使用实例

<template>
	<div>
		<h1>{
  {msg}}</h1>
		<h2>学生姓名：{
  {name}}</h2>
		<h2>学生性别：{
  {sex}}</h2>
		<h2>学生年龄：{
  {myAge+1}}</h2>
		<button @click="updateAge">尝试修改收到的年龄</button>
	</div>
</template>

<script>
	export default {
     
		name:'Student',
		data() {
     
			console.log(this)
			return {
     
				msg:'我是一个尚硅谷的学生',
				myAge:this.age  // 备注
			}
		},
		methods: {
     
			updateAge(){
     
				this.myAge++  // 备注
			}
		},
		//接收的同时对数据：进行类型限制+默认值的指定+必要性的限制
		props:{
     
			name:{
     
				type:String, //name的类型是字符串
				required:true, //name是必要的
			},
			age:{
     
				type:Number,
				default:99 //默认值
			},
			sex:{
     
				type:String,
				required:true
			}
		}
	}
</script>

备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。例如：我们要修改年龄，而该年龄是由props 传过来的age，这个时候不能直接对age进行修改，于是我们先在data里面定义一个myAge变量用来接收props传过来的age，再去对myAge进行修改即可。相当于复制props的内容到data中一份，然后去修改data中的数据

4. mixin混入

功能：可以把多个组件共用的配置提取成一个混入对象
在mixin混入里面，如果混入配置与自身组件有同样的属性，那么以自身的属性为主。如果有相同的方法名，且方法是生命周期函数，那么组件自身与mixin的该方法都会调用。

4.1 使用方式

第一步定义混合：

{
   
data(){
   ....},
methods:{
   ....}
....
}

第二步使用混入：
全局混入：Vue.mixin(xxx)
局部混入：mixins:['xxx']

4.2 mix混入案例

暴露mixin混入以及配置：mixin.js

export const hunhe = {
   
	methods: {
   
		showName(){
   
			alert(this.name)
		}
	},
	mounted() {
   
		console.log('你好啊！')
	},
}
export const hunhe2 = {
   
	data() {
   
		return {
   
			x:100,
			y:200
		}
	},
}

局部混入：School.vue

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

<script>
	//局部引入一个hunhe
	import {
     hunhe,hunhe2} from '../mixin'

	export default {
     
		name:'School',
		data() {
     
			return {
     
				name:'尚硅谷',
				address:'北京',
				x:666
			}
		},
		// 局部使用混合
		mixins:[hunhe,hunhe2],
	}
</script>

全局混入：main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
// 引入mixin
import {
   hunhe,hunhe2} from './mixin'
//关闭Vue的生产提示
Vue.config.productionTip = false

// 全局使用混入
Vue.mixin(hunhe)
Vue.mixin(hunhe2)


//创建vm
new Vue({
   
	el:'#app',
	render: h => h(App)
})

5. 插件

Vue 插件是一个包含 install 方法的对象
通过 install 方法给 Vue 或 Vue 实例添加方法, 定义全局指令等

5.1 插件的定义

功能：用于增强Vue
本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
定义插件：

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

使用插件：Vue.use()

5.2 插件的案例

定义插件：plugins.js

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

		//定义全局指令
		Vue.directive('fbind',{
   
			//指令与元素成功绑定时（一上来）
			bind(element,binding){
   
				element.value = binding.value
			},
			//指令所在元素被插入页面时
			inserted(element,binding){
   
				element.focus()
			},
			//指令所在的模板被重新解析时
			update(element,binding){
   
				element.value = binding.value
			}
		})

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

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

引入和启用插件：main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import plugins from './plugins'
//关闭Vue的生产提示
Vue.config.productionTip = false

//应用（使用）插件
Vue.use(plugins,1,2,3)
//创建vm
new Vue({
   
	el:'#app',
	render: h => h(App)
})

在组件中使用插件1：School.vue

<template>
	<div>
		<h2>学校名称：{
   {
   name | mySlice}}</h2>
		<h2>学校地址：{
   {
   address}}</h2>
		<button @click="test">点我测试一个hello方法</button>
	</div>
</template>

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

在组件中使用插件2：Student.vue

<template>
	<div>
		<h2>学生姓名：{
   {
   name}}</h2>
		<h2>学生性别：{
   {
   sex}}</h2>
		<input type="text" v-fbind:value="name">
	</div>
</template>

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

6. scoped样式

作用：让样式在局部生效，防止冲突。加了scoped，只有当前组件内template的样式才会生效
写法：<style scoped>
还可以在 style 标签里面配置 css 语法，如果不配置该属性，则默认语法为css：
<style lang="less">，此时可能要安装 less-loader

7. Todo-list 案例

效果：

7.1 实现静态组件

将组件按照功能拆分并且进行语义化命名

MyFooter.vue
MyHeader.vue
MyList.vue
MyItem.vue
其中MyItem.vue 是 MyList.vue 的子组件，所以 App.vue 里面只需要引入前三个组件即可，MyItem.vue 组件在 MyList.vue 里面引入即可。

如果是老系统里面把jQuery之类的用组件化去重新编写，首先找到index.html中对应的结构，然后将其内容复制到对应组件template里面当中去，然后原位置用组件标签代替，还原原来老系统的结构布局。

7.2 展示动态数据

数据的类型、名称是什么？
一堆数据用数组，每一个数据里面的属性太多了就用对象
数据保存在哪个组件？
哪个组件使用，就保存在哪个组件里面，所以保存在 MyList.vue 里面，然后通过props引用到 MyItem.vue 里面并且展示到页面当中。

生成唯一的id，并且精简：引用 nanoid 库，并且调用 nanoid() 函数，会直接生成一个唯一的id（字符串）

7.3 交互——从绑定事件监听开始

7.3.1 初级实现同级组件间的数据交流

实现添加功能：在输入框（Header）输入文字并在下面（List）生成待办事项

父组件与子组件通信：

App 里面存放数据data，然后再给 List绑定：<List :data="data"/>
List 通过props引用该数据data：props["data"]

子组件与父组件通信：
3. Header 传数据给 App，首先 App 定义一个函数，然后绑定给 Header：<Header :addTode="addTodo"/>，Header 通过 props 引用该函数：props:['addTodo']
4. 通过 Header 自己的一个函数去调用该函数，最后把 Header 的数据通过参数的形式给该函数带走：this.addTodo(数据)，然后实现 Header 给 App 传数据

兄弟组件间通信：
5. 最终 List 从 App 这里拿到数据，实现了同级组件间的数据交流。

7.3.2 勾选功能

给每一项item勾选时并改变其属性done的值为true
所以需要父孙组件通信，用逐层父子组件绑定来实现

父组件传数据给孙组件：
初级方法：逐层传递

App 定义方法：checkTodo，并且绑定给 List：<List :checkTodo="checkTodo"/>
List 通过 props 引用 checkTodo：props:['checkTodo']
List 将引用的 checkTodo 绑定给 Item：<Item :checkTodo="checkTodo"/>
Item 调用方法：this.checkTodo(id)，参数为 todo 的 id

//勾选or取消勾选一个todo
			checkTodo(id){
   
			// 遍历每个item，如果id为所勾选的id，那么将其done值取反
				this.todos.forEach((todo)=>{
   
					if(todo.id === id) todo.done = !todo.done
				})
			}

7.3.3 删除方法：

移动鼠标到对应item上面，显示删除按钮，确定删除后就删除该item

拿到该item的id
然后把id传给app（item所在组件；父组件与孙组件数据交流，方法同上）
app删除后重新渲染dom到页面上

//删除一个todo
			deleteTodo(id){
   
			// 使用过滤器将选中id的item过滤掉，留下没有选中id的item
				this.todos = this.todos.filter( todo => todo.id !== id )
			}

7.3.4 底部统计功能

勾选了几个item，显示已完成几个item，同时展示全部有多少个item（使用计算属性实现）

computed: {
   
	//总数
	total(){
   
		// 直接返回todos的长度即item的个数
		return this.todos.length
	},
	//已完成数
	doneTotal(){
   
		//此处使用reduce方法做条件统计
		/* const x = this.todos.reduce((pre,current)=>{
			console.log('@',pre,current)
			return pre + (current.done ? 1 : 0)
		},0) */
		//简写
		// 返回属性done值为1即done值为true即已勾选的item
		return this.todos.reduce((pre,todo)=> pre + (todo.done ? 1 : 0) ,0)
}

7.3.5 全选or取消全选功能

当所有item被勾选时，全选自动勾选
当勾选全选时，勾选所有item
当取消全选时，取消勾选所有item

//全选or取消全选
// methods
checkAllTodo(done){
   
	this.todos.forEach((todo)=>{
   
	// 遍历所有todo，全部设置为done
		todo.done = done
	})
}

// computed
isAll:{
   
	//全选框是否勾选
	get(){
   
		// 判断勾选数等于全部数，并且全部数大于0（防止出现全部0，勾选0）
		return this.doneTotal === this.total && this.total > 0
	},
	//isAll被修改时set被调用
	// 缺少setter，自己定义，调用setter时则调用全选方法
	set(value){
   
		this.checkAllTodo(value)
	}
}

7.3.6 清除已经完成的任务

删除已被勾选的item

// 1. App定义，再绑定给Footer
//清除所有已经完成的todo
clearAllTodo(){
   
	this.todos = this.todos.filter((todo)=>{
     // 过滤不改变原数据，所以用todos重新被赋值
	// 遍历所有todo，过滤返回所有没有勾选的item
		return !todo.done
	})
}

// 2. Footer 用props接收
props:['todos','checkAllTodo','clearAllTodo']

// 3. 接收后在methods里面配置
methods: {
   
	/* checkAll(e){
		this.checkAllTodo(e.target.checked)
	} */
	//清空所有已完成
	clearAll(){
   
		this.clearAllTodo()
	}
}

// 4. 最后以点击事件绑定给按钮
<button class="btn btn-danger" @click="clearAll">清除已完成任务</button>

7.4 TodoList 案例总结：

组件化编码流程：
1. 拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。
2. 实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：
  1. 一个组件在用：放在组件自身即可。
  2. 一些组件在用：放在他们共同的父组件上（<span style="color:red">状态提升</span>）。
3. 实现交互：从绑定事件开始。
props适用于：
1. 父组件 ==> 子组件通信
2. 子组件 ==> 父组件通信（要求父先给子一个函数）
使用 v-model 时要切记：v-model 绑定的值不能是 props 传过来的值，因为 props 是不可以修改的！
props 传过来的若是对象类型的值，修改对象中的属性时 Vue 不会报错，但不推荐这样做。

7.5 TodoList 案例实现

项目结构：

- components
	- MyHeader.vue
	- MyList.vue
	- MyItem.vue
	- MyFooter.vue
- App.vue
- main.js

MyHeader.vue

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

<script>
	import {
     nanoid} from 'nanoid'
	export default {
     
		name:'MyHeader',
		//接收从App传递过来的addTodo
		props:['addTodo'],
		data() {
     
			return {
     
				//收集用户输入的title
				title:''
			}
		},
		methods: {
     
			add(){
     
				//校验数据
				if(!this.title.trim()) return alert('输入不能为空')
				//将用户的输入包装成一个todo对象
				const todoObj = {
     id:nanoid(),title:this.title,done:false}
				//通知App组件去添加一个todo对象
				this.addTodo(todoObj)
				//清空输入
				this.title = ''
			}
		},
	}
</script>

<style scoped>
	/*header*/
	.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>

MyList.vue

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

<script>
	import MyItem from './MyItem'

	export default {
     
		name:'MyList',
		components:{
     MyItem},
		//声明接收App传递过来的数据，其中todos是自己用的，checkTodo和deleteTodo是给子组件MyItem用的
		props:['todos','checkTodo','deleteTodo']
	}
</script>

<style scoped>
	/*main*/
	.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>

MyItem.vue

<template>
	<li>
		<label>
			<input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/>
			<!-- 如下代码也能实现功能，但是不太推荐，因为有点违反原则，因为修改了props -->
			<!-- <input type="checkbox" v-model="todo.done"/> -->
			<span>{
  {todo.title}}</span>
		</label>
		<button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
	</li>
</template>

<script>
	export default {
     
		name:'MyItem',
		//声明接收todo、checkTodo、deleteTodo
		props:['todo','checkTodo','deleteTodo'],
		methods: {
     
			//勾选or取消勾选
			handleCheck(id){
     
				//通知App组件将对应的todo对象的done值取反
				this.checkTodo(id)
			},
			//删除
			handleDelete(id){
     
				if(confirm('确定删除吗？')){
     
					//通知App组件将对应的todo对象删除
					this.deleteTodo(id)
				}
			}
		},
	}
</script>

<style scoped>
	/*item*/
	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: #ddd;
	}
	
	li:hover button{
     
		display: block;
	}
</style>

MyFooter.vue

<template>
	<div class="todo-footer" v-show="total">
		<label>
			<!-- <input type="checkbox" :checked="isAll" @change="checkAll"/> -->
			<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: {
     
			//总数
			total(){
     
				return this.todos.length
			},
			//已完成数
			doneTotal(){
     
				//此处使用reduce方法做条件统计
				/* const x = this.todos.reduce((pre,current)=>{
					console.log('@',pre,current)
					return pre + (current.done ? 1 : 0)
				},0) */
				//简写
				return this.todos.reduce((pre,todo)=> pre + (todo.done ? 1 : 0) ,0)
			},
			//控制全选框
			isAll:{
     
				//全选框是否勾选
				get(){
     
					return this.doneTotal === this.total && this.total > 0
				},
				//isAll被修改时set被调用
				set(value){
     
					this.checkAllTodo(value)
				}
			}
		},
		methods: {
     
			/* checkAll(e){
				this.checkAllTodo(e.target.checked)
			} */
			//清空所有已完成
			clearAll(){
     
				this.clearAllTodo()
			}
		},
	}
</script>

<style scoped>
	/*footer*/
	.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>

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'
	import MyList from './components/MyList'
	import MyFooter from './components/MyFooter.vue'

	export default {
     
		name:'App',
		components:{
     MyHeader,MyList,MyFooter},
		data() {
     
			return {
     
				//由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）
				todos:[
					{
     id:'001',title:'抽烟',done:true},
					{
     id:'002',title:'喝酒',done:false},
					{
     id:'003',title:'开车',done:true}
				]
			}
		},
		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
				})
			}