Vue - 随笔分类(第2页) - 韩德才

Vue3 – Composition API

摘要：Options API的弊端认识Composition API setup函数的参数 setup函数的返回值 Reactive API 定义响应式复杂数据 Ref API 定义响应式数据 Ref自动解包 setup函数定义数据 ref 和 reactive的使用场景认识readonly read 阅读全文

posted @ 2024-11-01 12:35 韩德才阅读(37) 评论(0) 推荐(0)

Vue组件化–额外知识补充

摘要：认识生命周期生命周期的流程 1.创建组件实例之前回调beforeCreate函数 2.创建组件实例 3.创建组件实例之后回调create函数(1.发送网络请求 2.事件监听 3.this.$watch()组件监听) 4.对template模板进行编译 5.在挂载到虚拟DOM之前回调beforeMo 阅读全文

posted @ 2024-10-31 17:19 韩德才阅读(48) 评论(0) 推荐(0)

vue-组件通信-非父子组件的通信

摘要：非父子组件的通信 ◼ 在开发中，我们构建了组件树之后，除了父子组件之间的通信之外，还会有非父子组件之间的通信。 ◼ 这里我们主要讲两种方式： 全局事件总线； Provide/Inject；全局事件总线mitt库使用事件总线工具事件取消 Provide和Inject Provide和Inje 阅读全文

posted @ 2024-10-31 15:59 韩德才阅读(57) 评论(0) 推荐(0)

Vue组件化-插槽Slot

摘要：认识插槽Slot 如何使用插槽slot？插槽的默认内容多个插槽的效果具名插槽的使用 ◼ 事实上，我们希望达到的效果是插槽对应的显示，这个时候我们就可以使用具名插槽： 具名插槽顾名思义就是给插槽起一个名字，<slot> 元素有一个特殊的attribute：name； 一个不带name 的sl 阅读全文

posted @ 2024-10-31 15:45 韩德才阅读(25) 评论(0) 推荐(0)

Vue-组件化–组件间通信

摘要：认识组件的嵌套组件的拆分组件的通信父子组件之间通信的方式父组件传递给子组件 Props的数组用法数组语法存在的弊端: 1.不能对类型进行验证 2.没有默认值 Props的对象用法细节一：那么type的类型都可以是哪些呢？细节二：对象类型的其他写法细节三：Prop 的大小写命名非Pr 阅读全文

posted @ 2024-10-31 13:58 韩德才阅读(33) 评论(0) 推荐(0)

Vue组件化–知识补充

摘要：全局CSS和局部CSS 当我们需要CSS只在当前的.vue文件中生效可以在style后面添加scoped 创建vue项目的方式 1.Vue Cli:vue create 基于 >webpack 2.npm init vue@latest 基于-->vite 1.安装一个本地工具:create-vue 阅读全文

posted @ 2024-10-31 11:09 韩德才阅读(15) 评论(0) 推荐(0)

Vue CLI脚手架

摘要：Vue CLI脚手架 Vue CLI 安装和使用 vue create 项目的过程项目的目录结构 Vue CLI的运行原理阅读全文

posted @ 2024-10-30 18:54 韩德才阅读(9) 评论(0) 推荐(0)

Vue组件化基础-全局组件-局部组件

摘要：认识组件化开发组件化开发 Vue的组件化注册组件的方式注册全局组件 <div id="app">  <product-item></product-item> <product-item></product-item> <product-ite 阅读全文

posted @ 2024-10-29 21:52 韩德才阅读(42) 评论(0) 推荐(0)

Vue基础–v-model表单

摘要：v-model的基本使用基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" 阅读全文

posted @ 2024-10-29 20:31 韩德才阅读(19) 评论(0) 推荐(0)

Vue-综合案例

摘要：案例一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docum 阅读全文

posted @ 2024-10-29 17:11 韩德才阅读(42) 评论(0) 推荐(0)

Vue基础–Options API

摘要：复杂data的处理方式 ◼ 我们知道，在模板中可以直接通过插值语法显示一些data中的数据。 ◼ 但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示； 比如我们需要对多个data数据进行运算、三元运算符来决定结果、数据进行某种转化后显示； 在模板中使用表达阅读全文

posted @ 2024-10-29 16:08 韩德才阅读(55) 评论(0) 推荐(0)

Vue基础-列表渲染v-for

摘要：列表渲染 v-for基本使用 ◼ v-for的基本格式是 "item in 数组"： 数组通常是来自data或者prop，也可以是其他方式； item是我们给每项元素起的一个别名，这个别名可以自定来定义； ◼ 我们知道，在遍历一个数组的时候会经常需要拿到数组的索引： 如果我们需要索引，可以使用阅读全文

posted @ 2024-10-29 13:28 韩德才阅读(27) 评论(0) 推荐(0)

Vue基础-条件渲染

摘要：条件渲染 v-if、v-else、v-else-if template元素 v-show v-show和v-if的区别阅读全文

posted @ 2024-10-29 10:43 韩德才阅读(37) 评论(0) 推荐(0)

Vue基础–模板语法

摘要：VSCode代码片段在该网站中生成代码片段； https://snippet-generator.app 模板语法 Mustache双大括号语法（掌握）案例演示 v-once指令（了解） v-once案例 v-text指令（了解） v-text案例 v-html指令 v-html案例 v-pre 阅读全文

posted @ 2024-10-28 17:34 韩德才阅读(20) 评论(0) 推荐(0)

Vue的基础语法

摘要：认识Vue 目前Vue在前端处于什么地位？如何使用Vue呢？方式一：CDN引入 <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> 方式二：下载和引入 Vue初体验 ◼ 案例体验一：动态展示Hello World数阅读全文

posted @ 2024-10-28 17:10 韩德才阅读(24) 评论(0) 推荐(0)

hdc-web

随笔分类 - Vue

公告