![](https://img-blog.csdnimg.cn/20190927151026427.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue.js
文章平均质量分 80
Vue.js
weixin79893765432...
学而不思则罔,思而不学则殆。
展开
-
vue3 取经
vue3 官网W3Cschool上的vue3教程让你30分钟快速掌握vue3教程 Vue3.0 在编译时针对虚拟 DOM 的性能优化原创 2021-09-16 16:19:19 · 660 阅读 · 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 · 402 阅读 · 0 评论 -
vue-router
一、如何引入并使用Vue Router使用 Vue.js 通过组合组件来组成单页面应用程序时,如何引入并使用Vue Router 呢?第一步,将组件 (components) 映射到路由。 第二步,告诉 Vue Router 在哪里渲染它们。二、动态路由匹配三、嵌套路由四、编程式的导航五、命名路由六、命名视图七、重定向和别名八、路由组件传参九、HTML5 History 模式...原创 2020-08-08 15:48:35 · 14917 阅读 · 1 评论 -
vuex 学习
vuex 的工作原理——https://www.jianshu.com/p/d95a7b8afa06原创 2020-08-08 11:22:18 · 845 阅读 · 1 评论 -
vue3 里的 ts 类型工具函数
相关 API 源码。原创 2024-01-06 21:25:07 · 1868 阅读 · 0 评论 -
vue之服务端渲染(SSR)
因为大多数的自定义指令都包含了对 DOM 的直接操作,所以它们会在 SSR 时被忽略。// 客户端实现:// 直接更新 DOM},// 服务端实现:// 返回需要渲染的 prop// getSSRProps 只接收一个 binding 参数return {原创 2024-01-06 21:15:28 · 2998 阅读 · 0 评论 -
vue 用 h() 函数创建 Vnodes
h() 是 hyperscript 的简称——意思是“能生成 HTML (超文本标记语言) 的 JavaScript”。Vue 提供了一个 h() 函数用于创建 vnodes。组件树中的 vnodes 必须是唯一的。原创 2024-01-06 19:46:49 · 1061 阅读 · 0 评论 -
vue3 的内置组件汇总
官方给出的说明:这样的好处是:减少标签层级,减小内存占用。Teleport 是一种能够将 “我们的组件 html 结构” 移动到指定位置的技术。使用 teleport 组件时,需要指定 “移动位置”:例如:用 suspense 实现全屏弹窗父组件A:子组件B:效果如下:suspense 组件支持:在等待异步组件加载时,渲染一些额外内容。不必非得等异步组件加载完毕再渲染,避免了因异步加载带来的白屏和闪屏问题的出现,提高了用户的体验。suspense 的使用步骤:先异步引入组件:然后用 Suspens原创 2024-01-06 19:51:24 · 900 阅读 · 0 评论 -
vue3 踩坑记(汇总)
1、在 vue3 中,GET 请求接口时,传入一个数组,默认是以“xxx[]: 1, 2, 3”的形式传递的,报错:“400 Bad Request”原创 2023-09-27 14:42:02 · 212 阅读 · 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 · 1592 阅读 · 0 评论 -
Vue 和 React 的对比
Vue 由 EvanYou 开发。React 由 由 Facebook 开发。React 版本Vue 版本。原创 2021-09-06 11:12:00 · 1355 阅读 · 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 · 9057 阅读 · 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 · 1502 阅读 · 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 · 21176 阅读 · 2 评论 -
vue3 中 setup 函数、defineComponent 函数 和 script 标签上的 setup
setup() 是在 beforeCreate 钩子之前执行的一个函数。setup 接收 2 个参数:setup 的返回值:setup() 函数的可访问性原创 2022-07-05 23:24:20 · 10800 阅读 · 0 评论 -
vue3 基于 setup 的组件通信
expose 方法用于:将子组件中的方法通过模板 ref 暴露给父组件。expose 方法接受一个对象,其中定义的 property 将可以被外部组件实例访问。例如:像上述代码这样实现后,就可以在其父组件中的模板 ref 中访问 increment 了。.....................原创 2022-07-05 23:16:40 · 1217 阅读 · 0 评论 -
Vue3 的 API 方法
例如:2、ref 能定义“任何类型”的响应式数据如果将 setup 写在 标签里,则该标签里的脚本都是执行在 setup 里的,并且里面声明数据均会默认地暴露给 template,在 template 中使用时无需加 。例如:二、reactive——定义响应式对象用来定义“对象类型”的响应式数据。参数只能传入对象类型,返回一个具有响应式状态的副本。使用 reactive 定义的属性可以直接使用,不需要加 。不要直接解构使用 reactive 定义的响应式对象,否则会造成该........原创 2022-07-05 22:47:51 · 2998 阅读 · 0 评论 -
vue 渲染函数 与 JSX
vue 的渲染函数 与 JSX原创 2021-10-12 19:51:27 · 1519 阅读 · 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 · 4184 阅读 · 0 评论 -
vue 在子组件中更新父组件中传过来的变量——.sync 和 $emit(update:xxx)
vue .sync 修饰符与 $emit(update:xxx) 的使用【参考资料】Vue .sync修饰符与$emit(update:xxx)一个报错原创 2021-12-28 14:46:44 · 2248 阅读 · 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 · 558 阅读 · 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 · 725 阅读 · 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 · 185 阅读 · 0 评论 -
vue 中 template 模板中遇到的问题解记
<input v-model='value' type='textarea' :autosize="{minRows: 3}" />原创 2021-01-06 15:31:04 · 279 阅读 · 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 · 415 阅读 · 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 · 153 阅读 · 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 · 1628 阅读 · 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 · 330 阅读 · 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 · 3576 阅读 · 0 评论 -
vue 插槽
一、插槽的本质分发内容,传递复杂的内容。二、插槽分类插槽分为:默认插槽:必须唯一,可省略。 具名插槽。 作用域插槽:可以接收子组件传递的值,根据子组件传递的不同值,返回不同的内容。v-slot指令:用来定义一个 具名插槽 或 作用域插槽。1、默认插槽<template v-slot:suf-icon> <span>后置图标</span></template>2、具名插槽<template v-s..原创 2020-10-27 16:05:44 · 1331 阅读 · 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 · 311 阅读 · 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 · 17148 阅读 · 2 评论 -
vue 虚拟 DOM
一、vue/react 等框架的诞生是为了解决什么问题?jQuery:在JavaScript基础上简化了操作 DOM 的API。具体来讲就是,通过 jQuery的API绑定事件,然后再通过事件操作DOM。随着系统的复杂化,事件越来越多,不同的事件操作相同或不同的事件,变得相当繁杂。为了解决这个痛点,vue之类的框架诞生了。Vue:引入一个数据的中间层,避免我们直接操作DOM。我们需要关注的仅仅是数据state,所有的事件,我们操作的对象都是数据,由Vue底层将数据映射到DOM 上,数据的变化原创 2020-10-27 07:36:06 · 1167 阅读 · 1 评论 -
使用 vue-cli 的相关报错汇总
原创 2020-09-30 11:32:18 · 1835 阅读 · 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 · 576 阅读 · 0 评论 -
iframe 重定向问题
在 vue 项目中,加载第三方 html 网页,怎么办呢?可以用 iframe 实现。思路如下:新建一个页面,比如: new.vue。然后在路由里注册该页面,并配置好路由。这样写好之后,运行一下项目,引入的 iframe 也能够加载出来。可是一个问题也随之而来了:点击按钮跳转时,页面变化了,但是地址栏的 hash 路由并没有改变,而且一刷新立马又回到 preIndex 页面了。怎么办呢?解决方法如下:如果有 iframe 的源码,打开并编辑 iframe 的源码。在其 title原创 2020-09-14 21:48:30 · 10617 阅读 · 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 · 394 阅读 · 0 评论 -
vue 中如何将 html 字符串转化为 html
问题还原:解决方案:用 v-html。<div class="proj_content">工作描述:<div v-html="item.proj_content"></div></div>原创 2020-09-08 16:21:42 · 3448 阅读 · 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 · 839 阅读 · 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 · 2908 阅读 · 0 评论