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

相关推荐
plmm烟酒僧1 分钟前
使用 OpenVINO 本地部署 DeepSeek-R1 量化大模型(第二章:前端交互与后端服务)
前端·人工智能·大模型·intel·openvino·端侧部署·deepseek
Rhys..2 分钟前
js-三元运算符
前端·javascript·数据库
不是,你来真的啊?3 分钟前
Vue3响应式原理(源码)【reactive,ref,computed】
前端·vue·源码
snow@li6 分钟前
前端:拖动悬浮小窗
开发语言·前端·javascript
2301_796512526 分钟前
ModelEngine平台创建知识库体系 ,帮助“前端职业导航师”定制化私域知识累积
前端·modelengine
鹏程十八少8 分钟前
Android ANR项目实战:Reason: Broadcast { act=android.intent.action.TIME_TICK}
android·前端·人工智能
温轻舟8 分钟前
圣诞节雪人动态效果 | HTML页面
开发语言·前端·javascript·html·css3·温轻舟·圣诞
云技纵横8 分钟前
Vue 2 生产构建 CSS 压缩报错修复与深度选择器规范
前端·css·vue.js
Codebee10 分钟前
打破偏见!企业级AI不是玩具!Ooder全栈框架+程序员=专业业务系统神器
前端·全栈
翻斗花园岭第一爆破手13 分钟前
flutter3.Container中的decoration
开发语言·前端·javascript