Vue.js
关注
分享
扫一扫
文章平均质量分 81
Vue.js
weixin79893765432...
学而不思则罔，思而不学则殆。
展开
-
vue3 取经
vue3 官网W3Cschool上的vue3教程让你30分钟快速掌握vue3教程 Vue3.0 在编译时针对虚拟 DOM 的性能优化原创 2021-09-16 16:19:19 · 1009 阅读 · 0 评论
-
vue 学习
一、vue 的指令https://blog.csdn.net/mChales_Liu/article/details/109295419二、vue 的组件https://blog.csdn.net/mChales_Liu/article/details/109309671三、虚拟 DOM（VDOM）https://blog.csdn.net/mChales_Liu/article/details/109296404...原创 2020-11-02 12:29:21 · 431 阅读 · 0 评论 -
vue-router
一、如何引入并使用Vue Router使用 Vue.js 通过组合组件来组成单页面应用程序时，如何引入并使用Vue Router 呢？第一步，将组件 (components) 映射到路由。 第二步，告诉 Vue Router 在哪里渲染它们。二、动态路由匹配三、嵌套路由四、编程式的导航五、命名路由六、命名视图七、重定向和别名八、路由组件传参九、HTML5 History 模式...原创 2020-08-08 15:48:35 · 17909 阅读 · 1 评论 -
vuex 学习
vuex 的工作原理——https://www.jianshu.com/p/d95a7b8afa06原创 2020-08-08 11:22:18 · 1035 阅读 · 1 评论 -
vue3 里的 ts 类型工具函数
相关 API 源码。原创 2024-01-06 21:25:07 · 2805 阅读 · 0 评论 -
vue之服务端渲染(SSR)
因为大多数的自定义指令都包含了对 DOM 的直接操作，所以它们会在 SSR 时被忽略。// 客户端实现：// 直接更新 DOM},// 服务端实现：// 返回需要渲染的 prop// getSSRProps 只接收一个 binding 参数return {原创 2024-01-06 21:15:28 · 4170 阅读 · 0 评论 -
vue 用 h() 函数创建 Vnodes
h() 是 hyperscript 的简称——意思是“能生成 HTML (超文本标记语言) 的 JavaScript”。Vue 提供了一个 h() 函数用于创建 vnodes。组件树中的 vnodes 必须是唯一的。原创 2024-01-06 19:46:49 · 1290 阅读 · 0 评论 -
vue3 的内置组件汇总
官方给出的说明：这样的好处是：减少标签层级，减小内存占用。Teleport 是一种能够将 “我们的组件 html 结构” 移动到指定位置的技术。使用 teleport 组件时，需要指定 “移动位置”：例如：用 suspense 实现全屏弹窗父组件A：子组件B：效果如下：suspense 组件支持：在等待异步组件加载时，渲染一些额外内容。不必非得等异步组件加载完毕再渲染，避免了因异步加载带来的白屏和闪屏问题的出现，提高了用户的体验。suspense 的使用步骤：先异步引入组件：然后用 Suspens原创 2024-01-06 19:51:24 · 1247 阅读 · 0 评论 -
vue3 踩坑记（汇总）
1、在 vue3 中，GET 请求接口时，传入一个数组，默认是以“xxx[]: 1, 2, 3”的形式传递的，报错：“400 Bad Request”原创 2023-09-27 14:42:02 · 368 阅读 · 0 评论 -
Vuex5——pinia
pinia 官网pinia 是 Vuex 的升级版，被誉为 vuex5。官网也说过，为了尊重原作者，所以取名 pinia，而没有使用 Vuex。pinia 中只有 state、getter、action，抛弃了 Vuex 中的 Mutation，使开发更简单。pinia 中 action 支持同步和异步，Vuex 中 action 中做异步处理，mutation 中做同步处理。pinia 支持 TypeScript。Vue3 推荐使用 TS 来编写，此时使用 pinia 就非常合适了。原创 2022-10-05 00:12:05 · 1904 阅读 · 0 评论 -
Vue 和 React 的对比
Vue 由 EvanYou 开发。React 由 由 Facebook 开发。React 版本Vue 版本。原创 2021-09-06 11:12:00 · 1670 阅读 · 0 评论 -
给 vite 创建的 Vue3 项目配置 ESLint
目录前言一、下载安装相关的依赖包前言在 vite 配置文件中，同一属性下，后引入的规则会覆盖前面的规则。一、下载安装相关的依赖包综合分析普遍使用的 eslint 依赖包后，推荐下面这一整套依赖包：建议必配eslinteslint-plugin-vueeslint-plugin-prettier （遇到 eslint 规则和 prettier 规则冲突）eslint-config-prettier（解决 eslint 规则和 prettier 规则冲突）eslint-define-co原创 2022-04-21 17:38:29 · 9692 阅读 · 0 评论 -
vue eslint报错：Component name “index“ should always be multi-word.eslintvue/multi-word-component-names
在操作官方实例Create React App时,需要执行指令：create-react-app my-app来创建一个新的React应用。由于某原因,在拉取各种资源时,往往会巨慢,一直卡在fetchMetadata: sill mapToRegistry uri http://registry.npmjs.org/whatwg-fetch解决方案是换源：虽然平常使用cnpm来代替npm,但也只是使用新的指令而已，而在寻求create-react-app的相关配置希望修改registry转载 2021-04-21 16:44:07 · 1669 阅读 · 0 评论 -
vue3 setup 里的计算属性（computed）和侦听器（watch/watchEffect）
计算属性在vue3中是一个函数【参考】VUE3（十四）使用计算属性computed和监听属性watchvue3的计算属性与watchVue 3 响应式侦听与计算vue3计算属性（computed）与监听（watch）Vue3官网-高级指南（十七）响应式计算和侦听（onTrack、onTrigger、onInvalidate、副作用的刷新时机、 、pre）................................................原创 2022-07-05 23:35:40 · 24075 阅读 · 2 评论 -
vue3 中 setup 函数、defineComponent 函数 和 script 标签上的 setup
setup() 是在 beforeCreate 钩子之前执行的一个函数。setup 接收 2 个参数：setup 的返回值：setup() 函数的可访问性原创 2022-07-05 23:24:20 · 12782 阅读 · 0 评论 -
vue3 基于 setup 的组件通信
expose 方法用于：将子组件中的方法通过模板 ref 暴露给父组件。expose 方法接受一个对象，其中定义的 property 将可以被外部组件实例访问。例如：像上述代码这样实现后，就可以在其父组件中的模板 ref 中访问 increment 了。.....................原创 2022-07-05 23:16:40 · 1310 阅读 · 0 评论 -
Vue3 的 API 方法
例如：2、ref 能定义“任何类型”的响应式数据如果将 setup 写在 标签里，则该标签里的脚本都是执行在 setup 里的，并且里面声明数据均会默认地暴露给 template，在 template 中使用时无需加 。例如：二、reactive——定义响应式对象用来定义“对象类型”的响应式数据。参数只能传入对象类型，返回一个具有响应式状态的副本。使用 reactive 定义的属性可以直接使用，不需要加 。不要直接解构使用 reactive 定义的响应式对象，否则会造成该........原创 2022-07-05 22:47:51 · 3165 阅读 · 0 评论 -
vue 渲染函数 与 JSX
vue 的渲染函数 与 JSX原创 2021-10-12 19:51:27 · 1720 阅读 · 0 评论 -
vue 组件的继承与混合
一、继承1、Vue.extend()vue 中 通过 Vue.extend() 函数来创建一个“子类”。Vue.extend() 的参数是一个包含组件选项的对象。其中，data 选项必须是一个函数而不能是一个对象。继承而来的子组件会拥有其父组件的一切属性和方法。【案例一】：<template> <div id="mount-point"></div></template><script>// 创建构造器var原创 2020-12-22 13:34:56 · 4323 阅读 · 0 评论 -
vue 在子组件中更新父组件中传过来的变量——.sync 和 $emit(update:xxx)
vue .sync 修饰符与 $emit(update:xxx) 的使用【参考资料】Vue .sync修饰符与$emit(update:xxx)一个报错原创 2021-12-28 14:46:44 · 2532 阅读 · 0 评论 -
vue 独家插件
1、vue-loader2、vue-lazyload3、vuescroll4、VueI18n5、VueExtends6、vue-infinite-loading7、vue-quill-editor8、vue-clamp9、vuedraggable10、vue-tabs-component11、vuepress12、vuepress-plugin-tabs13、vue-router14、vuex15、vue-template-compiler16、vue-style-loader原创 2021-09-06 16:25:25 · 785 阅读 · 0 评论 -
在内置事件除自带参数外额外传递自定义参数
react 版：<input onChange={function (num) { const e = e || window.event; return handleChange(e, num) }.bind(this, 110)}/>vue 版：原创 2021-03-18 18:47:43 · 838 阅读 · 0 评论 -
函数之JavaScript、Vue 与 React+JSX
一、函数之 JavaScript<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>test</title></head><body&g原创 2021-01-13 14:59:12 · 229 阅读 · 0 评论 -
vue 中 template 模板中遇到的问题解记
<input v-model='value' type='textarea' :autosize="{minRows: 3}" />原创 2021-01-06 15:31:04 · 331 阅读 · 0 评论 -
如果一个对象里有值就返回该值，否则返回空字符串
computed: { currentMsg () { const current = this.list[this.current] || {} return { name: current.name || '', age: current.age || '', gender: current.gender || '' } }}【拓展】[]||1 // []({})||1 // {}<s...原创 2021-01-05 22:28:32 · 474 阅读 · 0 评论 -
项目中修改（增、删）功能的优化
<div> <div> <button @click="updateCount('countForTwo', 2)">+</button> <button @click="updateCount('countForTwo', -2)">-</button> </div> <div> <button @click="updateC...原创 2020-12-13 20:52:28 · 184 阅读 · 0 评论 -
vue 动态样式
一、动态绑定 class1、动态绑定一个 class<div :class="activeClass"></div>2、动态绑定多个 class<div :class="[activeClass, errorClass]"></div>二、根据条件动态绑定 class1、v-bind +三目运算符 实现有条件的动态绑定 class<div :class="isActive ? active : ''">&...原创 2020-12-07 14:18:26 · 1767 阅读 · 0 评论 -
vue 使用vue-cli4.0快速搭建一个项目
目录1、为项目起个名称2、选择自定义配置（1）、选择 vue 版本（2）、选择路由模式（3）、选择 css 的预处理器（4）、选择 ESLint 代码校验规则，提供一个插件化的javascript代码检测工具（5）、选择什么时候进行代码校验（6）、选择以上配置存放的方式（7）、是否保存本次的配置3、查看自定义配置1、为项目起个名称vue create <Project Name> //文件名 不支持驼峰（含大写字母）2、选择自定义配置原创 2020-11-07 16:38:07 · 369 阅读 · 0 评论 -
vue 的计算属性（computed）和侦听器（watch）
目录一、计算属性（computed）1、计算属性的特点2、计算属性的原理3、computed与methods的区别二、侦听器（wacth）1、侦听器的特点2、使用 wacth 的注意事项3、wacth 的两个属性4、watch 与 $watch 的关系5、watch 的使用案例三、计算属性 和 侦听器 适用场景四、推荐几篇关于 computed 和 watch 的原理的深度解析好文一、计算属性（computed）1、计算属性的特点支持数据缓....原创 2020-10-27 19:38:35 · 4065 阅读 · 0 评论 -
vue 插槽
一、插槽的本质分发内容，传递复杂的内容。二、插槽分类插槽分为：默认插槽：必须唯一，可省略。 具名插槽。 作用域插槽：可以接收子组件传递的值，根据子组件传递的不同值，返回不同的内容。v-slot指令：用来定义一个 具名插槽 或 作用域插槽。1、默认插槽<template v-slot:suf-icon> <span>后置图标</span></template>2、具名插槽<template v-s..原创 2020-10-27 16:05:44 · 1530 阅读 · 0 评论 -
vue 组件
一、创建一个 vue 实例（注意与创建组件区别开来）var vm = new Vue({ el: "#app", data() { return { } },})二、创建全局组件Vue.component("todo-item", { props:{ title: String, // del: Boolean del: { ....原创 2020-10-27 15:44:04 · 345 阅读 · 0 评论 -
vue 的指令
一、vue 的指令指令的本质：语法糖，标志位。在编译阶段 render 函数里，会把指令编译成 JavaScript 代码。vue的14个指令：v-text v-html（不建议使用） v-show v-if v-else-if v-else v-for v-on v-bind v-model v-slot v-pre（使用频率很低） v-once（使用频率很低） v-cloak（使用频率极低，不细介绍）1、v-textv-text 指令，会把该元素下面的所有内.原创 2020-10-27 13:45:09 · 18686 阅读 · 2 评论 -
vue 虚拟 DOM
一、vue/react 等框架的诞生是为了解决什么问题？jQuery：在JavaScript基础上简化了操作 DOM 的API。具体来讲就是，通过 jQuery的API绑定事件，然后再通过事件操作DOM。随着系统的复杂化，事件越来越多，不同的事件操作相同或不同的事件，变得相当繁杂。为了解决这个痛点，vue之类的框架诞生了。Vue：引入一个数据的中间层，避免我们直接操作DOM。我们需要关注的仅仅是数据state，所有的事件，我们操作的对象都是数据，由Vue底层将数据映射到DOM 上，数据的变化原创 2020-10-27 07:36:06 · 1304 阅读 · 1 评论 -
使用 vue-cli 的相关报错汇总
原创 2020-09-30 11:32:18 · 1924 阅读 · 0 评论 -
vue中的事件委托
<el-dropdown :hide-on-click="true" trigger="click" @command="handleCommand"> <span class="el-dropdown-link"> <div class="head_pic" @click="quitLoginCilck()"><img src="http://api.wakko.cn/uploads/static/man.png" alt="">&.原创 2020-09-28 14:35:37 · 626 阅读 · 0 评论 -
iframe 重定向问题
在 vue 项目中，加载第三方 html 网页，怎么办呢？可以用 iframe 实现。思路如下：新建一个页面，比如： new.vue。然后在路由里注册该页面，并配置好路由。这样写好之后，运行一下项目，引入的 iframe 也能够加载出来。可是一个问题也随之而来了：点击按钮跳转时，页面变化了，但是地址栏的 hash 路由并没有改变，而且一刷新立马又回到 preIndex 页面了。怎么办呢？解决方法如下：如果有 iframe 的源码，打开并编辑 iframe 的源码。在其 title原创 2020-09-14 21:48:30 · 11127 阅读 · 0 评论 -
vue 插件
目录1、插件的使用2、自定义插件1、插件的使用通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成：// 调用 `MyPlugin.install(Vue)`Vue.use(MyPlugin)new Vue({ // ...组件选项})也可以传入一个可选的选项对象：Vue.use(MyPlugin, { someOption: true })vue 插件大全2、自定义插件vue的插件通过暴露一个 inst..原创 2020-08-24 01:48:32 · 432 阅读 · 0 评论 -
vue 中如何将 html 字符串转化为 html
问题还原：解决方案：用 v-html。<div class="proj_content">工作描述：<div v-html="item.proj_content"></div></div>原创 2020-09-08 16:21:42 · 3613 阅读 · 0 评论 -
解决 Vue 使用 vue-router 切换页面时 页面显示没有在顶部
跳转到新页面后可视口没有从顶部开始显示，解决办法：router.beforeEach((to, from, next) => { /* 进入新页面自动回到页面顶部 */ // chrome document.body.scrollTop = 0 // firefox document.documentElement.scrollTop = 0 // safari window.pageYOffset = 0 let userId = localStora原创 2020-09-08 10:52:54 · 900 阅读 · 1 评论 -
vue 项目相关报错汇总
vue 如何引入函数节流、防抖函数呢？1、定义公共方法：utils/publickMethos.js// 函数节流const throttle = function(fn, delay){ var timer; return function () { var _this = this; var args = arguments; if (timer) { clearTimeout(timer);原创 2020-08-31 16:57:11 · 3048 阅读 · 0 评论