![](https://img-blog.csdnimg.cn/425b9781efda4488bb4c6ef0b7d4faca.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
VUE
文章平均质量分 74
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用...
DomCode
Who has the material to survive, people have a dream only talk about life. you have to understand life and life different animal survival, while others life.
展开
-
【Vue】vue.config.js 的完整配置
之前,我有提到过,当然大家肯定也都知道,Vue3.0不在有webpack.config.js的配置;但是不可避免,在项目开发中我们肯定会存在一些特殊的需求需要调整webpack, 这个时候,在Vue3.0的项目当中,我们就需要在根目录创建vue.config.js去完成webpack的一些特殊配置,默认它会被 @vue/cli-service 自动加载。此刻,你需要创建vue.config.js文件。查看默认的webpack配置。原创 2023-04-18 14:57:44 · 5412 阅读 · 0 评论 -
【Vue】设置请求配置--拦截器&取消请求
设置请求配置--拦截器&取消请求原创 2022-11-20 12:25:24 · 1191 阅读 · 0 评论 -
【Vue】 前端代码风格指南--注释规范
如无必要,勿增注释 ( As short as possible )如有必要,尽量详尽 ( As long as necessary )原创 2022-07-09 16:33:07 · 5331 阅读 · 0 评论 -
【Vue】 前端代码风格指南--代码规范
前端代码规范原创 2022-07-09 16:15:54 · 1574 阅读 · 0 评论 -
【Vue】 前端代码风格指南--命名规范
参照项目命名规则,有复数结构时,要采用复数命名法。原创 2022-07-09 15:35:49 · 569 阅读 · 0 评论 -
【Vue2.5】打包报错:ValidationError: Invalid options object.....
vue项目打包发生报错,显示ValidationError: Invalid options object. Terser Plugin has been initialized using an options object that does not match the API schema.原创 2022-07-08 15:15:40 · 6672 阅读 · 0 评论 -
【Vue】解决“Request header field content-type is not allowed by Access-Control-Allow-Headers”问题
在向用nodejs快速搭建的mock服务器发送请求时出现“Request header field content-type is not allowed by Access-Control-Allow-Headers”报错原创 2022-06-27 15:15:01 · 1585 阅读 · 0 评论 -
【Vue】控制台显示警告(bundle has 1 warnings)
自2.5以来,作用域槽的“scope”属性已被弃用,并被“slot-scope”所取代原创 2022-06-22 11:48:42 · 601 阅读 · 0 评论 -
【Axios】如何让 Axios 更加灵活可复用
实现一个灵活、可复用的一个请求请发。原创 2022-06-14 15:14:54 · 605 阅读 · 1 评论 -
【Vue】实现登录功能
登录界面开发原创 2022-05-24 22:54:58 · 3011 阅读 · 0 评论 -
【Vue 】使用v-if/v-else-if/v-else ,对key的了解?
可能很多人都会忽略这个点。默认情况下,Vue 会尽可能高效的更新 DOM。这意味着其在相同类型的元素之间切换时,会修补已存在的元素,而不是将旧的元素移除然后在同一位置添加一个新元素。如果本不相同的元素被识别为相同,则会出现意料之外的副作用。如果只有一个 v-if ,没有 v-else 或者 v-if-else的话,就没有必要加 key 了相对于 v-for 的 key, v-if/v-else-if/v-else 中的 key 相对简单,我们可以直接写入固定的字符串或者数组即可...<tran原创 2022-05-25 04:00:00 · 819 阅读 · 0 评论 -
【Vue】 使用v-for,对key需要注意什么?
v-for 中使用 key使用 v-for 更新已渲染的元素列表时,默认用就地复用策略;列表数据修改的时候,他会根据 key 值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素;使用key的注意事项:不要使用可能重复的或者可能变化 key 值(控制台也会给出提醒)如果数组中的数据有状态需要维持时(例如输入框),不要使用数组的 index 作为 key 值,因为如果在数组中插入或者移除一个元素时,其后面的元素 index 将会变化,这回让vue进行原地复用时错误的绑定状态。如果数组原创 2022-05-24 22:32:40 · 670 阅读 · 0 评论 -
【Vue】Vuex 模块的基础使用--命名空间
我们在使用Vue开发项目时,如果项目比较复杂的话,使用Vuex进行状态管理会大大简化开发难度,提高开发效率。但是当使用Vuex的一些复杂功能(如:模块、命名空间)时,Vuex会变的稍微有些复杂。再加上Vuex的灵活性,同样的功能可以有很多种实现方式。因为太灵活、实现方式太多,导致经常会记混掉。所以就整理了一下Vuex的几种常用的使用方式以实例作个对比。真正实现拿来主义精神,方便后期开始使用。...原创 2021-10-22 16:04:42 · 4958 阅读 · 2 评论 -
【Vue】了解 Vue.component()、Vue.use()和this.$xxx()如何使用
Vue.component()方法注册全局组件。第一个参数是自定义元素名称,也就是将来在别的组件中使用这个组件的标签名称。第二个参数是将要注册的Vue组件。import Vue from 'vue';// 引入loading组件 import Loading from './loading.vue';// 将loading注册为全局组件,在别的组件中通过<loading>标签使用Loading组件Vue.component('loading', Loading);Vue.u原创 2022-01-23 20:13:31 · 445 阅读 · 0 评论 -
【Vue】Todo案例--创建工程
todo案例原创 2021-12-25 21:37:35 · 304 阅读 · 0 评论 -
【Vue】组件通信(props、$emit、eventBus)
因为每个组件的变量和值都是独立的,组件通信先暂时关注父传子, 子传父。原创 2021-12-25 20:51:47 · 598 阅读 · 0 评论 -
【Vue】Vuex五个属性和使用方法
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。原创 2021-12-17 16:21:20 · 9099 阅读 · 1 评论 -
【Vue】实现虚拟dom转换成真实DOM
Vue组件data为什么必须是个函数?每次使用组件时都会对组件进行实例化操作,并且调用data函数返回一个对象作为组件的数据源。这样可以保证多个组件间数据互不影响nextTick在哪里使用?原理是?nextTick中的回调是在下次 DOM 更新循环结束之后执行的延迟回调。可用于获取更新后的 DOM。Vue中数据更新是异步的,使用nextTick方法可以保证用户定义的逻辑在更新之后执行。computed和watch区别computed和watch都是基于Watcher来实现的computed原创 2021-12-14 17:31:56 · 4211 阅读 · 0 评论 -
【Vue】如何创建、注册和使用组件
组件基础一、vue组件概念组件是可复用的 Vue 实例, 封装标签, 样式和JS代码 — 一个vue文件就是一个组件组件化 :封装的思想,把页面上 可重用的部分 封装为 组件,从而方便项目的 开发 和 维护一个页面, 可以拆分成一个个组件,一个组件就是一个整体, 每个组件可以有自己独立的 结构 样式 和 行为(html, css和js)通常一个应用会以一棵嵌套的组件树的形式来组织:例如,你可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的像导航链接、博文之类的组件。为了能在模板中使用原创 2021-12-06 21:26:17 · 905 阅读 · 0 评论 -
【Vue】如何使用侦听器watch
Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。原创 2021-12-03 23:15:21 · 948 阅读 · 0 评论 -
【Vue】计算属性computed使用方法
methods和computed的区别的问题,下方代码分别使用插值语法、 methods 、 计算属性来做数据渲染。原创 2021-12-03 23:00:45 · 3012 阅读 · 1 评论 -
【Vue】过滤器Filter的使用
vue过滤器一、是什么过滤器(filter)是输送介质管道上不可缺少的一种装置,就是把一些不必要的东西过滤掉,过滤器实质不改变原始数据,只是对数据进行加工处理后返回过滤后的数据再进行调用处理,我们也可以理解其为一个纯函数。Vue 允许你自定义过滤器,可被用于一些常见的文本格式化。(Vue3中已废弃filter)二、如何用vue中的过滤器可以用在两个地方:双花括号插值和 v-bind 表达式,过滤器应该被添加在 JavaScript表达式的尾部,由“管道”符号指示:<!-- 在双花括号中 -原创 2021-12-03 16:26:52 · 569 阅读 · 0 评论 -
【Vue】品牌管理案例
目标: 数据铺设需求1: 把默认数据显示到表格上需求2: 注意资产超过100的, 都用红色字体标记出来细节:① 先铺设静态页面 — 去.md文档里, 复制数据和标签模板② 此案例使用bootstrap, 需要下载, 并导入到工程main.js中③ 用v-for配合默认数据, 把数据默认铺设到表格上显示④ 直接在标签上, 大于100价格, 动态设置red类名图示:1、因为案例使用了bootstrap, 工程化开发, 模块化用npm/yarn下载引入使用npm install boot原创 2021-12-03 15:34:09 · 1114 阅读 · 0 评论 -
【Vue】动态class、style的使用方法
vue基础动态class、style动态classClass 可以通过对象语法和数组语法进行动态绑定:对象语法:<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>data: { isActive: true, hasError: false}数组语法:<div v-bind:class="[isActive ? activeClass : '', e原创 2021-12-03 15:09:32 · 1220 阅读 · 0 评论 -
【Vue】v-for更新监测, key作用?
一、v-for更新监测目标: 当v-for遍历的目标结构改变, Vue触发v-for的更新数组变更方法, 就会导致v-for更新, 页面更新;数组非变更方法, 返回新数组, 就不会导致v-for更新, 可采用覆盖数组或this.$set()。情况1: 数组翻转情况2: 数组截取情况3: 更新值<template> <div> <ul> <li v-for="(val, index) in arr" :key="index">原创 2021-12-03 14:44:23 · 1137 阅读 · 0 评论 -
【Vue】基础理论和指令的使用方法
一、Vue基本概念1、什么是Vue的概念?Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。2、什么渐进式?渐进式就是指可以由浅入深的,由简单到困难的一种方式。3、库和框架库: 封装的属性或方法 (例jQuery)框架: 拥有自己的规则和元素, 比库强大的多 (例bootstrap,V4、开发vue传统开发模式:基于html文件开发Vue工程化开发方式:在webpack环境中开发Vue,这是最推荐, 企业常用的5、vue文件结构template原创 2021-11-24 16:29:00 · 448 阅读 · 1 评论 -
【Webpack】模块打包工具
学习目标:1.能够说出webpack的作用2. 能够掌握webpack基本配置3. 能够知道webpack开发服务器运作过程4. 能够熟练webpack中文文档一、webpack基本概念webpack本质是, 一个第三方模块包, 用于分析, 并打包代码的一个工具支持所有类型文件的打包支持less/sass => css支持ES6/7/8 => ES5压缩代码, 提高加载速度二、webpack使用步骤1、环境准备① 初始化包环境(得到package.json文件)原创 2021-11-22 14:54:46 · 690 阅读 · 0 评论 -
【Vue】根据点击单选项显示不同内容
<template> <div class="messageItem" style="height:540px;overflow-y:auto;"> <div class="oneMsg" style="font-size:18px"> <span class="case" >案件种类</span> <el-radio-group v-model="indexsty原创 2021-08-27 19:08:43 · 2376 阅读 · 1 评论 -
【Vue】报错:data functions should return an object:
初学者在写项目的时候可能会遇到这样的情况遇到此情况是因为你项目中的export default中data缺少一个属性return如图所示:加了之后报错就没有了原创 2021-08-24 20:42:33 · 752 阅读 · 0 评论