vue3学习笔记

已于 2023-02-13 17:26:17 修改
阅读量295 收藏 4
点赞数 1
文章标签： 学习 前端 javascript
于 2023-02-11 09:02:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54422936/article/details/128973790
版权

目录

 一、之前知识回顾

二、vue3部分

        一、基于vite创建SPA项目

                 1、创建vite的项目

                 2、vite下的项目结构

                 3.vite项目的运行流程

             二、组件

                1.template中定义根节点

                2.script 节点

                3.name节点

                4. stuyle 节点

                         4.1less语法

                5.组件注册时的命名

                6. deep穿透（和vue2有差别） 

                 7. 组件的 props

                 7.1 什么是组件的props属性

                 7.2 在组件中声明props组件

                 7.2 无法使用未申明的props

                 7.3 动态绑定props的值

                 8. Class与Style的绑定

                        8.1 动态绑定HTML的class

                8.2 以数组语法绑定HTML的 class 

                 8.3 以对象的语法格式绑定HTMl的class

                8.4 以对象语法绑定内联的style 

基于vue2基础的学习

学习视频：  Vue基础-00课程介绍_哔哩哔哩_bilibili

 一、之前知识回顾

 

 

二、vue3部分

        一、基于vite创建SPA项目

                1、创建vite的项目

                 2、vite下的项目结构

                 3.vite项目的运行流程

             二、组件

                  1.template中定义根节点

 

                 2.script 节点

                3.name节点

                4. stuyle 节点

                         4.1less语法

                 5.组件注册时的命名

                6. deep穿透（和vue2有差别） 

        

 

                 7. 组件的 props

                 7.1 什么是组件的props属性

                 7.2 在组件中声明props组件

                 7.2 无法使用未申明的props

                 7.3 动态绑定props的值

                8. Class与Style的绑定

                        8.1 动态绑定HTML的class

     

                8.2 以数组语法绑定HTML的 class 

                 8.3 以对象的语法格式绑定HTMl的class

                8.4 以对象语法绑定内联的style 

        三、props验证

                1.什么是props验证

                2.对象类型的props节点 

                 3. props验证

 

                4. props的自定义函数

        四、自定义事件

                1.什么是组件的自定义事件

                2.自定义事件的三个使用步骤 

 

                         2.1 声明自定义事件

                         2.2 触发自定义事件

                        2.3 监听自定义事件 

                 3. 自定义事件传参

        五、v-model  

                1、为什么需要在组件上使用v-model

 

                2、在组件上使用 v-model的步骤 (父子组件之间的传值)

        六、vuex.3中全局配置axios

                1. 为什么要全局配置axios

                 2.如何全局配置axios

 

小熊你快看
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3学习记录
qq_60646136的博客
08-30 424
使用Vue3的组合API封装的可复用的功能函数自定义hook的作用类似于Vue2的mixin技术自定义hook的优势：很清楚复用功能代码 的来源，清楚易懂// hook函数的封装 新建hook文件夹 ---> 新建hook文件.ts export default function() {// 封装内容 return {} } // hook函数的使用 // 引入hook函数 import useRequest from './hooks/useRequest' const {......
vue2+vue3学习笔记
02-20
Vue2+Vue3 学习笔记 mounted 和 updated 在 Vue 中，`mounted` 和 `updated` 是两个非常重要的生命周期钩子函数。`mounted` 在页面初次加载时调用，而 `updated` 在数据改变并且要在页面重新渲染完成之后调用。...
vue3学习记录
m0_45127388的博客
02-27 181
vue3
vue3 学习记录
TangAcrab的博客
09-08 244
vue 学习记录 setup 1、 setup 函数为组合式 api 的入口，数据、方法、watch、computed、生命周期钩子 都要配置在 setup 中 2、如果 setup 返回一个对象，则对象中的属性、方法、在模板中可以直接使用。 3、setup 返回一个渲染函数时，会重新渲染 dom 为渲染函数的返回值 4、setup 不能是一个 async 函数 ref 函数 ref 定义一个响应式的数据。创建一个包含响应式数据的引用对象。 reference 对象 1、被 ref 函数包裹的数据会变成一
vue3详细学习笔记记录
qq_38676663的博客
12-03 335
vue3学习笔记记录，总结的比较全
vue 3 学习笔记 vue3 vue3学习笔记
10-18
Vue 3 学习笔记 本文是关于 Vue 3 的学习笔记，涵盖了 Vue 3 的基础知识点，包括 Setup、Reactive、Ref、计算属性、Watch、生命周期函数、父子组件通信、Hook 等。 一、Setup Setup 是 Vue 3 中的组合式 API 的...
vue3学习笔记，亲测有效，持续更新
06-14
小白上手神器，记录的是我每天学习vue3的笔记，有的收费视频观看了好几遍，亲测有效，持续更新
Vue3快速上手(Vue3学习笔记)
07-11
Vue3快速上手(Vue3学习笔记) .Vue3简介 - 2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王） - 耗时2年多、[2600+次提交](https://github.com/vuejs/vue-next/graphs/commit-activity)、[30+个RFC]...
vue3学习笔记及面试题
02-14
vue3学习笔记及面试题
vite-h5:Vite + Vue3.0 SPA Application 基于Vite2.0的移动端SPA工程，支持动态路由，持续更新
05-13
介绍 项目基于typescript,vue3.0,vue-router4.0,vuex4.0,vite2.0实现的 vue3 风格的手机端基础工程，单页面应用。 预安装 环境要求 Node.js: - 版本最好大于 12.0.0 yarn > npm > cnpm: - 包管理工具. 使用 开发环境 yarn dev 打包 yarn build 其他 yarn clean:cache # 删除缓存 yarn clean:lib # 删除node_modules，兼容window系统 项目结构 ├── build (编译模块) ├── config (配置文件) ├── docs (项目文档) ├── mock (模拟数据) ├── plugins (插件) ├── public (存放公共文件) │ └── favicon.ico ├── src │ ├── assets (公共图
vue3学习记录一总纲
Raywh的博客
01-03 352
vue3学习记录
Vue3 知识大总结（四）Vue3 全家桶 router 和 axios
weixin_42771853的博客
04-04 1423
pinia是一个用于对状态进行管理的库，跨组件跨页面对状态进行共享与vuex和redux在作用上并无区别核心区别pinia没有mutations选项，因为mutations的出现解决的问题是让devtools进行状态追踪我们可以在任意组件中拿到store然后直接修改state中的任意值不再需要modules这样的嵌套结构，取而代之的是可以创建一个个store可以在一个组件中拿任意数量的store除此之外你还可以在某个store中拿另外的store，然后使用store中的任何东西。
使用vue-cli搭建SPA项目
weixin_67677668的博客
09-06 331
使用vue-cli搭建SPA项目
Laravel + Vue 3（Vite、TypeScript）SPA 设置
热门推荐
努力是为了站在万人之中，成为别人的光
01-10 1万+
在本教程中，我将向大家展示如何使用 Laravel + Vue 3 使用 typescript 和 Vite 设置你自己的单页应用程序。这是在 Laravel 项目中添加 PWA 的手动方法。我们不会使用 InertiaJS 或其他类似的东西，我们也不会混合使用。我们将手动实现我们自己的 VueJS 前端。 第 2 步：设置前端 在我们的 laravel 项目中，让我们使用 yarn 运行一个命令，并选择 vue 和 typescript。 将项目名称设置为：FrontEndApp 选择：Vue 选择：Ty
vue3的基本使用(超详细)
m0_64875238的博客
11-05 8151
Vue3 的全面特性的总结 + V2 和 V3 的区别（超详细）
当 Vite 遇上微前端
Yvette Lau的专栏
01-26 2609
什么是微前端微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。微前端借鉴了微服务的架构理念，将一个庞大的前端应用拆分为多个独立灵活的小型应用，每...
框架技术 ---- SPA和Vue的组件化开发
a23452的博客
03-12 2132
Vue框架 内容管理单页面应用程序SPAVite基本使用项目目录结构vite项目的运行流程组件化开发思想vue组件构成template结点script结点style结点组件的基本使用组件的注册全局注册：局部注册组件注册的名称通过name属性注册名称组件样式冲突组件样式冲突原因组件样式冲突的解决style结点的scoped属性/deep/样式穿透【vue3为:deep(选择器)】组件的props组件中声明props无法使用未声明的props动态绑定props的值props的大小和命名Class与Style绑定
vue-spa单页应用程序
qq_42426159的博客
11-01 1408
Vue全家桶 回顾： 1 ES6—为Vue服务的 2 vue基础语法 + axios 3 前后端分离 4 node之npm命令 安装jquery：npm install jquery 卸载jquery：npm uninstall jquery -g 全局安装：安装到c的用户的目录 -D 开发环境的依赖安装 -S 生产环境的依赖安装 切源 nrm 使用软件：Visual Studio Co...
vue3学习笔记尚硅谷
最新发布
08-12
- *1* *2* *3* [Vue学习笔记（尚硅谷天禹老师）](https://blog.csdn.net/qq_55593227/article/details/119717498)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值