- 博客(36)
- 资源 (13)
- 收藏
- 关注
RSS订阅原创 vue-cli项目打包app
一、准备项目开发完成的web app项目（也可以利用vue-cli脚手架构建vue模板项目），npm run dev可以正常预览的项目二、修改项目中的参数1、将项目目录下config文件内index.js中assetsPublicPath修改为assetsPublicPath: './'注意：在这个文件中，有两个assetsPublicPath，一个在dev中，一个在bulid中，我自己试的时候，同时修改，则打包成功的app显示未空白，只修改build中的assetsPublicPat...
2020-05-29 16:24:48
691
原创 vue 购物车（含加减）效果
<template> <div class="shoppingCar"> <div class="shopingWrap"> <p>购物清单</p> <el-table :data="tableData" style="width: 100%"> <el-table-column ...
2020-05-27 15:52:29
836
原创 Vue2.0 $set()处理数据更新但视图不更新的问题
this.$set修改对象属性竟然没有引发视图得更新最终原因是初始对象中没有这个属性时，我直接用obj.num= index+1;新增了一个attr属性，导致在row.num--;this.$set(this.tableData[index],'num', row.num )时没有引发更新。其实新增属性的时候就应该用this.$set(item, 'num', index + 1)来新增属性，这样才能建立起监听。所以总结就是 想要用this.$set 改变后来添加
2020-05-27 15:48:19
3739
原创 error in nextTick: typeError:Right-hand side of “instanceof”is not an object
这样得报错一般都是格式得错误；我将Array用引号引起来了，所以造成了错误，也有可能时type得类型错误；
2020-05-26 14:17:23
4110
原创 vue 封装table带分页
1. 组件页面代码<template> <div class="dashboard-container"> <div class="table-wrap"> <el-table :data="data.list" border stripe ref="multipleTable" :show-summary="showSumm
2020-05-25 18:52:53
994
1
原创 npm 报错 Cannot find module “core-js/modules/es6.regexp.constructor”
不识别es6语法cnpm install core-js@2安装淘宝镜像
2020-05-20 15:00:26
617
原创 vue component layout得侧边栏模板
router indeximport Vue from 'vue'import Router from 'vue-router'import HelloWorld from '../view/worksheet/HelloWorld'import practice from '../view/worksheet/practice'import viewpac from '../view/worksheet/viewpac'import Layout from '../view/layout/
2020-05-20 11:46:02
7171
原创 vue router-view不显示问题
原来在配置router得index.html这个模版里也要加一个做嵌套路由,然后在路由的参数中使用children 配置就可以了实例：见 layout得侧边栏模板
2020-05-20 11:43:32
4837
原创 vue 组件的 scrollBehavior-滚动行为
使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。vue-router能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。注意: 这个功能只在支持history.pushState的浏览器中可用。在文档页面(http://localhost:8080/document)拉动滚动条，然后刷新浏览器会发现滚动条依然在原来的位置，这是浏览器的默认行为，会记录浏览器滚动条默认位置。 但是点击浏览器“前进/后退”按钮，会发现当初...
2020-05-19 18:50:23
2426
原创 vue 路由元信息（meta）
定义路由的时候可以配置meta字段：直接在路由配置的时候，给每个路由添加一个自定义的meta对象，在meta对象中可以设置一些状态，来进行一些操作。用它来做登录校验再合适不过了{ path: '/actile', name: 'Actile', component: Actile, meta: { login_require: false },},{ path: '/goodslist', name: 'goodslist', component: ..
2020-05-19 18:43:39
865
原创 用 vue-route 的 beforeEach
先上代码：import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/view/HelloWorld'import Practice from '@/view/practice'import viewpac from '@/view/components/viewpac'Vue.use(Router)const vueRouter = new Router({ routes: [
2020-05-19 18:29:34
168
原创 vue 重定向 redirect
『重定向』的意思是，当用户访问/a时，URL 将会被替换成/b，然后匹配路由为/bexport default new Router({ routes: [ { path: '/', name: 'practice', component: Practice, redirect: '/HelloWorld' }, { path: '/HelloWorld', name: 'HelloWorld',
2020-05-19 18:15:08
6547
原创 vue Navigating to current location (‘/tempA’) is not allowed 报错
原因：在路由中添加了相同的路由。解决：重写路由的push方法在src/router/index.js 里面import Router from 'vue-router'下面写入下面方法即可/*** 重写路由的push方法*/const routerPush = Router.prototype.pushRouter.prototype.push = function push(location) { return routerPush.call(this, locati...
2020-05-19 17:33:31
159
原创 在vue中使用lang=’scss‘出现报错解决思路
报错：解决方法：输入如下命令：npm install sass-loader@7.3.1 --save-devnpm install node-sass --savenpm install style-loader --save不能直接使用命令：npm install sass-loader --save-dev不然会报以下错误：Module build failed: TypeError: this.getResolve is not a function at Ob.
2020-05-18 18:23:19
4820
3
原创 npm run dev 启动项目自动打开
1. 安装 webpack-dev-server后， 在package.json中找到‘scripts’"scripts": { "dev": "webpack-dev-server --open --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "unit": "jest --config test/unit/jest.conf.js --coverage", "e2e.
2020-05-18 16:42:47
1922
原创 什么是虚拟dom: virtual dom?
vdom是什么？为什么存在？虚拟DOM是干什么的？这就要从浏览器本身讲起。在浏览器渲染网页的过程中，加载到HTML文档后，会将文档解析并构建DOM树，然后将其与解析CSS生成的CSSOM树一起结合产生爱的结晶——RenderObject树，然后将RenderObject树渲染成页面（当然中间可能会有一些优化，比如RenderLayer树）。这些过程都存在与渲染引擎之中，渲染引擎在浏览器中是于JavaScript引擎（JavaScriptCore也好V8也好）分离开的，但为了方便JS操作D
2020-05-18 10:24:54
243
原创 vue 答题小组件
父组件：<template> <div class="wrap"> <div> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="125px" class="demo-ruleForm"> <el-form-item label="请问您的性别是？" prop="radio" v-if="showOn === 0"&g
2020-05-14 17:30:47
1219
原创 vue 修改props父组件传过来的值
父组件<Temp :ruleForm="ruleForm" :nextClick="nextClick" :prevClick="prevClick" @next="nextOuter"></Temp>// 子组件<template> <div class="wrapInner" > <el-button @click="nextInner" :disabled="nextClickInner">下一步1<.
2020-05-14 15:16:42
3254
1
原创 vue实例 出生xxx天转化为具体时间
<template> <div class="wrap"> <div class="wrapInner"> <el-row> <el-col :span="12"><el-input v-model="value"></el-input></el-col> <el-col :span="3"><el-button @click.
2020-05-13 19:10:48
158
1
原创 slot 插槽制作的tabs标签页
父组件：<template> <div class="wrap"> <el-tabs v-model="activeName" type="card" @tab-click="handleClick" editable @tab-remove="removeTab"> <el-tab-pane :label="item" :name="item" v-for="(item, index) in editableTabs" :key=
2020-05-12 16:38:49
2032
原创 vue.esm.js?915d:628 [Vue warn]: Duplicate keys detected: 'tab-定时任务补偿'. This may cause an update erro
最近在vue项目中遇到一个报错，虽然不影响使用，但是报错还是得解决的vue.esm.js?915d:628 [Vue warn]: Duplicate keys detected: 'tab-定时任务补偿'. This may cause an update error.found in---> <TabNav> at packages/tabs/src/tab-nav.vue <ElTabs> at packages/tabs/src/tabs.vu...
2020-05-12 16:21:48
5540
1
原创 vue使用element-ui的el-input监听不了键盘事件解决
vue使用element-ui的el-input监听不了键盘事件，原因应该是element-ui自身封装了一层div在input标签外面，把原来的事件隐藏了，所以如下代码运行是无响应的：如：<el-input v-model="cum" :max="max" :min="min" @change="valueChange" @keyup="show($event)"></el-input>在执行的时候事件是定义在input外面的div上的，所有没有响应。解决方法需要
2020-05-12 14:35:44
1311
原创 vue中created、mounted等方法整理
created:html加载完成之前，执行。执行顺序：父组件-子组件mounted:html加载完成后执行。执行顺序：子组件-父组件methods：事件方法执行watch：watch是去监听一个值的变化，然后执行相对应的函数。computed：computed是计算属性，也就是依赖其它的属性计算所得出最后的值...
2020-05-12 13:51:24
408
原创 Prop being mutated: "counter"
对于父子组件之间的互相传值，报错如下：[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “counter”大概意思是：避免直接更改一个P
2020-05-12 13:45:04
7172
原创 vue 动态组件
Vue.js 提供了一个特殊的元素 <component> 用来动态地挂载不同的组件,使用 js 特性来选择要挂载的组件.示例代码如下:<template> <div class="wrap"> <component :is="active"></component> <button @click="switchTap('temp')">切换到temp</button> <button .
2020-05-12 10:26:15
253
原创 vue 作用域插槽
先看下 代码 就会明白父组件<template> <div class="wrap"> <Temp :message="books"> <template slot-scope="books" slot="book"> <li>{{books.item}}</li> </template> </Temp> </div
2020-05-12 10:02:23
607
原创 vue修饰符 之 .lazy .number .trim
**在输入框中，v-model 默认是同步数据，使用 .lazy 会转变为在 change 事件中同步 ， 也就是在失去焦点 或者 按下回车键时才更新**<template> <div> <input type="text" v-model.lazy="value"> <p>{{ val }}</p> </div></template><script> ...
2020-05-11 14:20:52
177
原创 vue 购物车合计效果
<template> <div class="wrap"> <el-table empty-text="购物车为空" :data="tableData" :summary-method="getSummaries" show-summary style="width: 100%"> <el-table-column label="商品名称" ...
2020-05-11 11:02:53
1055
原创 vue summary-method 报错 Cannot read property '0' of undefined"
加了：summary-method报错 是因为 你添加的事件没有返回值// html片段<el-table :data="tableData" :summary-method="getSummaries" show-summary style="width: 100%">// 下面未官方给出的事件 getSummaries(param) { const { columns, data } = param; const sums = [];...
2020-05-09 11:20:57
1784
3
原创 vue中过滤器filter的全局封装和使用
在前后端分离的项目中，经常会有后台返回的数据需要进过处理才能显示到页面上的场景。举例子 接口返回的是0 页面显示 女 ; 接口返回1 页面显示男可以在filters目录下新建一个index.js来存放所有的过滤器就足够了。index.js代码如下：let sexIdcardFilter = (num) => { if (num === 0) { return '女' } if (num === 1) { return '男' }}exp...
2020-05-08 19:29:45
1130
原创 this.$set/Vue.set
首先声明this.$set和Vue.set的原理是相同的；都是使用了set函数。set函数是从 …/observer/index 文件中导出的，区别在于Vue.set()是将set函数绑定在Vue构造函数上，this.$set()是将set函数绑定在Vue原型上。在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给对象赋值时，有时候并不会自动更新到视图上去； 当我...
2020-05-08 15:27:17
212
原创 v-clock
先看以下这段代码<ul v-for="item in obj"> <li>{{ obj.name }}</li></ul>那么，当我们使用vue从后台读取的数据时或者是刷新页面的时候因为响应问题可能会闪现一下{{obj.name}} 这个vue.js模板变量，这样给用户带来了不好的体验，这时候v-cloak 就要派上用场了v...
2020-05-08 14:50:51
4682
2
图片炸裂进入
2017-09-20
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人