位置: 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的好处)

  • 问卷星能看到微信昵称吗(问卷星能看见微信号吗)

    问卷星能看到微信昵称吗(问卷星能看见微信号吗)

  • 微信完成群待办别人能看到吗(微信完成群待办怎么取消掉)

    微信完成群待办别人能看到吗(微信完成群待办怎么取消掉)

  • 小米解锁绑定验证失败(小米解锁绑定验证怎么弄)

    小米解锁绑定验证失败(小米解锁绑定验证怎么弄)

  • 文字后面的下划线怎么添加不上(文字后面的下划线出不来)

    文字后面的下划线怎么添加不上(文字后面的下划线出不来)

  • 抖音怎么设置不在线状态(抖音怎么设置不让别人评论)

    抖音怎么设置不在线状态(抖音怎么设置不让别人评论)

  • 钉钉怎么提前录播(钉钉怎么提前录播课)

    钉钉怎么提前录播(钉钉怎么提前录播课)

  • 申请微信号怎么申请(申请微信号怎么做)

    申请微信号怎么申请(申请微信号怎么做)

  • 键盘小写字母按哪个键(键盘输入小写字母)

    键盘小写字母按哪个键(键盘输入小写字母)

  • 华为nova7pro有没有无线充电(华为nova7pro有没有遥控功能)

    华为nova7pro有没有无线充电(华为nova7pro有没有遥控功能)

  • u盘能保存数据多久(u盘能保存数据吗)

    u盘能保存数据多久(u盘能保存数据吗)

  • 淘宝夜间模式怎么设置(淘宝夜间模式怎么打开安卓)

    淘宝夜间模式怎么设置(淘宝夜间模式怎么打开安卓)

  • 电脑打字会跳到别的界面(电脑打字跳到左上角)

    电脑打字会跳到别的界面(电脑打字跳到左上角)

  • 人脸识别失败多久恢复(人脸识别失败多久能恢复)

    人脸识别失败多久恢复(人脸识别失败多久能恢复)

  • oppofindx2什么时候上市(oppofindx2大概什么时候降价)

    oppofindx2什么时候上市(oppofindx2大概什么时候降价)

  • web标准主要包括(web标准主要包括什么内容)

    web标准主要包括(web标准主要包括什么内容)

  • 抖音被限流可以恢复吗(抖音被限流可以投抖加吗)

    抖音被限流可以恢复吗(抖音被限流可以投抖加吗)

  • ipad a1432是几代(ipad a1432是第几代)

    ipad a1432是几代(ipad a1432是第几代)

  • 淘宝为什么变成乡村版(淘宝为什么变成灰色11.30)

    淘宝为什么变成乡村版(淘宝为什么变成灰色11.30)

  • 手机不亮屏怎么办(手机不亮屏怎么拍照)

    手机不亮屏怎么办(手机不亮屏怎么拍照)

  • 增加内存条怎么设置(内存条如何增加)

    增加内存条怎么设置(内存条如何增加)

  • 荣耀9x有快充吗(荣耀9x有快充吗可不可以换个快充头)

    荣耀9x有快充吗(荣耀9x有快充吗可不可以换个快充头)

  • 腾讯笔试可以用计算器吗(腾讯笔试可以用ipad考吗)

    腾讯笔试可以用计算器吗(腾讯笔试可以用ipad考吗)

  • 苹果xs处理器多少(苹果xs处理器是多大的)

    苹果xs处理器多少(苹果xs处理器是多大的)

  • 手机微博怎么发帖(手机微博怎么发作品)

    手机微博怎么发帖(手机微博怎么发作品)

  • 一加7pro可以无线充电吗(一加7pro可以无线)

    一加7pro可以无线充电吗(一加7pro可以无线)

  • iphone7强制恢复出厂(iphone7强制恢复出厂设置重新激活)

    iphone7强制恢复出厂(iphone7强制恢复出厂设置重新激活)

  • 苹果x耳机插上没反应(iphone耳机插上)

    苹果x耳机插上没反应(iphone耳机插上)

  • 人工智能内容生成元年—AI绘画原理解析(人工智能内容生成)

    人工智能内容生成元年—AI绘画原理解析(人工智能内容生成)

  • 出口退免税管理工作规范2.0
  • 房地产开发企业资质管理规定
  • 增值税进项税抵扣时间
  • 小规模纳税人有增值税吗
  • 每个月必报的税种
  • 记账凭证填错了怎么改
  • 生产企业内销和出口
  • 新办企业能否享受留抵退税
  • 低值易耗品残料有哪些
  • 减少实收资本会引起资产和所有者权益发生变化吗
  • 政府转账捐赠怎么做分录
  • 企业进货不收发票怎么做帐?
  • 购买沙子违法吗
  • 出售全资子公司合并报表怎么做
  • 增值税纳税申报表怎么填
  • 印花税这个月没交下个月补报可以吗?
  • 利润表申报本年怎么填
  • 委托代收款
  • 建筑材料营改增之前怎么开发票
  • 法人变更后的涉税问题
  • 利润表适用执行小企业
  • 企业所得税分期收款确认收入的时间政策
  • 此次新政策对原来就是小型微利企业的纳税人有影响吗?
  • 软件著作权认证查询
  • mac怎么打出@符号
  • Windows11安装不了空件怎么处理
  • 新笔记本怎么激活windows11
  • 推广费开票属于什么费用
  • xampp如何运行php项目
  • 电脑怎样进入cmos设置
  • win7系统还原系统保护关闭
  • PHP:pg_fetch_result()的用法_PostgreSQL函数
  • 怎么查上市公司
  • jusched.exe
  • php gd
  • 资产减值损失如何录入
  • 弗吉尼亚理工大学美国排名
  • 玩转ChatGPT:中科院ChatGPT Academic项目部署与测评
  • 小企业其他应收款坏账处理
  • 消防工程材料费用占比
  • 以个人名义和公司名义入股的利弊
  • 租金计入主营业务成本吗
  • 三代手续费企业所得税
  • 所得税申报表营业成本包括管理费用吗
  • java 访问者模式
  • 赠品怎么做
  • 第四季度报表和年报对不上
  • 金蝶软件如何建立新账套
  • 房产税从租和从价都要交吗
  • 个人住房租赁给公司如何开票
  • 分公司计提递延所得税吗
  • 固定资产未登记入账
  • 小规模纳税人收入会计分录
  • 给员工的奖金计入什么科目
  • 公司员工报销没有发票挂内账有风险吗
  • 商场收取租户电费合法吗
  • 国有独资企业是有限责任公司吗
  • 销售加工费怎么记账
  • 暂估入库的商品可以结转成本吗?
  • 房地产企业如何结转成本
  • 主营业务成本如何做分录
  • 发生额怎么计算
  • 专用发票给客户的都要盖章吗
  • linux快速清空大日志文件
  • U盘安装centos8
  • ubuntu安装office2019
  • wingate.exe - wingate是什么进程
  • 一岁的宝宝可以喝枸杞水吗
  • ubuntu 18.04怎么用
  • ptssvc.exe - ptssvc是什么进程 有什么用
  • Linux系统怎么设置窗口关闭按键在右侧
  • win10升级最新版
  • linux系统默认启动级别
  • linux系统mysql自动备份并使用ftp上传的方法
  • node.js中的http.createClient方法使用说明
  • node.js操作
  • jquery获取文件大小
  • 如何在税务系统缴纳医保
  • 武汉 税务局
  • 广东省电子税务局app下载官网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设