Vue.js（学习Vue3之前必须要掌握的知识）

已于 2022-03-21 10:11:54 修改
阅读量3.2k 收藏 23
点赞数 14
分类专栏： Vue框架 文章标签： vue vue.js 前端框架
于 2022-03-20 15:36:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50569789/article/details/123614255
版权

文章目录

第一个Vue程序

在html文件中导入相关js文件

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

创建一个html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		
		<div id="app">
			{{message}}
		</div>
		
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					message: "Hello Vue"
				}
			})
		</script>
	</body>
	
	
</html>

el挂载点

什么意思呢？就是vue的作用域在哪个位置，阅读以下图片

image-20220320101102665

我们可以知道，只有在id选择器中的message才有效输出对应的内容，其中el挂载点选择的就是id选择器

但是当然可以使用class选择器，这时的el属性值就需要写成 .app

data数据对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="app">
			{{message}}
			
			<h2>{{school.name}} {{school.phone}}</h2>
			
			<ul>
				<li>{{campus[0]}}</li>
				<li>{{campus[1]}}</li>
			</ul>
		</div>
		
		
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					message:"Happy Study",
					school:{
						name:"小六",
						phone:"13688885555"
					},
					campus:["北京校区","上海校区"]
				}
			})
		</script>
	</body>
</html>

image-20220320102211169

v-text

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="app">	
			<h2 v-text="message"></h2>
			<h2 v-text="info"></h2>
			
				<h2 >{{message}}...</h2>
		</div>
		
		
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					message:"World Hello",
					info:"好好学习"
				}
			})
		</script>
	</body>
</html>

v-html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="app">	
			<h2 v-html="content"></h2>
			<h2 v-text="content"></h2>
			
				
		</div>
		
		
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					content:"<a href='https://www.baidu.com/'>World Hello</a>"
					
				}
			})
		</script>
	</body>
</html>

image-20220320103323199

v-on

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="app">	
			<input type="button" value="v-on指令" v-on:click="doIt()" />
		    <input type="button" value="v-on指令简写" @click="doIt()" />
				
			<input type="button" value="双击事件" @dblclick="doIt()" />
			
			
			<h2 @click="changeFood()">{{food}}</h2>
				
		</div>
		
		
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					food:"nice"
				},
				methods:{
					doIt:function(){
						alert("做IT");
					},
					changeFood:function(){
						// console.log(this.food);
						this.food+="big good"
					}
				}
			})
		</script>
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5tJ2CVPz-1647761617498)(https://raw.githubusercontent.com/qiyuank/MyTypore/master/img/image-20220320104416762.png)]

计数器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="app">	
			<button @click="sub">-</button>
				<span>{{ num }}</span>
			<button @click="add">+</button>
		</div>
		
		
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					num:0,
				},
				methods:{
					add:function(){
						
						if(this.num<10){
							this.num+=1;
						}else{
							alert("已经到最大值了")
						}
					},
					sub:function(){
						if(this.num>0){
							this.num-=1;
						}else{
							alert("已经到最小值了")
						}
					}
				}
			})
		</script>
	</body>
</html>

v-show

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="app">	
			<input type="button" @click="changeIsShow()" value="点击我" />
			<img v-show="isShow" src="./img/007.jpg"/>
		
		</div>
		
		
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					isShow:false
				},
				methods:{
					changeIsShow:function(){
						this.isShow=!this.isShow
					}
				}
				
			})
		</script>
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MkubvM3O-1647761617499)(https://raw.githubusercontent.com/qiyuank/MyTypore/master/img/image-20220320110914353.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xnqqWvMQ-1647761617499)(https://raw.githubusercontent.com/qiyuank/MyTypore/master/img/image-20220320110919261.png)]

v-if

	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title></title>
		</head>
		<body>
			
			<div id="app">	
				<input type="button" value="切换显示" @click="toggleIsShow()"/>
				<p v-if="isShow">World Hello v-if</p>
				<p v-show="isShow">World Hello v-show</p>
				
				<h2 v-if="temperature>35">re</h2>
			</div>
			
			
			<!-- 开发环境版本，包含了有帮助的命令行警告 -->
			<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
			<script type="text/javascript">
				var app = new Vue({
					el:"#app",
					data:{
						isShow:false,
						temperature:40
					},
					methods:{
						toggleIsShow:function(){
							this.isShow=!this.isShow
						}
						
					}
					
				})
			</script>
		</body>
	</html>

image-20220320111454746

image-20220320111459896

v-bind

	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title></title>
			<style type="text/css">
				.active{
					border: 1px solid red;
				}
			</style>
		</head>
		<body>
			
			<div id="app">	
				<img v-bind:src="imgSrc" >
				
				<img :src="imgSrc" >
				
				<img :src="imgSrc" :title="imgTitle" :class="isActive?'active':''" @click="toggleActive()">
				
				<img :src="imgSrc" :title="imgTitle" :class="{active:isActive}" @click="toggleActive()">
				
				
			</div>
			
			
			<!-- 开发环境版本，包含了有帮助的命令行警告 -->
			<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
			<script type="text/javascript">
				var app = new Vue({
					el:"#app",
					data:{
						imgSrc:"https://img1.baidu.com/it/u=1706907849,2908816773&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889",
						imgTitle:"World Hello",
						isActive:false
					},
					methods:{
						toggleActive:function(){
							this.isActive=!this.isActive
						}
						
					}
					
				})
			</script>
		</body>
	</html>

图片切换

	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title></title>
			<style type="text/css">
				.active{
					border: 1px solid red;
				}
			</style>
		</head>
		<body>
			
			<div id="app">	
				<img :src="imgArr[index]">
				
				
				
				<a href="#" @click="prev" v-show="index!=0">上一张</a>
				
				<a href="#" @click="next" v-show="index<imgArr.length-1">下一张</a>
				
			</div>
			
			
			<!-- 开发环境版本，包含了有帮助的命令行警告 -->
			<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
			<script type="text/javascript">
				var app = new Vue({
					el:"#app",
					data:{
						imgArr:[
							"http://pic.qianye88.com/4kcc02c5a43b1-928d-31af-ab11-dc9c818b5126.jpg?imageMogr2/thumbnail/x300/quality/90!",
							"http://pic.qianye88.com/pic/0fb4d4b22f5a8b0da2fa2ade8572c263.jpg?imageMogr2/thumbnail/x300/quality/90!",
							"http://pic.qianye88.com/4kdongman4f6415e5-cf59-3361-8f47-fac263a198f7.jpg?imageMogr2/thumbnail/x300/quality/90!"
						],
						index:0
					},
					methods:{
						prev:function(){
							this.index--
							
						},
						next:function(){
							this.index++
						}
						
					}
					
				})
			</script>
		</body>
	</html>

v-for

	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title></title>
			<style type="text/css">
				.active{
					border: 1px solid red;
				}
			</style>
		</head>
		<body>
			
			<div id="app">	
				<ul>
					<li v-for="item in arr">World Hello：{{item}}</li>
				</ul>
				
				<ul>
					<li v-for="(item,index) in arr">
					{{index+1}}	World Hello：{{item}}</li>	 
				</ul>
				
				
				
				<input type="button" value="添加" @click="add()" />
				<input type="button" value="移除"  @click="remove()"/>
				<h2 v-for="item in vegetables" v-bind:title="item.name">
					{{item.name}}
				</h2>
			</div>
			
			
			<!-- 开发环境版本，包含了有帮助的命令行警告 -->
			<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
			<script type="text/javascript">
				var app = new Vue({
					el:"#app",
					data:{
						arr:["世界1","世界2","世界3","世界4","世界5"],
						vegetables:[
							{name:"白菜"},
							{name:"大白菜"}
						]
					},
					methods:{
						add:function(){
							this.vegetables.push({name:"nice"})
						},
						remove:function(){
							this.vegetables.shift();
						}
					}
					
				})
			</script>
		</body>
	</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DZkMThpJ-1647761617500)(https://raw.githubusercontent.com/qiyuank/MyTypore/master/img/image-20220320115052081.png)]

v-on自定义参数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			
			<input type="button" value="点击" @click="doIt(666,'好')" />
			
			<input type="text" @keyup.enter="sayHi()" />
			
		</div>
		
		
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					
				},
				methods:{
					doIt:function(p1,p2){
						console.log("it");
						console.log(p1);
						console.log(p2);
					},
					sayHi:function(){
						alert("吃了没？")
					}
				}
			})
		</script>
	</body>
</html>

v-model双向绑定

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
		
			<input type="text" v-model="message" @keyup.enter="getMessage()" />
			
			<h2>{{message}}</h2>
		</div>
		
		
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					message:"nice"
				},
				methods:{
					getMessage:function(){
						alert(this.message)
					},
					
				}
			})
		</script>
	</body>
</html>

image-20220320141203303

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			
			<input type="button" value="修改message" @click="setMessage()" />
			
			
			<input type="text" v-model="message" @keyup.enter="getMessage()" />
			
			<h2>{{message}}</h2>
		</div>
		
		
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					message:"nice"
				},
				methods:{
					getMessage:function(){
						alert(this.message)
					},
					setMessage:function(){
						this.message="辣条"
					}
				}
			})
		</script>
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QF3HOpzh-1647761617502)(https://raw.githubusercontent.com/qiyuank/MyTypore/master/img/image-20220320141420379.png)]

记事本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="app">
			
			<input type="text" v-model="inputValue" @keyup.enter="add()"/>
			
			<ul>
				<li v-for="(item,index) in list">
					<div>
						<span>{{index+1}}</span>
						<label>{{item}}</label>
						<button @click="remove(index)">删除</button>
					</div>
				</li>
			</ul>
			
			<span>笔记条数：{{list.length}}</span>
			
			<button @click="clear()" v-if="list.length!=0">Clear All</button>
			
			
		</div>
		
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					list:["敲代码","big nice"],
					inputValue:"好好学习"
				},
				methods:{
					add:function(){
						this.list.push(this.inputValue)
					},
					remove:function(index){
						this.list.splice(index,1);
					},
					clear:function(){
						this.list=[];
					}
				}
			})
		</script>
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Se6QaonF-1647761617502)(https://raw.githubusercontent.com/qiyuank/MyTypore/master/img/image-20220320142940157.png)]

axios+vue_01

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			
			<input type="button" value="获取笑话" @click="getJoke"/>
			
			<p>{{joke}}</p>
			
		</div>
		
		
		
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					joke:"nice"
				},
				methods:{
					getJoke:function(){
						var that = this
						axios.get("https://autumnfish.cn/api/joke").then
						(function(response){
							console.log(response.data)
							that.joke=response.data
						},function(err){
							
						})
					}
				}
			})
		</script>
	</body>
</html>

image-20220320144619553

axios+vue_02

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			
			<input type="text" v-model="city" @keyup.enter="searchWeather()" />
			<a @click="changeCity('北京')">北京</a>
			<a @click="changeCity('上海')">上海</a>
			<a @click="changeCity('广州')">广州</a>
			<a @click="changeCity('深圳')">深圳</a>
			<ul>
				<li v-for="item in weatherList">
					<div>{{item.type}}</div>
					<div>
						<b>{{item.low}}</b>
						
						<b>{{item.high}}</b>
					</div>
					<div>{{item.date}}</div>
				</li>
			</ul>
			
			
			
		</div>
		
		
		
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		
		<script src="./js/main.js"></script>
	</body>
</html>

Js代码

 

var  app = new Vue({
	el:"#app",
	data:{
		city:'',
		weatherList:[]
	},
	methods:{
		searchWeather:function(){
			
			//因为是回调函数，此时下边this已经改变了 所以需要保存上边的this
			var that = this;
			
			
			axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city).then
			(function(response){
				
				console.log(response.data.data.forecast);
				that.weatherList=response.data.data.forecast
				
			})
			.catch(function(err){})
		},
		changeCity:function(city){
			this.city=city;
			this.searchWeather();
		}
	}
	
	
})

image-20220320151444159

不易撞的网名
关注
  • 14
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
三个小时vue3.x从零到实战（前）（vue3.x基础）
数据知道的博客
07-13 4万+
一. 学前了解 1.1 前置知识 HTML: 超文本传输语言，主要用来编写网页的结构。 CSS: 层叠样式表，包括颜色，大小，字体等，实现漂亮，布局合理的效果。 JavaScript: 前端样式语言，实现页面逻辑，行为，动作等，用来动态操作元素的属性，主要是为页面提供交互效果，实现更好的用户体验。 node, npm, webpack等 1.2 学习vue3.x的相关网站 官网：https://vuejs.org/ 中文官网：https://cn.vuejs.org/ 中文官网vue3：https:/
【前端开发---Vue3】前段开发之详细的Vue3入门教程，特别适合小白系统学习，入门到熟练使用Vue看这一篇就够了！
热门推荐
m0_67844671的博客
09-28 1万+
前段开发之详细的Vue3入门教程，特别适合小白系统学习，入门到熟练使用Vue看这一篇就够了！内容包括Vue3项目的创建，Vue2与Vue3的区别，路由，组件，各种组件之间的传值等；
【Vue3】项目实战前基本知识
最新发布
weixin_44899940的博客
02-06 1010
Vue3，从新建项目-基本属性-易犯错误-代码规范！
Vue3：基础入门
CaptainDrake的博客
04-22 8060
vue简介、vue的基本使用、vue的指令与过滤器、品牌列表案例
Vue3.0前置，还不知道这些就来不及啦
webyouxuan的博客
09-11 202
戳蓝字"前端优选"关注我们哦！想看Vue3的源码，想了解Vue3的响应式原理、深度代理、如何避免多次trigger，想了解Vue3的Computed、Ref、Effect...
vue3创建项目、基础知识
halo1416的博客
04-02 2673
Vue3的基础概念 一、创建vue3的项目（基于脚手架） // 前提：将vue-cli 升级到4.x 的版本 vue create my-app-ts // 使用ts npm install typescript ts-node -g 生成时操作如下: 二、vue3.0 部分写法改变 后面补充 createStore => useStore createRouter => useRouter vue所有api 的入口：setup vue3里面没有mapState 原因：mapState 是
关于Vue.js一些问题和思考学习笔记（1）
10-20
Vue.js 是一款流行的前端JavaScript框架，它以组件化开发、数据驱动和易上手的特点深受开发者喜爱。在本文中，我们将探讨几个关于Vue.js的重要知识点，包括数据绑定、属性初始化、`v-model`的处理以及`methods`和`...
当准备Vue.js面试时，深入学习Vue.js核心概念、实际应用以及可能遇到的问题是非常重要的.pdf
01-19
深入学习 Vue.js 核心概念、实际应用和可能遇到的问题 当准备 Vue.js 面试时，深入学习 Vue.js 核心概念、实际应用和可能遇到的问题是非常重要的。以下是更加详细的资源，包括文档、技术要点和编程题： ### Vue.js...
Vue03. Vue.js 高级开发.pdf_前端学习资料
09-01
Vue.js 是一款流行的前端框架，其高级开发涉及多个核心概念和技术，包括组件自定义、项目打包、单文件组件、路由管理和...以上就是 Vue.js 高级开发中的关键知识点，掌握这些将有助于提升 Vue 项目的开发效率和质量。
关于引入vue.js 文件的知识点总结
10-15
Vue.js 是一款轻量级的前端JavaScript框架，用于构建用户界面。在本文中，我们将深入探讨如何在项目中引入Vue.js文件，以便开始利用它的强大功能。以下是一些关键知识点： **一、引入Vue.js文件** 引入Vue.js文件...
100道vue.js面试题+vue面试题
04-13
对于Vue.js开发工程师来说，掌握Vue.js的基础知识和常用工具以及性能优化等是非常重要的。以上面试题可以帮助面试官快速评估应聘者的Vue.js技能水平，同时也可以帮助应聘者了解自己在Vue.js方面的不足和提升方向。
前端知识-vue-3、组件化开发
weixin_44844572的博客
12-12 1015
前端知识-vue-3、组件化开发
第六章：Vue3开篇
m0_61927991的博客
08-27 2440
Vue3知识点
前端知识分享---Vue前置基础知识
weixin_71171795的博客
12-01 537
Vue前置基础知识
Vue3常用知识点总结
凯凯凯凯凯凯凯凯
11-28 2434
Vue3常用知识点总结、setup、ref、reactive、toRefs的使用，以及Vue2与Vue3中的数据响应，还有是否使用＜script setup＞的区别讲解
【vue3】小技巧合集
坚信万物皆可切的切图仔
02-09 1037
vue3小技巧合集，不看就亏了
学习Vue前所一定要知道的事？怎么学？推荐教程？
是小雷同学的博客
04-30 4787
一. Vue简介 简单来说，Vue就是一套用于构建用户界面的渐进式JavaScript框架，现在最主流的前端框架之一。 二. 版本 当前，vue共有3个版本，其中： ①2.x版本的vue是目前企业级项目开发中的主流版本（基础） ②3.x版本的vue于2020-09-19发布，生态还不完善，尚未在企业及项目开发中普及和推广 （升级） ③1.x版本的vue几乎被淘汰，不再建议学习与使用 三. 编程环境 建议使用Visual Studio Code开发环境，不会的同学在csdn上随便找一篇下载安装全教
零基础入门Vue.js 3学习大纲
Alinkfor的博客
11-16 293
1.Vue.js 3的模板、组件、交互处理等基础知识 ①Vue模板的基本用法，包括模板插值、条件与循环渲染的相关语法。这些功能是Vue.js框架提供的基础功能，使用它们能使我们在开发网页应用时事半功倍。 ②Vue组件中属性和方法的相关概念。 将使用面向对象的思路来进行前端程序开发，后续文章的最后会通过一个功能简单的登录注册页面来对大家的掌握情况进行检验。 ③前端应用中用户交互的处理方法。 一个网页如果不能进行用户交互，那么将如一潭死水，毫无生机，用户交互为应用程序带来灵魂。本章除了介绍基础的网页用
大前端学习笔记--Vue.js 3.0
爱玲姐姐的博客
09-29 3479
Vue.js 3.0 介绍 文章内容输出来源：大前端高薪训练营 一、Vue.js 源码组织方式 1. 源码采用TypeScript重写 提高了代码的可维护性。大型项目的开发都推荐使用类型化的语言，在编码的过程中检查类型的问题。 2. 使用Monorepo管理项目结构 使用一个项目管理多个包，把不同功能的代码放到不同的package中管理，每个功能模块都可以单独发布，单独测试，单独使用。 3. 不同构建版本 Vue3中不再构建UMD模块化的方式，因为UMD会让代码有更多的冗余，它要支持多种模块化的方式。V
vue面试题 VUE面试题集
10-22
vue面试题 VUE面试题集

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

不易撞的网名

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

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

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

打赏作者

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

抵扣说明：

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

余额充值