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

相关推荐
s19134838482d7 分钟前
javascript练习题
开发语言·javascript·ecmascript
这是个栗子22 分钟前
前端开发中的常用工具函数(二)(持续更新中...)
开发语言·前端·javascript
苦藤新鸡27 分钟前
38.交换二叉树中所有的左右节点
开发语言·前端·javascript
2501_944521591 小时前
Flutter for OpenHarmony 微动漫App实战:主题配置实现
android·开发语言·前端·javascript·flutter·ecmascript
2501_944521591 小时前
Flutter for OpenHarmony 微动漫App实战:动漫卡片组件实现
android·开发语言·javascript·flutter·ecmascript
lina_mua1 小时前
Cursor模型选择完全指南:为前端开发找到最佳AI助手
java·前端·人工智能·编辑器·visual studio
董世昌411 小时前
null和undefined的区别是什么?
java·前端·javascript
软弹2 小时前
Vue2 的数据响应式原理&&给实例新增响应式属性
前端·javascript·vue.js
浅水壁虎2 小时前
任务调度——XXLJOB3(执行器)
java·服务器·前端·spring boot
晚霞的不甘2 小时前
Flutter 布局核心:构建交互式文档应用
开发语言·javascript·flutter·elasticsearch·正则表达式