![](https://img-blog.csdnimg.cn/20190918140012416.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
Vue
绝世唐门三哥
改变世界的程序猿@三哥
展开
-
插件------vue-awesome-swiper 插件不会loop(无限循环)了
现象产生:vue-awesome-swiper使用自动轮播和循环轮播不生效(loop和autoplay)!!!!解决方案:一. 在项目中使用vue-awesome-swiper如果loop和autoplay总是出现各种问题,第一次加载的时候,轮播是不动的,需要重新加载一下swiper才会轮播 配置项: swiperOption: { //循环 loop:true, //设定初始化时slide的索引原创 2021-12-06 11:23:21 · 909 阅读 · 0 评论 -
Vue------Props传值的相关操作以及总结说明
目录❤以字符串数组形式列出的 prop:❤以指定类型列出的 prop:❤Prop 验证: 各种形式的prop参数列举❤prop参数的所有类型列举:// 引用类型的话,默认值要为函数返回值的形式!!!1.String 2.Number 3.Boolean 4.Array 5.Object 6.Date 7.Function 8.Symbol❤以字符串数组形式列出的 prop:// 这种表示一般用于简单的静态传值:比如只是一个标题,或者一段文字props: ...原创 2021-08-11 20:44:11 · 1164 阅读 · 0 评论 -
vue------eventBus在vue中的使用说明
在vue项目中,父子组件间的通讯很方便。但兄弟组件或多层嵌套组件间的通讯,就会比较麻烦。这时,使用eventBus通讯,就可以很便捷的解决这个问题。原创 2021-06-10 17:11:28 · 417 阅读 · 0 评论 -
vue------指令之参数方式
123原创 2021-06-10 16:24:20 · 259 阅读 · 0 评论 -
vue------axios中使用get传对象实现方式
一、下载插件qs,处理请求的参数yarn add qs 或 npm install qs二、处理请求 import qs from 'qs' import Axios from "axios"function fetchHrList(data) { return new Promise((resolve, reject) => { service({ url: '/userInfo/queryUserInfo', method: 'get',原创 2021-04-15 15:49:28 · 4317 阅读 · 0 评论 -
Vue------关于路由传参刷新丢失的问题(最全方法)~~~
传参方式 技术点 缺点 通过路由params传参 params 用于组件传递,params刷新页面数据会丢失。 通过路由query传参 query params和query,params传值刷新页面是要消失的,然而query却不会,两者的区别就在于query会把传递的参数显示在url地址中 通过vuex vuex 通过vuex来存和取你的数据,把你的数据都存在vuex中,然后那个组件需要,直接调用vu原创 2021-03-19 17:43:37 · 1403 阅读 · 0 评论 -
UI------采用elementUI的自定义主题,et -i时报错primordials is not defined
原因何在:处理方法的地址很简单,因为node的软件的版本过高,切换对应的低版本node后可执行et -i或者 et -i 文件名它会生成到当前根目录文件夹下安装对应插件# 安装工具npm i element-theme -g# 安装白垩主题,可以从 npm 安装或者从 GitHub 拉取最新代码。# 从 npmnpm i element-theme-chalk -D# 从 GitHubnpm i https://github.com/ElementUI/theme-chalk -D原创 2020-10-28 13:36:05 · 1092 阅读 · 0 评论 -
vue---Vue 不能检测数组和对象的变化,采用set方法解决(即修改的数据非响应式)以及异步更新队列
对象的处理:(对于已经创建的实例,Vue 不允许动态添加根级别的响应式 property)Vue 无法检测 property (属性)的添加或移除。由于vue会在初始化实例时对property执行getter/setter执行转化,所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。解决方式: 全局: Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property 局部: this.$set.原创 2020-10-16 15:44:46 · 1236 阅读 · 0 评论 -
Vue---自定义指令directive的全局注册和局部注册(含vue3)
实现自动获取焦点(autofocus)// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() }}) directives(局部组件自定义事件属性)注意focus处的字段名要是事件名,而非自定义的名字directives: { focus: { // 指令的定义 bind..原创 2020-10-14 18:08:23 · 3765 阅读 · 2 评论 -
npm------npm安装指定版本node_modules包和查看指定包的所有版本以便自由选择!
一、安装 npm 包的旧版本可以使用@语法来安装 npm 软件包的旧版本:npm install <package>@<version>实例:npm install cowsay@1.2.0npm install -g webpack@4.16.4二、可能还有需要列出软件包所有的版本这里的语法很适合在不知道使用包的对应版本时使用npm view <package> versions实例:> npm view cowsa...原创 2020-10-14 10:42:34 · 5065 阅读 · 0 评论 -
vue------vue项目中全局引入单独的css文件或者单独的第三方js插件
一、全局引入css文件,比如animate.css动画插件main.js文件中import animated from 'animate.css'; // 引入UI样式Vue.use(animated); // vue使用对应的样式某vue文件中:这里animated必须写,后面紧跟想要对应的动态类名加上即可 <transition name="custom-classes-transition" :enter-active-class="animated f原创 2020-10-12 16:45:03 · 1284 阅读 · 0 评论 -
vue------ant-design按需引入报错,Module build failed,.bezierEasingMixin();
1原创 2020-10-09 16:34:46 · 1302 阅读 · 0 评论 -
vue------处理边界情况(即一些需要对 Vue 的规则做一些小调整的特殊情况)
访问元素&组件(手动操作其他组件的数据)在绝大多数情况下,我们最好不要触达另一个组件实例内部或手动操作 DOM 元素,一些特殊情况:访问根实例:this.$root在每个new Vue实例的子组件中,其根实例可以通过$rootproperty 进行访问。 在子组件中直接通过this.$root即可获取new Vue()出来的根实例对象 在绝大多数情况下,我们强烈推荐使用Vuex来管理应用的状态。访问父组件实例:this.$parent(和$ro...原创 2020-10-09 10:19:36 · 229 阅读 · 1 评论 -
Vue------vue运行时报错:You are using the runtime-only build of Vue where the template compiler ......
报错信息:[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.解决方案:在vue项目中新建一个文件vue.config.js,之后添加下述代码,再次运行解决:mo..原创 2020-09-29 13:45:53 · 599 阅读 · 0 评论 -
vue------关于slot插槽的相关问题总结:匿名、具名、作用域、解构插槽等
学习之前:了解下组件基础data必须是一个函数:一个组件的data选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝;-通过Prop向子组件传递数据-every component must have a single root element (每个组件必须只有一个根元素):可以将模板的内容包裹在一个父元素内,来修复这个问题-...原创 2020-09-28 10:04:15 · 1621 阅读 · 0 评论 -
vue------关于自定义事件的总结:$attrs、$listeners、inheritAttrs: false、kebab-case 、修饰符
事件名(推荐使用kebab-case格式命名 或 update:myPropName)不同于组件和 prop,触发的事件名需要完全匹配监听这个事件所用的名称:使用 kebab-case (set-font | get-url) 子父传值:通过$emit('自定义事件名(kebab-case)',参数) ,一般子父传值需要操作事件时要用到事件名 推荐以update:myPropName的模式触发事件 :this.$emit('update:title',params)如果触发一个 camel...原创 2020-09-22 16:56:55 · 570 阅读 · 0 评论 -
Vue---vue相关面试题-知识点总结
两者同级时,循环v-for优先级高于判断v-if2.vue组件data数据为什么一定要是函数1.vue祖江可能存在多个实例,如果使用对象的形式定义data,则会。原创 2022-04-28 21:21:20 · 840 阅读 · 0 评论 -
vue------axios在vue中的实例、基本配置和拦截器介绍
123原创 2020-06-15 15:44:02 · 726 阅读 · 0 评论 -
vue------全局安装 Vue cli3 和 继续使用 Vue-cli2.x,以及包括vue -V报错的问题解决
Do not use built-in or reserved HTML elements as component id: dialog不要使用内置或保留的HTML元素作为组件id:dialog原创 2020-06-09 13:11:44 · 419 阅读 · 2 评论 -
Vue---vue中使用nprogress插件-进度条的方法
放在导航守卫中使用:1、安装$ npm install --save nprogress 或者$ yarn add nprogress//用法NProgress.start();NProgress.done();2、使用router.js//导入import NProgress from 'nprogress'import 'nprogress/nprogr...原创 2019-12-24 10:54:46 · 2166 阅读 · 0 评论 -
vue------This dependency was not found: * !!vue-style-loader!css-loader? 解决方案
但是当你新建一个vue项目时,需要重新安装stylus,否则报错:This dependency was not found:* !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":t...原创 2019-12-19 16:19:07 · 490 阅读 · 0 评论 -
vue------provide & inject 依赖注入(层级较深时组件之间传值)
前置介绍:provide/inject需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。如果你熟悉 React,这与 React 的上下文特性很相似父组件中:<template> <div id="app"> {{count}} <child-co...原创 2019-12-19 09:23:41 · 904 阅读 · 0 评论 -
vue------vue中mixins(混入)的使用方法和注意点
vue中的解释是这样的,如果觉得语言枯燥的可以自行跳过嘿~混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。mixins的特点: 方法和参数在各组件中不共享举个栗子:1. 定义一个混入对象2. 把混入对象混入到当前的组件中(组件1...原创 2019-12-18 16:57:04 · 2028 阅读 · 0 评论 -
vue------props组件传值时的类型及写法
前置说明:注意在 JavaScript 中对象和数组是通过引用传入的,所以对于一个数组或对象类型的 prop 来说,在子组件中改变这个对象或数组本身将会影响到父组件的状态。支持类型:type 可以是下列原生构造函数中的一个:StringNumberBooleanArrayObjectDateFunctionSymbol额外的,type 还可以是一个自定义的...原创 2019-12-18 16:18:41 · 3733 阅读 · 0 评论 -
Vue---组件传值总结(父子、子父、非父子三种传值方式)
前置说明:借鉴来源1.单向数据流:只能父组件向子组件传递信息,子组件不能向父组件传递信息2.在组件中使用从props传来的数据可以直接用this.xxx来获取3.数据验证:在HTML中绝对不允许使用驼峰,因为HTML会把大写全部转化为小写。在props中可以用驼峰或短横线,在template和data、this.xxx中只能使用驼峰,这是因为在vue中短横线会被误认为减号,会报错。即............原创 2019-12-18 15:55:43 · 735 阅读 · 0 评论 -
vue-----不会触发响应式数据更新的情况
Array数组中:由于 JavaScript 的限制,Vue不能检测以下数组的变动:当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength数组:var vm = new Vue({ data: { items: ['a', ...原创 2019-12-17 16:38:24 · 1257 阅读 · 0 评论 -
vue------修饰符总结之事件修饰符、按键修饰符、系统修饰符、按键码~
事件修饰符:(使用修饰符时,顺序很重要;相应类型的代码会顺序产生)事件修饰符:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。.stop <!--阻止单击事件继续传播,即只会作用在对元素上面,阻止冒泡事件的发生,更不会有捕获了-->.prev...原创 2019-12-17 14:10:04 · 586 阅读 · 0 评论 -
vue------关于条件渲染v-if、v-show的相关总结
两者相关定义:v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。v-show就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换display。使用场景:一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show ...原创 2019-12-17 11:28:06 · 560 阅读 · 0 评论 -
vue------在vue中使用css modules替代scroped
原文章地址:https://www.cnblogs.com/xiaohuochai/p/8537959.htmlscoped与module区别:scoped 属性会自动添加一个唯一的属性 (比如 data-v-21e5b78) 为组件内 CSS 指定作用域,编译的时候 .list-container:hover 会被编译成类似 .list-container[data-v-21e5b7...原创 2019-12-16 16:24:31 · 246 阅读 · 0 评论 -
vue------Class与Style的数据绑定
Class数据的绑定:1.传给 v-bind:class 一个对象,以动态地切换 class:<div class="static" v-bind:class="{ active: isActive }"></div>data: { isActive: true}渲染结果:<div class="static active"></di...原创 2019-12-12 17:28:41 · 224 阅读 · 0 评论 -
Vue---计算属性computed(传参使用)
对于任何复杂逻辑,你都应当使用。原创 2019-12-12 16:43:46 · 252 阅读 · 1 评论 -
Vue------vue风格指南,指定相应规则
1.如何使用 GitHub 上 Vue 最新的源码描述:GitHub 仓库的/dist文件夹只有在新版本发布时才会提交。如果想要使用 GitHub 上 Vue 最新的源码,你需要自己构建!git clone https://github.com/vuejs/vue.git node_modules/vuecd node_modules/vuenpm installnpm ru......原创 2019-12-16 15:28:51 · 316 阅读 · 0 评论 -
vue------关于 package.json 和 package-lock.json 文件说明
https://www.cnblogs.com/wyhcool/p/10798564.html 原网址先来个简短说明:package-lock.jsonpackage-lock.json 是在 `npm install` 时候生成的一份文件,用以记录当前状态下实际安装的各个 npm package 的具体来源和版本号。package-lock.json 文件的作用锁定安装时的包的版本...原创 2019-11-11 17:32:08 · 1429 阅读 · 0 评论 -
vue------export default{name:'myname',...} name作用
比较详细的介绍总结:https://blog.csdn.net/weixin_39015132/article/details/835738961.描述了两种使用情况:便于在浏览器中找到对应组件 和 自身组件的递归调用2.使用keep-alive时可以使用include和exclude指定需要缓存和不需要缓存的组件。指定的依据就是组件的name。...原创 2019-11-02 15:59:54 · 1434 阅读 · 0 评论 -
vue------ 关于深度选择器(>>> | /deep/)
vue引用了第三方组件,需要在组件中局部修改第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染。此时只能通过>>>,穿透scoped。有些Sass 之类的预处理器无法正确解析>>>。可以使用/deep/操作符(>>>的别名)<style scoped>外层 >>> 第三...原创 2019-10-28 16:17:32 · 3635 阅读 · 0 评论 -
vue------个人写eleApp遇到的问题
项目上线前的说明:第一:这里使用的本地缓存的包。即有个功能是访问对应商品id下的商品列表即localhost:8080/?id=2 这里对id=2的商品收藏,会将对应状态保留在本地localStorage中,模拟了存放在服务器的状态一隐藏功能:本人自己加了对应id下的tab切换会被记录在对应的id下,切换其他的id再回来或者直接刷新对应的id商品tab不会被初始化!第二:即将加...原创 2019-11-07 17:08:49 · 1431 阅读 · 0 评论 -
vue------ vue全局安装时使用问题: 无法加载文件XXX,在此系统上禁止运行脚本
问题:vue : 无法加载文件 C:\Users\Admin\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参 阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。所在位置 行:1 字符: 1+ vue+ ~~~ + Cate...转载 2019-10-10 16:29:34 · 640 阅读 · 0 评论 -
vue------VUE 之 生命周期函数-组件创建期间的4个钩子函数
最初: new Vue()创建一个Vue的实例对象接着初始化Vue实例对象:methods:{ show() { //方法 }},beforeCreate(){ //该生命周期函数执行时,data 和 methods中的数据还没有被初始化,在这里获取不到对应的数据或者方法,vue实例的挂载元素$el和数据对象data都为undefined,还未...原创 2019-06-18 17:16:02 · 285 阅读 · 0 评论