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 分钟前
盟接之桥--说制造:从“找缝隙”到“一万米深”——庖丁解牛式的制造业精进之道
大数据·前端·数据库·人工智能·物联网·制造
巴拉巴拉~~4 分钟前
Flutter 通用滑块组件 CommonSliderWidget:单值 / 范围 + 刻度 + 标签 + 样式自定义
开发语言·前端·javascript
期待のcode27 分钟前
验证码实现
java·vue.js
韭菜炒大葱28 分钟前
现代前端开发工程化:Vue3 + Vite 带你从 0 到 1 搭建 Vue3 项目🚀
前端·vue.js·vite
老华带你飞29 分钟前
志愿者服务管理|基于springboot 志愿者服务管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·spring
有意义35 分钟前
从 useState 到 useEffect:React Hooks 核心机制详解
javascript·react.js·前端工程化
栀秋66636 分钟前
面试常考的最长递增子序列(LIS),到底该怎么想、怎么写?
前端·javascript·算法
Melrose38 分钟前
Flutter - 使用Jaspr来构建SEO友好网站
前端·flutter
有意义39 分钟前
让宠物打冰球!手把手教你用 Coze 多模态工作流 + Vue 3 打造 AI 拟人生成器
vue.js·前端工程化·coze
有点笨的蛋40 分钟前
Vue3 项目:宠物照片变身冰球运动员的 AI 应用
前端·vue.js