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

相关推荐
行走的陀螺仪10 分钟前
vue3-封装权限按钮组件和自定义指令
前端·vue3·js·自定义指令·权限按钮
isyuah19 分钟前
vite-plugin-openapi-ts CLI 使用指南
前端·vite
qq_3985865431 分钟前
浏览器中内嵌一个浏览器
前端·javascript·css·css3
abiao198139 分钟前
如何在 VSCode 中创建 Vue 项目
ide·vue.js·vscode
Mapmost1 小时前
地图引擎性能优化:解决3DTiles加载痛点的六大核心策略
前端
San30.1 小时前
Ajax 数据请求:从 XMLHttpRequest 到现代前端数据交互的演进
前端·ajax·交互
西西西西胡萝卜鸡1 小时前
虚拟列表(Virtual List)组件实现与优化铁臂猿版(简易版)
前端·vue.js
宇余2 小时前
Unibest:新一代uni-app工程化最佳实践指南
前端·vue.js
*小雪2 小时前
uniapp写H5授权登录及分享,返回到目标页面
开发语言·javascript·uni-app
性野喜悲2 小时前
ts+uniapp小程序时间日期选择框(分开选择)
前端·javascript·vue.js