vue3基础

vue3的优势

作为我们应该注重了解源码和新的特性

新的特性我们挨着来了解

首先是创建工程

第一种方式也是命令行 直接vue create 文件名创建vue3

第二种可以vite创建

也是直接命令行创建和第一种差不多

首先是组合式CompositionApi

vue3中新的写法就是全部写在setup函数中很方便

代码示例如下:

setup(){

let name =ref("张三")

let age = ref(18)

let job = ref({

type:"前端工程师",

salary:"30k"

})

function sayHello(){

alert(`我叫{name},今年{age}岁`)

}

function changInfo(){

name.value='李四'

age.value = 20

job.value.type="UI工程师"

job.value.salary="40k"

console.log(name,age)

}

return{

name,

age,

job,

sayHello,

changInfo

}

}

将一切都定义在里面,然后最后return出去,外面直接用,如果要使用响应式的一定要用ref把数据包裹

调用时候是xxx.value

相关推荐
爱学习的茄子2 分钟前
Function Call:让AI从文本生成走向智能交互的技术革命
前端·深度学习·openai
aol1213 分钟前
X6官方示例「数据加工DAG图」转为Vue版
前端·vue.js
南雨北斗4 分钟前
vue3 attribute绑定
前端
一枚前端小能手4 分钟前
🚀 主线程卡死用户要骂娘?Web Worker让你的应用丝滑如德芙
前端·javascript
小桥风满袖7 分钟前
极简三分钟ES6 - Promise
前端·javascript
breeze_whisper8 分钟前
当前端收到一个比梦想还大的数字:BigInt处理指南
前端·面试
小喷友8 分钟前
阶段四:实战(项目开发能力)
前端·rust
小高0079 分钟前
性能优化零成本:只加3行代码,FCP从1.8s砍到1.2s
前端·javascript·面试
用户66982061129829 分钟前
vue3 hooks、utils、data这几个文件夹分别是放什么的?
javascript·vue.js
子兮曰10 分钟前
🌏浏览器硬件API大全:30个颠覆性技术让你重新认识Web开发
前端·javascript·浏览器