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

  • opporeno5耳机孔在哪里(opopreno5pro耳机孔)

    opporeno5耳机孔在哪里(opopreno5pro耳机孔)

  • steam怎么绑定手机令牌(steam怎么绑定手机令牌验证器)

    steam怎么绑定手机令牌(steam怎么绑定手机令牌验证器)

  • 华为p40是单挖孔吗(华为p40pro挖孔屏有什么功能)

    华为p40是单挖孔吗(华为p40pro挖孔屏有什么功能)

  • 抖音大号小号都能直播吗(抖音大号小号都播会不会没有流量)

    抖音大号小号都能直播吗(抖音大号小号都播会不会没有流量)

  • qq音乐全景环绕怎么设置(qq音乐全景环绕有点吊)

    qq音乐全景环绕怎么设置(qq音乐全景环绕有点吊)

  • 华为p40pro需要贴钢化膜吗(华为p40pro有必要贴膜吗)

    华为p40pro需要贴钢化膜吗(华为p40pro有必要贴膜吗)

  • 12v锂电池充不进去电怎么办(12v锂电池充不进电怎么修复)

    12v锂电池充不进去电怎么办(12v锂电池充不进电怎么修复)

  • 打开/关闭中文输入法的快捷键是(关闭中文怎么说)

    打开/关闭中文输入法的快捷键是(关闭中文怎么说)

  • 11pro和11手机壳一样吗(11和11pro手机壳区别)

    11pro和11手机壳一样吗(11和11pro手机壳区别)

  • wifi 光信号显示红点(wifi显示光信号有问题)

    wifi 光信号显示红点(wifi显示光信号有问题)

  • word有画笔功能吗(word画笔功能为啥用不了)

    word有画笔功能吗(word画笔功能为啥用不了)

  • 华为gt和gt2的区别(华为gt 与gt2哪个更建议买)

    华为gt和gt2的区别(华为gt 与gt2哪个更建议买)

  • 电脑话筒插在哪里(电脑话筒插在哪个孔)

    电脑话筒插在哪里(电脑话筒插在哪个孔)

  • 两台手机怎么互传文件(两台手机怎么互相投屏)

    两台手机怎么互传文件(两台手机怎么互相投屏)

  • 华为手机强制恢复出厂设置(华为手机强制恢复出厂设置后激活)

    华为手机强制恢复出厂设置(华为手机强制恢复出厂设置后激活)

  • 快手视频误删怎么恢复(快手视频删除后怎么恢复)

    快手视频误删怎么恢复(快手视频删除后怎么恢复)

  • iphone6s是几核处理器(iphone6 s是什么处理器)

    iphone6s是几核处理器(iphone6 s是什么处理器)

  • ubuntu卸载软件(Ubuntu卸载软件包)

    ubuntu卸载软件(Ubuntu卸载软件包)

  • 手机中了呼死怎么解决(手机呼是什么)

    手机中了呼死怎么解决(手机呼是什么)

  • 如何识别呼叫转移来电(如何识别呼叫转移来电安卓手机)

    如何识别呼叫转移来电(如何识别呼叫转移来电安卓手机)

  • 怎么查找以前的手机号(怎么查找以前的微信聊天记录)

    怎么查找以前的手机号(怎么查找以前的微信聊天记录)

  • 黑鲨2是哪个牌子的(黑鲨2是哪个牌子的手机)

    黑鲨2是哪个牌子的(黑鲨2是哪个牌子的手机)

  • oppoFindx怎么设置动态壁纸(oppofindx怎么设置微信密码锁)

    oppoFindx怎么设置动态壁纸(oppofindx怎么设置微信密码锁)

  • 如何运行vue项目(超详细图解)(运行vue项目的快捷键)

    如何运行vue项目(超详细图解)(运行vue项目的快捷键)

  • Discuz!管理员无法登录后台时更新系统缓存的方法(discuz管理中心进不去)

    Discuz!管理员无法登录后台时更新系统缓存的方法(discuz管理中心进不去)

  • 委托加工物资的成本包括哪些内容
  • 小规模纳税人如何做账
  • 税后营业利润怎么算出来的
  • 国税地税合并是成功的还是失败的
  • 工资走账是什么意思
  • 自产用于捐赠的会计处理
  • 存货的期末余额在借方还是贷方
  • 销项负数发票能用吗
  • 决算报表与账不一致怎么调账
  • 报废的机器设备怎么处理
  • 支付给个人的佣金费用需要发票吗
  • 更改开票信息需要多久
  • 销售商品收到的银行本票
  • 一般纳税人简易征收最新政策2023
  • 进项税加计扣除什么时候开始的
  • 建筑业工程项目登记是哪方提交
  • 企业的车辆因违法停放
  • 机器保养计入什么
  • 多缴所得税返还现金流
  • 递延所得税费用为负数是什么意思
  • 印制宣传册
  • 用友t3修改帐套怎样修改企业会计准则
  • 旅行社成本票没有收到,怎么挂账
  • 本期销售额未达起征点请将本期应纳税额
  • 企业汇算清缴后还能更正吗
  • 借主营业务成本贷应付账款
  • 电子税务局怎么查看已开发票
  • 已知不含税金额和增值税如何计算税率
  • 金税盘发行后什么时候可以用
  • 哪些费用可以税前扣除
  • 应收账款无法收回确认为坏账会计分录
  • 完工转出产成品成本计算
  • 服务器centos6.9安装教程
  • 极易一键重装系统怎么用
  • 其他应付款年末怎么结转
  • 盈余公积转增资本会计科目
  • vue antdesign
  • 什么情况下可以土葬
  • 有利润但不交企业所得税
  • java开发和运维
  • java后端代码例子
  • python replace 多个
  • 固定资产怎么确认价值
  • 金蝶利润表出现科目
  • 开票地址必须和营业执照上一样吗少个字号可以吗
  • 企业没收入也要交税吗
  • 土地增值税间接转让怎么算
  • 在建工程包括哪些大类科目
  • 车辆购置税滞纳金上限
  • 收到残障金退回怎么处理
  • 应交税费借方是增加还是减少
  • 金税盘的维护费怎么报税
  • 新会计制度固定资产折旧账务处理
  • 合并企业如何缴纳印花税
  • 政府补助收入总额法会计分录
  • 工程维修款扣多少
  • 库存商品太多
  • 长期股权投资全部亏损汇算清缴怎么填
  • 带抵扣进项分录
  • 先进先出法实际成本跟成本不一样吗
  • 工会经费应计入
  • 小规模纳税人购入货物收到增值税专用发票
  • 年底计提利息会计分录
  • 数据库 mysql
  • 微软推出新系统发布会
  • linux如何用
  • CentOS安装配置adb环境
  • solaris netstat
  • xp系统的存储在哪里
  • macbook怎么隐藏
  • linux top命令详解内存过高查询
  • 在cenots下使用iso光盘文件重新安装CentOS的方法步骤
  • linux系统下hosts文件详解及配置
  • 深入理解typescript 豆瓣
  • table css 模板
  • unity3d 物体移动
  • android图片透明度怎么设置
  • 微信内置浏览器怎么清除缓存
  • unity中物体移动代码
  • android 获取手机屏幕截图
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设