Vue TodoList案例、组件通信方式、webStorage、插槽（3种）

最新推荐文章于 2024-06-11 16:47:46 发布
最新推荐文章于 2024-06-11 16:47:46 发布
阅读量680 收藏 3
点赞数 4
分类专栏： Vue 文章标签： vue.js javascript 前端 组件通信 插槽
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45654582/article/details/122050821
版权

文章目录

TodoList案例(props实现)

案例展示：
在这里插入图片描述
实现代码：

main.js文件：

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

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

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
				})
			},
			//清除所有已经完成的todo
			clearAllTodo(){
				this.todos = this.todos.filter((todo)=>{
					return !todo.done
				})
			}
		}
	}
</script>

<style>
	/*base*/
	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>

components文件夹：

1、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>

2、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>



3、MyList.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>



4、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>

案例总结：

组件化编码流程：

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

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

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

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

props适用于：

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

注意：

  • 使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！
  • props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

webStorage

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

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

  3. 相关API：

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

    2. xxxxxStorage.getItem('person');

      ​ 该方法接受一个键名作为参数，返回键名对应的值。

    3. xxxxxStorage.removeItem('key');

      ​ 该方法接受一个键名作为参数，并把该键名从存储中删除。

    4. xxxxxStorage.clear();

      ​ 该方法会清空存储中的所有数据。

  4. 备注：

    1. SessionStorage 存储的内容会随着浏览器窗口关闭而消失
    2. LocalStorage 存储的内容，需要手动清除才会消失
    3. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null
    4. JSON.parse(null)的结果依然是null

将LocalStorage加入TodoList案例：

其余文件不变，只需要在App.vue文件添加代码
App.vue文件：

<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: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)=>{
					return !todo.done
				})
			}
		},
		watch: {
			todos:{
				deep:true,
				handler(value){
					localStorage.setItem('todos',JSON.stringify(value))
				}
			}
		},
	}
</script>

组件通信方式

组件的自定义事件

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

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

  3. 绑定自定义事件：

    1. 第一种方式，在父组件中：<Demo @x="test"/>或 <Demo v-on:x="test"/>

    2. 第二种方式，在父组件中：

      <Demo ref="demo"/>
......
mounted(){
   this.$refs.xxx.$on('x',this.test)
}

    3. 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。

  4. 触发自定义事件：this.$emit('x',数据)

  5. 解绑自定义事件this.$off('x')

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

  7. 注意：通过this.$refs.xxx.$on('x',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

全局事件总线（GlobalEventBus）

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

  2. 安装全局事件总线：

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

  3. 使用事件总线：

    1. 接收数据：A组件想接收数据，则在A组件中给 $bus绑定自定义事件，事件的回调留在A组件自身。

      methods(){
  demo(data){......}
}
......
mounted() {
  this.$bus.$on('xxxx',this.demo)
}

    2. 提供数据：this.$bus.$emit('xxxx',数据)

  4. 最好在beforeDestroy钩子中，用 $off去解绑当前组件所用到的事件。

消息订阅与发布（pubsub）

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

  2. 使用步骤：

    1. 安装pubsub：npm i pubsub-js

    2. 引入: import pubsub from 'pubsub-js'

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

      methods(){
  demo(data){......}
}
......
mounted() {
  this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
}

    4. 提供数据：pubsub.publish('xxx',数据)

    5. 最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅

nextTick：

  1. 语法：this.$nextTick(回调函数)
  2. 作用：在下一次 DOM 更新结束后执行其指定的回调。
  3. 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

组件的 $nextTick(cb) 方法，会把 cb 回调推迟到下一个 DOM 更新周期之后执行。通俗的理解是：等组件的DOM 更新完成之后，再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素。

插槽(3种)

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

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

使用方式：

1、默认插槽：

父组件：
  <Category>
     <div>html结构1</div>
  </Category>
子组件（Category）：
  <template>
      <div>
         <!-- 定义插槽 -->
         <slot>插槽默认内容...</slot>
      </div>
  </template>

2、具名插槽：

父组件：
  <Category>
      <template slot="center">
        <div>html结构1</div>
      </template>
  
      <template v-slot:footer>
         <div>html结构2</div>
      </template>
  </Category>
  
子组件（Category）：
  <template>
      <div>
         <!-- 定义插槽 -->
         <slot name="center">插槽默认内容...</slot>
         <slot name="footer">插槽默认内容...</slot>
      </div>
  </template>

3、作用域插槽：

理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（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>

子组件（Category）：
 <template>
     <div>
         <slot :games="games"></slot>
     </div>
 </template>

 <script>
     export default {
         name:'Category',
         props:['title'],
         //数据在子组件自身
         data() {
             return {
                 games:['红色警戒','穿越火线','劲舞团','超级玛丽']
             }
         },
     }
 </script>
YuLong~W
关注
专栏目录
《web开发： Vue 插槽》
yexiangCSDN的专栏
02-23 229
一、Vue 插槽 1.组件插槽的作用 父组件向子组件传递内容 1. 单独的事件中心管理组件间的通信 事件中心 组件A 组件B 触发 触发 监听 监听 Contents 目 ◆ 组件化开发思想 ◆ 组件注册 ◆ Vue调试工具用法 ◆ 组件间数据交互 ◆ 组件插槽 ◆ 基于组件的案例 4. 组件间数据交互 5.1 组件插槽的作用 ⚫ 父组件向子组件传递内容 <alert-box>hi</alert-box> <alert-box&g...
vue3+ts入门（todolist案例）
02-10
在这个"vue3+ts入门（todolist案例）"中，我们将探讨如何结合 Vue3 和 TypeScript 创建一个简单的待办事项列表应用，即 Todolist。 1. **Vue3 的主要更新**： - **Composition API**：Vue3 引入了 Composition API...
如何在Vue3中使用本地存储localStorage保存数据？
最新发布
有我更精彩的博客
06-11 3118
是 Web Storage API 的一部分，允许我们在用户的浏览器中存储和检索数据。与不同，中的数据在浏览器会话结束后不会被删除，除非显式地被清除。这使得成为持久化数据的理想选择，如用户设置、购物车信息等。Vue3 是一个用于构建用户界面的渐进式JavaScript框架。相较于Vue2，Vue3在性能优化、组合API的引入、TypeScript支持等方面有显著提升。下面我们会结合Vue3，来看如何利用来保存数据。在这篇博客中，我们探讨了如何在 Vue3 中使用。
vue——webStorage、sessionStorage、localstorage、组件的自定义事件
h_jQuery的博客
08-26 365
webStorage 1.存储内容大小一般支持5MB左右（不同的浏览器可能不一样） 2.浏览器端通过window.sessionStorage和window.localStorage属性来实现本地存储机制 3.相关API： ​ 1.xxxxxStorage.setItem(‘key’,'value)：该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名已存在，则更新其对应的值 ​ 2.xxxxxStorage.getItem(‘key’)：该方法 接受一个键名作为参数，返回键名对应的值 ​ 3.x
Vue webStorage 浏览器本地存储数据（附项目实战案例！）
Python+大数据+数据分析+自动化+Vue组件开发
06-28 1204
前言 前期分享的 200行纯前端Vue代码！教你写一个专属TodoList【零基础友好】 公众号后台回复：todo，即可获得项目完整源码 基础数据是硬编码在代码里的，相当于是写死在代码中，具体代码内容如下（核心代码片段）。 App.vue文件 export default {    //给当前组件命名为:App    name:'App',    //注册引入的子
vue使用webStorage存储数据，页面不能实时更新
weixin_63712639的博客
02-12 1418
因为webStorage并不是vue的东西,所以不能实时更新其数据 必须刷新才能更新数据 之前我的业务场景是 : 登录之后将用户名存入sessionStorage里 登录成功跳转到首页读取sessionStorage里的用户名显示 欢迎:用户名 最后发现必须页面刷新才能显示该用户名 解决方法: 1.既然需要刷新我们就用刷新跳转页面的方法解决这个问题 window.location.href="路由/路径" 2.搭配Vuex和webStroage一起使用 ...
Vue.js 父子组件通信的十种方式
01-19
面试官：Vue 中父子组件通信有哪些方式？ 自己先想一分钟。 无可否认，现在无论大厂还是小厂都已经用上了Vue.js 框架，简单易上手不说，教程详尽，社区活跃，第三方套件还多。真的是前端开发人员必备技能。而且在...
使用Vue父子组件通信实现todolist的功能示例代码
10-17
在本文中，我们将深入探讨如何使用Vue.js框架中的父子组件通信机制来实现一个简单的todolist功能。Vue.js是一个流行的前端JavaScript库，它提供了一种声明式的数据绑定和组件化的方法，使得开发用户界面更加简洁高效...
总结了-Vue3-的七种组件通信方式-别再说不会组件通信了.docx
12-18
本文将总结 Vue3 中的七种组件通信方式，帮助开发者更好地理解和应用这些技术。 一、Props 方式 Props 是 Vue 中最常见的一种父传子的一种方式。使用 Props，可以将父组件的数据传递给子组件。在上面的 demo 中，...
Vue组件通信的四种方式汇总
08-28
本文将详细介绍Vue组件通信的四种常见方法：父子组件通信、非父子组件的EventBus通信、使用localStorage或sessionStorage以及Vuex状态管理。 **1. 父子组件通信** 父子组件通信是最基础的通信方式，主要包括数据从...
Vue —— 进阶脚手架（三）（本地存储）
HuoZhiyan 的博客
05-15 1584
文章目录webStorage1. 组成部分2. 相关 API一、LocalStorage1. 功能2. 实例 （熟悉 API 的使用）二、sessionStorage1. 功能2. 实例（熟悉 API 的使用）三、总结及注意事项1. 存储的数据何时消失 ？2. getItem 获取不到的返回值：null webStorage 1. 组成部分 webStorage 实际上由两部分组成：sessionStorage 与 localStorage。 浏览器端通过 Window.sessionStorage
15.Vue - webStorage浏览器本地存储
weixin_51351637的博客
09-11 1040
1. 存储内容大小一般支持5MB左右(不同浏览器可能还不一样)2.浏览器端通过 Window.sessionStorage和Window.localStorage属性来实现本地存储机制。该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对 应的值。该方法接受一个键名作为参数，返回键名对应的值。该方法接受一个键名作为参数，并把该键名从存储中删除。该方法会清空存储中的所有数据。
webStorage统称
weixin_51908141的博客
11-27 4582
浏览器的存储
实战Vue：ToDoList
KaiSarH
07-08 499
Vue小练习：ToDoList
Vue最新版插槽的使用
风如也的博客
07-21 651
插槽 在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法（即 v-slot 指令），它取代了 slot 和 slot-scope 这两个目前已经被废弃但仍为被移除且仍在文档中的 attribute。 插槽内容 Vue 实现了一套内容分发的 API，将 <slot> 元素作为承载分发内容的出口。 在组件内使用插槽 navigation.vue <template> <div> <a :href="url" class="nav-li
[070-077]_TodoList案例
述安的博客
11-20 824
文章目录示意图静态页面源码index.htmlindex.css静态页面拆分并整合功能App.vue组件MyHeader.vueMyList.vueMyItem.vueMyFooter.vueTodo-list案例总结 示意图 静态页面源码 index.html <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Vue App</t
Vue组件化开发（二）——组件间通信方式及案例
星河梦~的博客
01-20 685
组件间的通信：父子通信、兄弟通信、跨级通信方式及案例
TodoList案例
m0_64439018的博客
04-07 1812
1. 组件化编码流程： ​ (1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。 ​ (2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用： ​ 1).一个组件在用：放在组件自身即可。 ​ 2). 一些组件在用：放在他们共同的父组件上（<span style="color:red">状态提升</span>）。 ​ (3).实现交互：从绑定事件开始。 2. pro...
Vue3.0实现todolist
ll666888999的博客
03-31 1622
项目准备 Vue3.0环境搭建 1、官网安装node，进入node.js官网安装长期支持版 打开终端输入：node -v 如果出现node版本号，表明安装成功 安装node自带npm,包管理工具 输入npm -v 出现npm的版本号 2、安装淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org 输入cnpm -v 会出现一系列版本号，说明安装成功 3、安装vue环境：cnpm i -g vue @vue/cli 输入vue -
深入掌握VUE3：组件通信与自定义插槽教程
资源摘要信息:"前端VUE3视频教程03" 本视频教程系列专注于深入学习和掌握Vue.js 3的相关知识，本视频为教程的第三部分。教程主要面向那些希望升级自己的前端技能并了解最新Vue 3特性的开发者。本部分将详细介绍Vue ...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值