![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 71
Kotoba209_
学会在孤独中与自己交谈,听自己说话,从而学会深刻。
展开
-
Vue父组件调用子组件事件的两种方法
原文:Vue父组件调用子组件事件的两种方法首先我们要了解$on和$emitvm.$on( event, callback ):监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。vm.$emit( event, […args] ):触发当前实例上的事件。附加参数都会传给监听器回调。父组件中:<template> <div> <div @click="click">点击父组件</d转载 2020-06-05 14:32:16 · 7330 阅读 · 0 评论 -
Error: [vuex] do not mutate vuex store state outside mutation handlers
1. 问题解析通常出现这种错误是因为 在 mutation 函数外修改了 state 里面的值,如:我这里的参数data是一个对象, 对象为引用类型, 像这样直接赋值只是把地址赋值到当前变量上, 地址指向的值还是同一个对象。 所以在其他地方修改参数data的时候相当于是在修改state里面的selectedSpec, 然后就会报错了。数组同理。2. 解决方法可以通过值拷贝的方式把参数data拷贝一份再赋值给state里面的变量,如果只是简单引用类型的值,可以通过浅拷贝的方式数组也可以使用as原创 2020-05-29 16:00:36 · 2458 阅读 · 0 评论 -
vue 使用ECharts
安装echartsyarn add echarts在组件中引用import echarts from 'echarts'根据官方文档用例定义容器<template> <div> <div id="main" ref="bar" style="width: 600px;height:400px;"></div> </div></template>在mounted中获取DOM节点通过refcons原创 2020-05-15 16:21:10 · 202 阅读 · 0 评论 -
自定义vant组件样式
学习修改vant组件样式无法显示的问题由于scoped只对当前.vue文件中的template模板标签内的结构有效,所以在含有scoped属性的style标签中修改vant组件样式是无效的。所以先确保.vue文件的style标签没有使用scoped属性,然后在浏览器中查看想要修改的组件的类名即可。如上图中使用类名.van-button--default修改button的背景颜色<s...原创 2020-02-12 15:41:41 · 13727 阅读 · 0 评论 -
vue 解决路由参数变化 当前页面以及页面内的组件未更新的问题
需求描述:当前路由不变,参数改变,页面进行动态渲染如:/users/1 -> /users/2 ,参数由1变为2,页面数据需要更新,但是一般情况下原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。先介绍用到的两个方法watch一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名...原创 2020-01-10 12:10:33 · 3107 阅读 · 0 评论 -
iview爬坑之路(一)render以及renderHeader函数
在此之前由于习惯了vue template的写法,使用render函数进行标签定义有些不大习惯,因此记录于此,以便日后参考。在项目中使用render函数最多的是iview的Table组件,所以以此为例自定义表内容用render函数自定义表内容语法: render: (h, params) => { return h(' 定义的元素 ', { 元素的性质 ...原创 2020-01-09 11:48:25 · 3952 阅读 · 1 评论 -
vue实现购物车页面操作 商品的单选和全选以及商品单价和总价的动态变化
vue框架搭建,UI库使用的是iview,购物车页面使用iview的table组件,没有用到element,不知道实现起来效果怎么样,感觉iview有点坑。准备工作:数据源shoppingCart:[ ];该数据数据结构如下const items = { id: data.id, num: data.num, img: data.img...原创 2020-01-08 17:42:21 · 2648 阅读 · 0 评论 -
vue 对象属性数组从对象数组中动态渲染值
数据格式如下arr1 = [ "规格", "重量" ]arr2 = [ { "规格": "7号", "重量": "10斤" }, { "规格": "5号", "重量": "8斤" }, { "规格": "7号", "重量": "9斤" } ]用v-for就完事了,循环两次<div v-for="(s, index) in arr1" :key="index"> ...原创 2019-12-30 16:25:40 · 2905 阅读 · 0 评论 -
vue 解决连续点击按钮多次提交表单的问题
做表单提交的时候遇到一个问题:表单以及其他的数据提交,如果连续点击提交按钮,不做处理的话会导致同一个表单提交多次到数据库。一开始想到这个问题,简单,在data函数中定义一个变量然后绑定到按钮的disable属性中点击提交按钮后把disable设为true,这样就会禁用按钮了,然后发出请求提交数据后在回调函数中再把disable改为false大功告成!但是问题来了如果后端出现问题导...原创 2019-12-04 18:14:41 · 6737 阅读 · 0 评论 -
axios封装的请求方法
import axios from 'axios';import { getToken} from '@/utils/auth';// eslint-disable-next-lineimport Message from 'iview/src/components/message';const service = axios.create({ baseURL: process...原创 2019-12-02 17:35:11 · 299 阅读 · 0 评论 -
vue父组件通过props传值设置子组件的样式
一. 子组件在元素中绑定样式在props中写入style绑定的变量二. 父组件引入子组件并注册在子组件元素中绑定需要传的变量并给值原创 2019-11-27 09:37:47 · 2671 阅读 · 0 评论 -
vue Eslint 报错 Expected linebreaks to be 'LF' but found 'CRLF'
由于与原使用的操作系统不一致导致的错误。找到.eslintrc.js文件在rules项添加如下代码'linebreak-style': [0, 'error', 'window'],转载 2019-11-26 14:55:11 · 411 阅读 · 0 评论 -
VScode 配置Vue ESlint + 格式化代码
1. 安装插件ESlintveturPrettier - Code formatterManta’s Stylus Supremacy2. 在setting.json文件中添加配置代码依次打开 : 文件(file)–>>首选项(preferences)–>>设置(settings)在搜索框中输入setting.json在大括号中添加如下代码// v...转载 2019-11-26 12:07:05 · 780 阅读 · 0 评论 -
vue 图片懒加载
1. 安装插件yarnyarn add vue-lazyloadnpmnpm i vue-lazyload -S2. 在入口文件main.js中引入import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload)3. 在组件中使用<ul> <li v-for="img in list"> ...原创 2019-11-25 17:16:46 · 118 阅读 · 0 评论 -
vue3版本跨域 axios解决
vue3版本跨域 axios解决先在根目录下(与src同级)新建vue.config.js文件// vue.config.jsmodule.exports = { outputDir: 'dist', // build之后的目录名称 assetsDir: 'assets', // 静态资源目录 lintOnSave: false, // 是否开启eslint devS...原创 2019-11-18 16:15:59 · 412 阅读 · 0 评论 -
vue注册局部组件与全局组件
局部组件创建一个.vue文件如myComponent.vue页面内容随意 如:在需要用到该组件的页面引入该组件使用命名规则详情见文档vue官方文档全局组件新建一个plugins文件夹在文件夹中创建放置全局组件的文件myComponents.js在components.js文件中引入所有要注册的全局组件在main.js文件中,引入components.js...转载 2019-03-29 17:55:05 · 218 阅读 · 0 评论 -
ESLint Unary operator '++' used
ESLint认为一元操作符,是不安全的,所以禁止使用文档:https://eslint.org/docs/rules/no-plusplusESLint格式/eslint no-plusplus: “error”/var foo = 0;foo += 1;var bar = 42;bar -= 1;for (i = 0; i < l; i += 1) {return;}...原创 2019-03-27 17:16:24 · 5885 阅读 · 0 评论 -
The data property "value" is already declared as a prop. Use prop default value instead.
The data property "value" is already declared as a prop. Use prop default value instead在prop和data中重复定义变量"value"。原创 2019-07-17 16:12:59 · 3602 阅读 · 0 评论 -
自定义yarn运行vue项目命令
在项目中的package.json文件的scripts块中可以看到新项目的yarn命令集合"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" },serve 就是vue项目的启动命令,可以通过修...原创 2019-07-31 09:46:05 · 12768 阅读 · 0 评论 -
vue选项组通过点击实现Class切换
首先使用v-for指令动态生成选项组html<ul class="content clear"> <li v-for="(item, index) in items" :key="index">{{item.title}}</li> </ul>jsdata() { return { ite...原创 2019-07-31 10:49:42 · 434 阅读 · 0 评论 -
vue.js父子组件通过Prop传值
前言:本文主要记录父子组件之间通过prop进行数据传递的方法一,即将Prop中的值赋值给本地定义的属性,不涉及prop的其他特性父组件向子组件传值先写一个简单的子组件,内容如下<template> <div> <span class="child">{{msg}}</span> <br> </d...原创 2019-08-16 13:23:41 · 2480 阅读 · 0 评论 -
vue项目中引入iconfont及引入图标后显示方块问题
先进官网iconfont找到想要添加的图标,然后点击添加到购物车。2. 点击添加到项目,如暂未存在项目则点击添加至项目后可新建项目(iconfont需登录)3. 选择Symbol然后点击下载至本地4. 解压后,不需要前两项,剩余的在项目中新建一个iconfont文件夹并把这些文件添加到文件夹中5. 在入口文件main.js中引入css文件6. 在需要添加的图标的地方加上一...原创 2019-08-16 15:18:09 · 6405 阅读 · 9 评论 -
Vuex中的辅助函数mapState,...mapState对象展开符学习笔记
最近找了个项目来练习,发现项目中有几处出现…mapState函数,遂去官网查看文档以及各路大佬分享的经验之谈,于是准备写点东西加深印象。关于Vuex可前往官网查看更多内容,开始正文mapState是state的辅助函数,其实也就是state的语法糖1.不使用mapState// store.jsVue.use(Vuex);export default new Vuex.Store(...原创 2019-08-16 17:58:39 · 827 阅读 · 0 评论 -
Elements in iteration expect to have 'v-bind:key' directives
这里写自定义目录标题vue 出现Elements in iteration expect to have 'v-bind:key' directives问题vue 出现Elements in iteration expect to have ‘v-bind:key’ directives问题两种解决方法:v-for 后添加 :key=‘item’<v-for=“item in i...原创 2019-03-27 17:17:45 · 111 阅读 · 0 评论