vue3学习
zheng_jia_jun
开发分享是一种乐趣`
展开
-
vue3 之 手写一个防抖 ref 函数
有时候,我们表单的值需要随时根据用户输入的值更新,但是又不想每输入一个字,就更新一次,想要输入完表单的值再更新,这个时候我们就可以封装一个 防抖的 ref 函数。原创 2022-08-18 07:29:24 · 300 阅读 · 0 评论 -
Vue3 之 透传 Attributes,$attrs
透传 attribute” 指的是传递给一个组件,却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。如果组件里面没有根节点,vue 将不会自动 attribute 透传行为,并且里面将会抛出一个警告,需要在组件中规定哪个组件使用 $attrs 透传 attribute。同样的 v-on 绑定事件,父组件跟 组件根组件都同时监听同一个事件的话,事件触发,对应监听的方法都会执行。现在我们想要父组件传递的属性,不在组件内根组件继承,在根组件里面的子组件基础。..原创 2022-08-11 22:57:13 · 4050 阅读 · 0 评论 -
Vue3.0实验性语法之script setup
VUE3 新特性 script setupscript setup是VUE3的实验性功能,直接把 setup 写在 script 标签中,表示标签里面的代码相当于在setup里面运行。这样可以太太省略很多冗余代码,默认直接暴露出去。// APP.vue<template> <div> {{ yjj }} </div> <Home message="虚心学习" /></template><script setu原创 2021-06-29 11:34:25 · 1995 阅读 · 2 评论 -
Vue3的VueI18n多语言环境切换
Vue3 VueI18n 多语言环境切换需求:项目中需要自定义切换中/英文// 安装npm install vue-i18n@nextyarn add vue-i18n@next// vue3.0使用import { createApp } from 'vue'import { createI18n } from 'vue-i18n'const i18n = createI18n({ // something vue-i18n options here ...})co原创 2021-06-28 21:17:42 · 1017 阅读 · 0 评论 -
vue3中不支持filters过滤器
在vue3中,filters已经被删除,不再支持过滤器,代替方法推荐使用vue3 中的计算属性来代替过滤器vue3.x的写法<template> <h1>Bank Account Balance</h1> <p>{{ total}}</p></template><script> export default { props: { total: { type: Nu原创 2021-03-10 21:33:07 · 2360 阅读 · 0 评论 -
vue3使用防抖和节流
Vue 没有内置支持防抖和节流,但可以使用 Lodash 等库来实现。安装Lodash yarn add lodash npm install lodash --save导入Lodash<template> <button @click="btnClick">节流</button> <button @click="btnClick2">防抖</button></template><script>i原创 2021-03-09 11:14:03 · 5737 阅读 · 0 评论 -
vue3.0组合式API生命周期函数和选项式API的区别
vue3.0生命周期函数在vue3.0中有 选项式API 和 组合式API ,两者的生命周期函数有些许不同。请看下面图片我们可以看到 setup函数(组合式api) 的生命周期里是没有beforeCreate 和 Create函数的,因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的,所以不需要显式地定义它们。换句话说,在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。之后的变化就是在原本的生命周期钩子前面加上了 on,更语义化一点,在se原创 2021-03-08 12:18:26 · 1769 阅读 · 0 评论 -
vue3之自定义事件和自定义修饰符
vue3之自定义事件和自定义修饰符官方建议我们组件发送自定义事件的时候,先在组件里面定义一下父组件// 父组件<template> <div> <child v-model="text" v-model:name="name" /> </div></template><script>import child from "./v-model子组件";import { ref } from "vue";e原创 2021-03-05 11:45:24 · 1624 阅读 · 0 评论 -
vue3的Teleport
vue3之Teleport使用Teleport将模态框的一部分代码移动与 Vue components 一起使用在同一目标上使用多个 teleportTeleport 可以将我们模板有些与模板有关联的逻辑代码(只是逻辑有关)移动到DOM 中 Vue app 之外的其他位置,比如,模态框组件,模态框的逻辑存在于组件中,但是模态框的快速定位就很难通过 CSS 来解决,或者需要更改组件组合。使用Teleport将模态框的一部分代码移动// 父组件<template> <div>原创 2021-03-04 19:07:13 · 223 阅读 · 1 评论