vue3快速入门

一、准备

1、引入vue模块,导入createApp函数

2、创建vue程序应用实例

createApp函数大括号进行传参

3、准备元素div,被vue控制

createApp函数链式调用mount()方法用于控制页面标签div,mount()方法中的参数app是div的id

注意:参数要加#,标签被vue控制,该标签下的子标签也会被控制

二、构建用户界面

1.准备数据

2.用插值表达式渲染页面

插值表达式就是两个花括号,里面是键名:<h1>{{msg}}<h1>

data函数定义数据

渲染结果:

三、vue的生命周期

常用的就两三个,这里记住mounted就行

四、Vue项目创建和启动

Vue项目目录结构

vue项目启动

五、vue项目开发流程

第一种是vue2的写法,export default{}默认导出js对象

第二种是vue3写法,响应式(数据页面相互绑定),硬性要求要在script标签里面加上setup

六、vue的API风格

组合式api需要将数据设置为响应式数据,必须与ref联动才能激活响应式

相关推荐
涵涵(互关)2 小时前
JavaScript 对大整数(超过 2^53 - 1)的精度丢失问题
java·javascript·vue.js
天府之绝3 小时前
uniapp 中使用uview表单验证时,自定义扩展的表单,在改变时无法触发表单验证处理;
开发语言·前端·javascript·vue.js·uni-app
xkxnq4 小时前
第二阶段:Vue 组件化开发(第 20天)
前端·javascript·vue.js
刘一说4 小时前
腾讯位置服务JavaScript API GL地图组件库深度解析:Vue生态中的地理空间可视化利器
javascript·vue.js·信息可视化·webgl·webgis
*才华有限公司*4 小时前
#从401到200:Spring Boot + Vue 静态资源访问全链路问题解决方案
vue.js·spring boot·后端
Tim_Van4 小时前
彻底解决:80 端口 GET/POST 正常,PUT 却报 ERR_CONNECTION_RESET?
java·vue.js·spring boot·ruoyi·若依
amazing-yuan4 小时前
彻底解决该 TS 报错 + 提升编译效率
前端·javascript·vue.js·typescript·vue·异常报错处理
dy17174 小时前
element-ui输入框换行符占位问题处理
vue.js·elementui
小马_xiaoen4 小时前
Vue3 实现超丝滑打字机效果组件 - 进阶
javascript·vue.js·ecmascript