vue3基础教学（1）

已于 2022-08-04 10:52:55 修改
阅读量540 收藏 13
点赞数 25
文章标签： vue.js javascript 前端
于 2022-08-03 20:18:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Taojia9958/article/details/126147886
版权

1.性能的提升

  • 打包大小减少41%

  • 初次渲染快55%, 更新渲染快133%

  • 内存减少54%

2.源码的升级

  • 使用Proxy代替defineProperty实现响应式

  • 重写虚拟DOM的实现和Tree-Shaking

3.支持TypeScript

  • Vue3可以更好的支持TypeScript

4.新的特性

  1. Composition API（组合API）

    • setup配置
    • ref与reactive
    • watch与watchEffect
    • provide与 inject

  2. 新的内置组件

    • Fragment
    • Teleport
    • Suspense

  3. 其他改变

    • 新的生命周期钩子
    • data 选项应始终被声明为一个函数
    • 移除keyCode支持作为 v-on 的修饰符

1.创建一个Vue项目

 

    
 
  1.  
    ## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
     
    2. 
 
  2.  
    vue --version
     
    3. 
 
  3.  
    ## 安装或者升级你的@vue/cli
     
    4. 
 
  4.  
    npm install -g @vue/cli
     
    5. 
 
  5.  
    ## 创建Vue项目，选择Vue3
     
    6. 
 
  6.  
    7. 


                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  I`ivresse
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    25
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    13
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  25
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
vue3实战-完全掌握ref、reactive

				
			

			

				

					yyds2026的博客
				

				

					10-18
					
					824
					
				

			

		

		

			
				
知道大家使用 Vue3 的时候有没有这样的疑惑，“ref、rective 都能创建一个响应式对象，我该如何选择？”，“为什么响应式对象解构之后就失去了响应式？应该如何处理？” 今天咱们就来全面盘点一下 ref、reactive，相信看完你一定会有不一样的收获，一起学起来吧！

			
		

	



                

              
                



	

		

			

				
					
vue基础教学（3）

				
			

			

				

					Taojia9958的博客
				

				

					05-24
					
					189
					
				

			

		

		

			
				
一、计算属性的基本使用


<body>
		<div id="app">
			<p>{{firsrName}}-{{lastName}}</p>
			<p>{{getFullName()}}</p>
			<p>{{fullName}}</p>
		</div>
		<script src="../../vue.js" type="text/javascript" charset="utf

			
		

	



                


  
              

                


	

		

			

				
					
Vue3（撩课学院）笔记01-创建实例对象，v-for遍历，时间绑定，传参，时间修饰符，计算属性，v-if，v-show，深拷贝，v-model与各类表单的绑定

				
			

			

				

					weixin_43745804的博客
				

				

					07-15
					
					1277
					
				

			

		

		

			
				
1、概述



			
		

	





	

		

			

				
					
【Vue3】使用ref与reactive创建响应式对象

				
			

			

				

					null18的博客
				

				

					02-20
					
					5015
					
				

			

		

		

			
				
先来简单介绍一下ref，它可以定义响应式的变量let xxx = ref(初始值)。**返回值：**一个RefImpl的实例对象，简称ref对象或refref对象的value属性是响应式的。JSxxx.value，但模板中不需要.value，直接使用即可。对于let name = ref('张三')来说，name不是响应式的，name.value是响应式的。下面我们看一看上图红框中代表的意思是，我们哪里需要响应就在哪个里面导入上述代码即可。

			
		

	



		

			
		



	

		

			

				
					
从入门到精通：Vue3一篇文章搞定！

					
最新发布

				
			

			

				

					唯见青山不见君
				

				

					06-04
					
					913
					
				

			

		

		

			
				
从入门到精通：Vue3一篇文章搞定！

			
		

	





	

		

			

				
					
vue3.0的对象创建及绑定标签id-1

				
			

			

				

					hrj199036的博客
				

				

					08-01
					
					2010
					
				

			

		

		

			
				
vue3.0的对象创建及绑定标签id说明一、vue3.0的对象创建二、绑定标签id完
说明

本教程适用于Vue3.X版本
vue3.0的对象创建
绑定标签id

一、vue3.0的对象创建

代码

Vue.createApp(字典)


讲解
Vue是指vue3.x,createApp()是vue的实例化。字典是传相关参数。

二、绑定标签id

代码

Vue.createApp().mount(id)


讲解
mount(id),mount增加之意，绑定id及类标签的作用

完

...

			
		

	





	

		

			

				
					
vue中组件如何创建使用、传值

				
			

			

				

					Keep__Me的博客
				

				

					09-09
					
					551
					
				

			

		

		

			
				
有时候我们会碰到这样的需求，让你把前端某个功能封装成一个组件或者让你直接调用某个组件实现某个功能。
这都需要我们有组件相关的知识。下面我们就来说说关于vue组件的一些知识，关于组件如何创建，组件功能写好后如何传参进行使用的问题。
我们在前端项目中新建文件的时候会发现，直接就有创建Vue Component这个选项，就是创建一个vue组件。这里我们直接创建。

通过这个创建，创建出来的组件部分并不完整，其他的props、data、methods、mounted是我加上去的。
我们其实会发现，这个组件跟一个正常

			
		

	





	

		

			

				
					
vue3(1)

				
			

			

				

					weixin_47711599的博客
				

				

					09-09
					
					1235
					
				

			

		

		

			
				
Vue3.0

了解vue3.0：
（1）简要了解

Vue.js 3.0“one Piece”正式版再20年9月份发布
	Vue3支持vue2的大多数特性
	更好的支持TS
性能提升
打包大小减少41%
	初次渲染快55%，重新渲染快133%
	内存减少54%
	使用proxy代替defineProperty实现数据响应式
	重写虚拟DOM的实现和Tree-Shaking（摇树）
新增特性
Composition（组合）API
	Setup
ref和reactive

computed和watch

新的

			
		

	





	

		

			

				
					
03_Vue 实例对象

				
			

			

				

					最爱嫣夜来
				

				

					09-18
					
					232
					
				

			

		

		

			
				
1、vue的引入方式
两种方式
方式一 下载vue.js源文件，使用script标签引入
<script src="./vue.js"></script>

方式二 CDN服务提供的联网引入，前提是你的开发环境可以接入外网
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"><...

			
		

	





	

		

			

				
					
vue3.0新特性集合

				
			

			

				

					a347867019的博客
				

				

					12-03
					
					236
					
				

			

		

		

			
				
动态属性
<a v-bind:[attributeName]="url"> ... </a>

<a v-on:[eventName]="doSomething"> ... </a>

外露$data属性和方法
const app = Vue.createApp({
  data() {
    return { count: 4 }
  },
  methods: {
    increment() {
      // `this` 指向该组件实例
   

			
		

	





	

		

			

				
					
VUE3对象和数组完整响应原理代码和详解

				
			

			

				

					m0_73334402的博客
				

				

					02-28
					
					1626
					
				

			

		

		

			
				
【代码】VUE3对象和数组完整响应原理代码和详解。

			
		

	





	

		

			

				
					
vue3基础知识+基础框架搭建

				
			

			

				

					LB_bei的博客
				

				

					05-16
					
					1265
					
				

			

		

		

			
				
导出export 内容export {内容1,内容2}#导入

			
		

	





	

		

			

				
					
Vue3：vue-cli项目创建及vue.config.js配置

				
			

			

				

					米拉
				

				

					01-08
					
					2407
					
				

			

		

		

			
				
是JavaScript的超集（.ts文件），包含并扩展了 JavaScript 的语法。项目创建Vue 2.x、Vue 3.x 或自定义，默认版本vue3.x和vue2.x无需配置，自定义需配置。通过 ↑↓ 箭头选择依赖，按 “空格” 是否选中，按 “a” 全选，按 “i” 反选。自定义选择需要支持的特性 （ ↓ 不使用任何css或js扩展）vuex（vue的状态管理模式、store）CSS 预处理器（如：less、sass）代码风格检查和格式化（如：ESlint）vue-router（vue路由）

			
		

	





	

		

			

				
					
vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）

					
热门推荐

				
			

			

				

					逆境清醒的博客
				

				

					03-19
					
					6万+
					
				

			

		

		

			
				
vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）
一、搭建vue3 项目前提条件
二、通过create-vue搭建vue3 项目
三、搭建一个 Vite 项目
四、构建一个 Vite + Vue 项目
五、Vite + Vue 项目目录结构
六、Vite.config.ts配置

			
		

	





	

		

			

				
					
Vue进阶：Vue特点和优点介绍，以及开发环境搭建和构建Vue3.0项目的几种方法

				
			

			

				

					SteveRocket's-Blog
				

				

					08-21
					
					1933
					
				

			

		

		

			
				
Vue.js致力于构建数据驱动的web应用开发框架，是一个精简的MVVM。Vue.js 专注于 MVVM模型的 ViewModel 层。简单的数据操作，就可以完成页面的更新，当然也有很多类似的框架，如Angular，React，但是Vue以简洁化，轻量级，数据驱动，模块友好等优势深受企业以及前端开发者的喜爱，成为前端开发人员必备的技能。

			
		

	





	

		

			

				
					
浅谈Vue2和Vue3在创建Vue实例上的区别

				
			

			

				

					Dax1_的博客
				

				

					03-10
					
					1522
					
				

			

		

		

			
				
Vue2.x
Vue2是通过new Vue()，构造函数的方式来创建实例
import Vue from 'Vue'
import APP from './APP.vue'

const vm = new Vue({
	render:h => h(APP)
})
vm.$mount('#app')

Vue3.x
Vue3通过createApp工厂函数来创建实例
import {createApp} from 'vue'
import APP from './APP.vue'

const app =

			
		

	





	

		

			

				
					
Vue3 详细教程

				
			

			

				

					qq15035899256的博客
				

				

					05-23
					
					1万+
					
				

			

		

		

			
				
本文是对Vue的学习，学习了Vue的选项式API和组合式API，组件之间的交互，引入swiper第三方插件，网络请求封装，还有Router路由，Vuex状态管理，加载Element-plus组件。之后的学习内容将持续更新！！！

			
		

	





	

		

			

				
					
Vue3详细教程

				
			

			

				

					m0_55734030的博客
				

				

					11-06
					
					2万+
					
				

			

		

		

			
				
（1）新增组合式api（2）更加接近原生（3）更加解耦（react启发）setup api
	ref 
		创建值类型响应式数据方法
		在seup内部需要 .value 来访问设置值
	reactive
		创建引用类型响应式数据方法
	defineProps
		定义 组传的传参props
	defineEmits
		定义组件发送的事件
	watch
		监听一个数据的变化
	watchEffect 
		监听多个数据
	生命周期
		setup中的生命周期，没有beforeCreate与create

			
		

	





	

		

			

				
					
Vue3开发教程（一、学习Vue前需要了解的内容)

				
			

			

				

					weixin_39873136的博客
				

				

					03-15
					
					3500
					
				

			

		

		

			
				
简单介绍学习Vue开发需要了解的相关技术，包括html、javascript，css、Node.js、NPM、TypeScript、Vite、Element Plus。并整合了相关资源

			
		

	





	

		

			

				
					
黑马程序员vue2 vue3资料

				
			

			

				

					09-11
				

			

		

		

			
				
2. 黑马程序员Vue.js课程：黑马程序员提供了丰富的Vue.js课程，包括Vue.js 2和Vue.js 3的基础和进阶课程。你可以在他们的官方网站https://www.itheima.com上找到相关信息。  3.＊＊＊质的Vue.js教学视频。  4. Vue ...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 25

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值