位置: IT常识 - 正文

Vue3详细教程(vue3快速入门)

编辑:rootadmin
Vue3详细教程 一.Vue3的介绍

推荐整理分享Vue3详细教程(vue3快速入门),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3 教程,vue3.0教程,vue3如何,vue3官方教程,vue3 教程,vue3怎么用,vue3 教程,vue3 视频教程,内容如对您有帮助,希望把文章链接给更多的朋友!

相信大家都已经学习过Vue2了,对Vue有了一定的了解。那么今天我们就一起来学习有关Vue3的知识点。那为什么要学习Vue3呢,主要是他有以下的特点。 (1)新增组合式api (2)更加接近原生 (3)更加解耦(react启发)

二.Vue3的安装全局安装脚手架(如果安装过脚手架请忽略这步) npm i @vue/cli -g 创建一个vue3 的项目 vue create 项目名称 选择手动 选择babel ES6转ES5 Router路由 Vuex css预处理器 Linter语法格式检查 选择版本3x(这个一定要注意,与vue2的区别) 选择scss 其他按照如下选择,基本都是默认进入项目,运行到服务器,复制网址可以出现,就说明成功 安装并创建了Vue3的项目三.Vue3的使用一. 推荐插件

在练习项目之前建议大家安装Vscode的两个插件,方便Vue3的学习。分别是 (1)Vue Volar extension Pack (2)Vetur

二.Vue2与VUe3的异同1. Vue2与Vue3基本相同

01 生命周期基本一致

02 与vue2的模板语法基本一致

03 与选项基本一致 data methods,computed watch 一致

2. Vue2与Vue3的不同点(重点)

01 启动方式 (1)vue3的启动方式

import {createApp} from 'vue'createApp(App).use(router).use(store).mount("#app")

(2)vue2的启动方式

import Vue from 'vue'new Vue({ store, router, render:h=>h(App)}).$mount("#app")

02 全局方法挂载 (1)vue2的全局方法挂载

app.config.globalProperties.$say = function(msg){alert(msg)}

(2)vue3的全局方法挂载

Vue.prototype.$say = function(msg){alert(msg)}Vue3详细教程(vue3快速入门)

03 根节点 (1)vue3 可以有多个根节点 (2)vue2 只能有一个根节点(容易出错的点) 04 生命周期,卸载 (1)Vue3

beforeUnmount()组件将要卸载unmounted组件已经卸载

(2)Vue2

beforeDestroy()销毁前destroyed()销毁后

下面是生命周期图示官方图,可供参考

三. 组合式 API:setup()

setup() 钩子是在组件中使用组合式 API 的入口,通常只在以下情况下使用:

需要在非单文件组件中使用组合式 API 时。需要在基于选项式 API 的组件中集成基于组合式 API 的代码时。 其他情况下,都应优先使用 < script setup> 语法。

(1)ref

创建值类型响应式数据方法在seup内部需要 .value 来访问设置值

(2) reactive

创建引用类型响应式数据方法

(3)defineProps

定义 组传的传参props

(4)defineEmits

定义组件发送的事件

(5)watch

监听一个数据的变化

(6)watchEffect

监听多个数据

(7)生命周期

setup中的生命周期,没有beforeCreate与createdsetup的生命周期需要加on前缀四.Vue3的简单练习案例

1.案例1

<template> <div> <h1>你好Vue3</h1> <!-- 02 与2的模板语法基本一致 --> <button @click="num++">{{num}}</button><br/> <input type="text" v-model.number="num" /> <p>{{rmsg}}</p> <button @click="$say('你好老曾')"> 全局</button> </div> <div> <h1>第二个根节点</h1> </div></template><script>export default { // 01 生命周期基本一致 created(){ console.log("你好vue3,from clog") }, data(){ return { num:1, msg:"你好前端开发" } }, // 03 与选项基本一致 data methods,computed watch 一致 computed:{ "rmsg":function(){ return this.msg.split('').reverse().join(""); } }}</script>案例2<template> <div> <h1>setup</h1> <button @click="num++">{{num}}</button> <br> <stepper-com :value="num" @input="num=$event" ref="stepper"></stepper-com> </div></template><script setup>// 使用setup 可以简写(不用导出,组件不用注册了) import StepperCom from '@/components/StepperCom.vue' import {ref,onMounted} from 'vue'; const num = ref(5); const stepper = ref(); onMounted(() => { console.log("组件已经挂载完毕") // 组件挂载完毕引用steper组件 // stepper.value就是对stepper-com 组件的引用 console.log(stepper.value.count) })</script>案例3<template> <div> <h1>生命周期</h1> <button @click="num++">{{num}}</button> <button @click="setNum(num+5)">加5</button> <p v-for="item in list" :key="item">{{item}}</p> <input type="text" v-model="temp" @keyup.enter="addList()"> </div></template><script> // ref 导入一个创建响应式 值类型数据的方法 // reactive 响应式 引用类型方法 import {ref,reactive} from 'vue' export default { setup(){ // 创造一个响应式对象 num 默认值是5 const num = ref(5); // 定义更新num的方法 function setNum(n){ // 在setup 中num的值访问与赋值要加value 在template不需要 num.value = n; } // 返回num // 定义一个响应式列表数据 var list = reactive(["Vue","react","Angular","小程序"]) // 定义temp 临时数据 var temp = ref(""); // 定义添加list 的方法 function addList(){ // 注意值类型访问要加value list.push(temp.value); temp.value = ""; } // 返回 定义的方法与数据 return {num,setNum,list,temp,addList}; }, beforeUnmount(){ console.log("组件将要卸载") }, unmounted(){ console.log("组件已经卸载") } }</script>

以上就是全部内容啦,敬请期待下一篇博客

本文链接地址:https://www.jiuchutong.com/zhishi/300465.html 转载请保留说明!

上一篇:Pytorch+PyG实现MLP(pytorch map)

下一篇:【前端】重学vue,vue生命周期基础知识了解一下(前端使用vue的好处)

  • tf卡是啥

    tf卡是啥

  • 微博无法查看所有关注(微博无法查看对方内容全部人)

    微博无法查看所有关注(微博无法查看对方内容全部人)

  • 小米手机深色模式怎么关闭(小米手机深色模式怎么调回来)

    小米手机深色模式怎么关闭(小米手机深色模式怎么调回来)

  • 朋友圈最多翻到多少天(朋友圈最多翻到朋友多少天动态)

    朋友圈最多翻到多少天(朋友圈最多翻到朋友多少天动态)

  • 抖音搜索记录删掉了还能找到吗(抖音搜索记录删除不了)

    抖音搜索记录删掉了还能找到吗(抖音搜索记录删除不了)

  • 问卷星免费版和付费版区别(问卷星免费版有限制吗)

    问卷星免费版和付费版区别(问卷星免费版有限制吗)

  • 数码摄像机的工作原理是(数码摄像机的工作原理图)

    数码摄像机的工作原理是(数码摄像机的工作原理图)

  • 苹果手机通话记录突然不同步(苹果手机通话记录怎么没有了)

    苹果手机通话记录突然不同步(苹果手机通话记录怎么没有了)

  • 韩剧tv可以在电视上安装吗(韩剧tv可以在电脑上看吗)

    韩剧tv可以在电视上安装吗(韩剧tv可以在电脑上看吗)

  • ps锁定图层(ps锁定图层不透明度)

    ps锁定图层(ps锁定图层不透明度)

  • 闲鱼当面交易安全吗(咸鱼说当面交易)

    闲鱼当面交易安全吗(咸鱼说当面交易)

  • 电子行程单在哪里获取(电子行程单在哪个机场都可以打印吗)

    电子行程单在哪里获取(电子行程单在哪个机场都可以打印吗)

  • 结构化程序设计的基本要点(结构化程序设计的三种基本结构)

    结构化程序设计的基本要点(结构化程序设计的三种基本结构)

  • 抖音null的作品怎么都没有(抖音null视频为什么都删了)

    抖音null的作品怎么都没有(抖音null视频为什么都删了)

  • 如何取消朋友圈上次分组(如何取消朋友圈三天可见)

    如何取消朋友圈上次分组(如何取消朋友圈三天可见)

  • 指纹按键贴什么原理(指纹识别按键贴的利弊)

    指纹按键贴什么原理(指纹识别按键贴的利弊)

  • 摄像头6毫米啥意思(摄像头的6毫米和4毫米)

    摄像头6毫米啥意思(摄像头的6毫米和4毫米)

  • vivo的分辨率在哪设置(vivo手机分辨率在哪里调)

    vivo的分辨率在哪设置(vivo手机分辨率在哪里调)

  • 华为折叠屏手机什么时候上市(华为折叠屏手机哪款最好)

    华为折叠屏手机什么时候上市(华为折叠屏手机哪款最好)

  • 微信没有摇一摇的功能怎么回事(微信没有摇一摇怎么设置)

    微信没有摇一摇的功能怎么回事(微信没有摇一摇怎么设置)

  • 以太网或 Wi-Fi 哪个更好?(以太网连接网络)

    以太网或 Wi-Fi 哪个更好?(以太网连接网络)

  • 电脑系统出问题时如何减少损失?(电脑系统出问题了怎么办)

    电脑系统出问题时如何减少损失?(电脑系统出问题了怎么办)

  • 马格达伦群岛洞穴内部,加拿大魁北克 (© Virginie Fréchette/Getty Images)(马格达拉之战)

    马格达伦群岛洞穴内部,加拿大魁北克 (© Virginie Fréchette/Getty Images)(马格达拉之战)

  • 增值税开票软件怎么升级最新版
  • 服务外包行业要交社保吗
  • 租赁服务增值税税率
  • 核定征收企业所得税应税所得率
  • 普通发票的税费额度高吗
  • 一般纳税人增值税优惠政策
  • 待摊费用和预提费用是按照什么而设置的账户
  • 进口增值税电子税单抵扣
  • 银行对账单用英语怎么说
  • 全资子公司合并报表是权益法还是成本法
  • 转登记小规模纳税人留抵税额
  • 增值税采用
  • 丢失发票已报税证明单取消
  • 营改增广告标牌制作的税务怎么处理
  • 增值税留抵的原因
  • 国税实名认证一般是公司里谁去认证的
  • 统借统还如何缴纳增值税
  • 更换金税盘后数据能恢复么
  • 个人房屋租赁税率2023年
  • 福利费的进项税额转出
  • 预缴时弥补的以前年度亏损是会计亏损吗?
  • 纳税信用a级纳税人激励措施
  • 分公司分税
  • 非公司员工可以交社保吗
  • 健身房会计一般做什么
  • 个体工商户必须税务登记吗
  • 工程施工余额怎么处理
  • 调整上年度多计提费用
  • 收取对方损失赔偿
  • 企业所得税法中规定的收入总额包括
  • 技术转让时增值税怎么算
  • 工业企业出售厂房需要预缴税款吗
  • 工厂的劳务加工有哪些
  • rcapi.exe - rcapi是什么进程 有什么用
  • 少计提的地税怎么做分录
  • 怎么补去年的税
  • win10双系统修改名称
  • php基础语法
  • 电脑打字不显示文字选项
  • 设备进项抵扣新政策
  • Sublime Text v4.0(4143)破解方法
  • 交强险必须交车船税一年多少钱
  • 投资公司收到境外债务
  • 销售退回的处理方法
  • nn.lstm输出
  • php短信验证
  • 接受捐赠物品的入账价值
  • 借方贷方有哪些
  • 其他应收款如何平账
  • 减免增值税要计入营业外收入
  • 开矿泉水发票怎么开?
  • 商品周转率公式
  • 商业折让发票如何开
  • 咨询公司评估选择标准
  • 外购不动产用于办公
  • 企业支付宝问题解决
  • sql中分页
  • mysql5.7重装
  • sql操作方法
  • windows 10预览版
  • Vista 目前的窘境5大原因分析
  • ubuntu怎样
  • mac os图片
  • window出现问题
  • culauncherexe是什么进程
  • win8如何添加我的电脑
  • powergenie是什么程序
  • cocos内存管理
  • opengl光照纹理三个球
  • js domcontentloaded
  • jquery设置title
  • es6十大特性
  • bootstrap 可编辑下拉检索
  • jquery中ajax处理跨域的三大方式
  • unity给物体添加重力
  • 外经证预缴税款网上流程
  • 北京海淀区国税有几个办税大厅?
  • 河北电子税务局怎么使用
  • 消费税的税收筹划案例分析
  • 郑州市地方税务局新郑国际机场分局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设