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联动才能激活响应式

相关推荐
jktantan4 小时前
每个节点 41 字节:把一棵百万节点树拆进 14 个 typed array
前端·javascript·vue.js·算法·typescript
小大宇7 小时前
Vue知识点-ElementPlus-06 单选+多选+下拉+日期选择
前端·vue.js·elementui
小大宇9 小时前
Vue知识点-ElementPlus-05 输入框
前端·javascript·vue.js
软件技术NINI9 小时前
基于SpringBoot和Vue的摇滚乐鉴赏网站
vue.js·spring boot·后端·spring·html·毕业设计·毕设
计算机毕设定制辅导-无忧学长10 小时前
《基于物品协同过滤的闲置书换购微信小程序设计开发》
java·vue.js·spring boot·微信小程序·uniapp·闲置书换购微信小程序·物品协同过滤算法
Dwzun10 小时前
基于SpringBoot3+Vue3的油莎豆种植管理系统
java·前端·vue.js·spring boot·后端·python·计算机网络
她说可以呀19 小时前
Vue插槽
前端·javascript·vue.js
qq_4480111620 小时前
Vue + Jinja2两套模版与法冲突造成undefinedError
前端·javascript·vue.js
志尊宝21 小时前
AI原生前端开发(039):AI辅助的Nuxt 4全栈开发
前端·vue.js·ai-native
兰亭妙微UI设计公司1 天前
兰亭妙微ui设计公司分享:B端组件命名如何支持团队协作
前端·javascript·vue.js