文章分类 - Vue3
摘要：# 集成 Typescript # 集成 Typescript 后定义组件的方式 集成 ts 后请确保组件的 script 部分已将语言设置为 TypeScript ```js ``` 要让 TypeScript 正确推断 Vue 组件选项中的类型，需要使用 defineComponent 全局方法
阅读全文
摘要：Composition API 也叫组合式 API ，是 Vue 3.x 的新特性。 通过创建 Vue 组件，我们可以将接口的可重复部分及其功能提取到可重用的代码段中。仅此一项就可以使我们的应用程序在可维护性和灵活性方面走得更远。然而，我们的经验已经证明，光靠这一点可能是不够的，尤其是当你的应用程序
阅读全文
摘要：# 模版语法 ## 文本插值 最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号) ```html Message: {{ msg }} ``` ## 原始 HTML 双大括号会将数据解释为纯文本，而不是 HTML 。若想插入 HTML ，你需要使用 v-html 指令
阅读全文
摘要：# 模版引用 虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作，但在某些情况下，我们仍然需要直接访问底层 DOM 元素。 使用原生 js 访问 ```vue 人员登记系统 姓名： 获取表单的内容 ``` 我们也可以使用特殊的 ref attribute ```vue 人员登记系统
阅读全文
摘要：# Teleport Vue3.x 中的组件模板属于该组件，有时候我们想把模板的内容移动到当前组件之外的 DOM 中，这个时候就可以使用 Teleport。 表示 teleport 内包含的内容显示到 body 中 ``` 内容 ``` ``` 内容 ``` # 使用 Teleport 实现一个模态
阅读全文
摘要：# mixin 混入（mixin）提供了一种非常灵活的方式，来分发 vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 1. 新建 src/mixin/base.js ```js const baseMixin =
阅读全文
摘要：# 使用 Axios 请求远程真实 Api 接口数据 ``` https://github.com/axios/axios ``` 1. 安装 ``` npm install axios --save ``` 或者 ``` yarn add axios ``` 2. 引入使用 ```js impor
阅读全文
摘要：# 组件的生命周期函数  ## beforeCreate 在实例初始化之后，数据观测 (data obse
阅读全文
摘要：# 在自定义组件上使用 v-model ## 单个 v-mode 的数据绑定 默认情况下，组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件。我们可以通过向 v-model 传递参数来修改这些名称 ``` ``` 在本例中，子组件将
阅读全文
摘要：# 自定义事件实现子组件给父组件传值 注意：vue 官方推荐你始终使用 kebab-case 的事件名。 1. 子组件 DatePicker.vue ```vue 通过广播方式实现子组件给父组件传值 ``` 2. 父组件 Home.vue ```vue ``` # 自定义事件验证 1. 子组件 ``
阅读全文
摘要：# 父组件主动获取子组件的数据 1. 调用子组件的时候定义一个 ref ``` ``` 2. 父组件主动获取子组件数据 ``` this.$refs.header.属性 ``` 3. 父组件主动执行子组件方法 ``` this.$refs.header.方法 ``` # 子组件主动获取父组件的数据
阅读全文
摘要：我们可以为组件的 props 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。 props 验证示例 ``` props: { // 基础的类型检查 (`null` 和 `undefined` 会通过任何
阅读全文
摘要：# 基本实现 示例 ```vue Vue 实现 TodoList 正在进行 {{ item.title }} 删除 --> {{ item.title }} 删除 已经完成 {{ item.title }} 删除 {{ list }} ``` # 使用 localStorage 实现缓存 1. sr
阅读全文
摘要：1. 安装 sass-loader node-sass ``` npm install -D sass ``` 2. style 中配置 sass | scss lang 可以配置 scss ```html ``` 3. 示例 传统写法 ```html ``` sass | scss 写法 ```h
阅读全文
摘要：# 监听事件 # 内联事件处理器 # 方法事件处理器 ## 方法与内联事件判断 模板编译器会通过检查 v-on 的值是否是合法的 JavaScript 标识符或属性访问路径来断定是何种形式的事件处理器。举例来说，foo、foo.bar 和 foo['bar'] 会被视为方法事件处理器，而 foo()
阅读全文
摘要：Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组。 # 绑定 HTML class ## 绑定字符串 示例 ```vue ``` ## 绑定对象 我们可以给 :class (v-bind:class 的缩写) 传递一个
阅读全文
摘要：最近因为项目需要，不得不学习一下 Vue3 。于是花了 4 个小时，把 Vue3 过了一遍。现在我来带你快速了解 Vue3 的写法。 本文的目的，是为了让已经有 Vue2 开发经验的人 ，快速掌握 Vue3 的写法。 因此， 本篇假定你已经掌握 Vue 的核心内容 ，只为你介绍编写 Vue3 代码，
阅读全文
摘要：```javascript // ... const app = createApp(App); // 以绑定 alert 函数为例，alert.bind(this) 可以解决非 window 对象调用 alert() 时产生的 Illegal invocation 问题： app.config.g
阅读全文
浙公网安备 33010602011771号