vue
文章平均质量分 55
傻小胖
一个正在爬的小胖子
展开
-
vue引入luckysheet插入图表时报错Uncaught TypeError: h.createChart is not a function
Uncaught TypeError: h.createChart is not a function原创 2022-10-08 15:13:42 · 3001 阅读 · 9 评论 -
Luckysheet 在vue中离线使用方法以及引入报错解决方案
Luckysheet 在vue中离线使用方法以及引入报错解决方案原创 2022-09-26 11:21:56 · 1446 阅读 · 0 评论 -
element el-cascader el-select @change expand-change自定义参数传递和接收
方法一:参数传递<el-cascader v-model="value" :options="List" @expand-change="handleChange($event,'222')" /><el-cascader v-model="value" :options="List" @change="handleChange($event,'222')" />参数接收 handleChange(value, path) => {原创 2022-05-05 10:55:22 · 3171 阅读 · 0 评论 -
vue中<router-view> can no longer be used directly inside <transition> or <keep-alive>
问题:如描述所说[Vue Router warn]: <router-view> can no longer be used directly inside <transition> or <keep-alive>. Use slot props instead就是vue-router不再使用原来的写法,用slot插槽代替原因:检查vue-router的版本一般是4.x以上的都改用了新的写法解决:改成:<router-view v-sl原创 2022-03-16 18:02:55 · 10814 阅读 · 1 评论 -
vue 报错 Uncaught TypeError: Cannot assign to read only property ‘exports‘ of object ‘#<Object>‘
Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>' at Module......原因:webpack版本过高,通常出现在拉了别人的代码跑不起来的情况,解决办法:1.删除node_moudules,安装指定版本的webpack2.根目录找到.babelrc文件,注释掉"transform-runtime"...原创 2020-08-18 09:28:36 · 1046 阅读 · 0 评论 -
vue 请求统一封装和调用
1. request.js统一封装的请求接口/* * @Author: your name * @Date: 2020-03-20 14:17:34 * @LastEditTime: 2020-03-26 11:27:50 * @LastEditors: your name * @Description: In User Settings Edit * @FilePath: 。。。。。。。。。。 */import axios from 'axios'import { Message原创 2020-06-03 16:52:55 · 7574 阅读 · 2 评论 -
vue组件的继承用法
vue组件的继承适用于UI几乎一样,只是数据不一样的情况下,但是这种情况通过统一封装组件也是能实现的,小功能建议用封装,大功能建议用组件继承,因为大功能在结合搜参数的需要多重的判断,这样会导致封装的组件比较繁杂,出现过多的判断,用继承可以改写基类中的方法和数据下面来看个例子基类:<!-- * @Author: your name * @Date: 2020-05-26 15:22:12 * @LastEditTime: 2020-05-27 11:40:49 * @LastEdi原创 2020-05-27 14:30:50 · 22595 阅读 · 5 评论 -
vue全家桶项目搭建之五——vue 中路由vue-router配置方法以及vue-router路由的跳转方法以及参数的传递和接收
一、安装vue-routernpm install vue-router二、配置vue-router1.src文件下新建文件夹router与store平级,并配置路由/* * @Author: jona * @Date: 2020-05-15 11:30:33 * @LastEditTime: 2020-05-15 15:19:41 * @LastEditors: Please set LastEditors * @Description: 路由 * @FilePath: \原创 2020-05-18 16:48:24 · 843 阅读 · 2 评论 -
vue全家桶项目搭建之四——vue 中配置vuex以及vuex的使用方法
一、安装vuexnpm install vuex --save二、将vuex配置到vue中1. 在src目录下创建store文件夹在store文件夹下面创建module文件夹用于存放不同功能的store目录如下2.index.js对vuex进行配置导出index.js里面配置import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);import login from "./module/login原创 2020-05-15 10:12:06 · 2033 阅读 · 0 评论 -
vue全家桶项目搭建之三——vue cli4.0+中使用proxy配置代理转发以及配置使用@路径引入和eslint配置
目录一、vue cli4.0+中使用proxy配置代理转发二、配置使用@路径引入三、改变vue项目启动的端口号和 项目启动时自动在浏览器中打开一、vue cli4.0+中使用proxy配置代理转发这个比较的重要,所以单独提出来首先在demo的根目录下面新建vue.config.js一个文件,注意是新建,vue-cli3.0以后没有这个文件了所以需要自己新建一个如图:module.exports = { devServer: { proxy: {..原创 2020-05-13 16:38:32 · 6435 阅读 · 0 评论 -
vue全家桶项目搭建之二——配置UI (将element-ui配置到vue项目当中)
一、安装element-uinpm i element-ui -S二、引入 Element这里你可以引入整个 Element,或是根据需要仅引入部分组件也就是俗称的按需加载。1.完整引入在main.js里面配置import Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css'; //样式要单独导入import App from './Ap原创 2020-05-13 15:25:54 · 2202 阅读 · 0 评论 -
vue全家桶项目搭建之一——vue-cli 4.0+ 脚手架搭建基础demo
一、安装脚手架npm install -g @vue/cli安装完成后看看版本vue --version二、创建一个基础demovue create test这里会出现一个基础demo模板的选择,很多人不知道命令行里面的选择是怎么选择的。这里我用的是直接选择需要的模板序,然后回车选择,默认第一个的序号是1。选择自己需要的模板进行基础demo的创建,具体的模板有些什么看官网:https://cli.vuejs.org/zh/guide/creating-a-pro原创 2020-05-13 15:04:04 · 1681 阅读 · 0 评论 -
vue父组件值更新子组件值不更新之el-table下的table-column中template下元素或子组件值不更新
问题:element-ui中table-column中有循环,子cell又是使用template(scope)渲染的,当循环数据更新(push,splice,或者重新赋值)时,可能出现子cell不变的情况,从而导致页面元素和循环数据对不上的报错问题猜测:可能是template中的scope没有变化导致不更新,或者element-ui做了优化避免不必要更新导致的bug解决:在table上加上...原创 2020-03-30 19:56:53 · 3476 阅读 · 0 评论 -
vue常见面试问题总结
1.谈谈你对MVVM的理解定义:MVVM分为Model、View、ViewModel 。Model:代表数据模型,数据和业务逻辑都在Model层中定义,俗称的dataView:代表UI视图,负责数据的展示,俗称的html部分,也叫模板部分ViewModel:负责监听Model中数据的改变并且控制视图的更新,处理用户交互操作,在这里是作为一个桥梁来连接Model和ViewMode...原创 2020-05-15 11:27:20 · 1168 阅读 · 1 评论 -
谷歌浏览器莫名自动回填from表单的问题解决方式
在开发中遇到不管怎么查看数据,都没有,但是表单还是会被回填的情况原因:原因是浏览器里面保存了很多个账号密码,他让你记住密码后下一次免输入密码的机制是去找当前页面的表单中id,name或者 type为password的第一个input ,回填记住的密码,然后把最近的一个type为非number类型的input回填记住的账号;因此,当你的表单中存在类型为password的input的时候就...原创 2020-01-17 16:21:19 · 1098 阅读 · 0 评论 -
vue中将包含echarts的页面导出能在浏览器打开的纯静态html格式文件
目录1.导出html2.导出css3.导出js4.完整代码5.结果:6.包含echarts的导出7.结果:1.导出html<div ref = 'testd' id ='div' onclick="evetest('11111111')" > <span>导出html</span><div>...原创 2019-11-26 10:07:26 · 2788 阅读 · 0 评论 -
vue常用指令v-bind的使用总结
vue的属性绑定一般都用v-bind来绑定属性。v-bind可以简写为:eg:v-bind:src可以简写:srcsrc绑定本地路径出现问题:参考https://www.jianshu.com/p/f82c5ecbd3a5以下摘自vue的api文档:仅做自我学习的笔记https://cn.vuejs.org/v2/api/#v-bind修饰符:.原创 2018-01-20 17:30:02 · 19133 阅读 · 0 评论 -
vue开发环境搭建以及项目创建
1.安装node.js下载安装地址Node.js安装包及源码下载地址为:https://nodejs.org/en/download/。安装步骤安装即可没有什么难度。环境要借助于node,所以要先安装node,借助于node里面的npm来安装需要的依赖等等。 2.安装npm 由于新版的NodeJS已经集成了npm,所以之前npm也一并安装好了。同样可以使用cmd命令行输入"npm -v原创 2017-12-12 20:17:56 · 573 阅读 · 0 评论 -
vue基于webpack 模板的目录结构以及目录作用的解析
一个vue目录建好如下:1.build2.config3.node_modules4.src5.static6.babelrcbabelrc文件是babel的配置文件主要适用于编译es6转义为es5一般用2个插件es2015,stage-2,transfer-runtime"comments": false原创 2017-12-16 09:49:26 · 10013 阅读 · 8 评论 -
vue如何配置使import导入直接用@导入不考虑层级(import xxxComponent from 'components/xxxComponent')
在build/webpack.base.conf.js中找到resolve直接上代码:resolve: { // resolve是webpack的内置选项,顾名思义,决定要做的事情,也就是说当使用 import "jquery", // 该如何去执行这件事情就是resolve配置项要做的, // import jQuery from "./additiona原创 2018-01-04 19:58:45 · 17428 阅读 · 2 评论 -
关闭令人抓狂的ESlint 语法检测配置方法
刚刚开始的小伙伴是不是空格报错少一行报错各种错?是不是觉得快被限制的失去了自由的思绪了?受折磨后找到了不错的文章来取消eslint语法检测限制,作为学习笔记摘自segmentfault其实我并不反对这些语法检测,但是像许多反个人意愿的那就真的不得不吐槽了,比如vue-cli脚手架创建的默认eslint规则:代码末尾不能加分号;代码中不能存在多行空行tab键原创 2018-01-04 19:22:23 · 94716 阅读 · 14 评论 -
vue引入组件无法显示且报错[Vue warn]: Do not use built-in or reserved HTML elements as component id: header
一、Vue在引入组件后无法显示组件内容且报错如下:[Vue warn]: Do not use built-in or reserved HTML elements as component id: header二、原因是vue里面不允许用特殊的标签来做自定义的标签比如你不能用a来接收一个组件的注册然后在以自定义标签的方式引用会被限制三、解决方案在component里面注册组件的时原创 2017-12-19 20:10:05 · 38728 阅读 · 4 评论 -
在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":true,"id":"data-v-1d57e5原创 2017-12-19 17:33:44 · 8428 阅读 · 4 评论 -
vue中css预加载使用sass的配置方式
1.安装sass的依赖包npm install --save-dev sass-loader//sass-loader依赖于node-sassnpm install --save-dev node-sass2.在build文件夹下的webpack.base.conf.js的rules里面添加配置,如下红色部分{ test: /\.sass$/, l原创 2018-01-05 15:33:49 · 4817 阅读 · 0 评论 -
vue-router的安装使用
1.安装方法一:在package.json里的package.json的的pendencies里面添加当前需要安装的版本号,最新的版本号可以去gihub上面去搜 "dependencies": { "stylus": "^0.54.5", "vue": "^2.5.2", "vue-router": "^3.0.1" },配置完成之后再执行npm in原创 2018-01-04 20:22:43 · 31191 阅读 · 4 评论 -
vue-resource vue中 异步请求的所依赖的库的使用方法
1.方法一:a.在package.json里面配置好:"vue-resource": "^1.3.5"版本号来源于GitHubb.执行npm intsallc.重启项目 npm run dev2.方法二:直接执行npm install --save vue-resource然后重新启动项目参考:https://github.com/pagekit/vue原创 2018-01-15 17:30:14 · 701 阅读 · 0 评论 -
vue常用指令v-model和v-for
1.v-model 一般用于表单input的双向数据绑定可以用 v-model 指令在表单 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将原创 2018-01-16 23:31:10 · 3868 阅读 · 0 评论 -
v-show
1.根据表达式之真假值,切换元素的 display CSS 属性。eg 点击按钮我就消失 export default { name: 'HelloWorld', data () { return { hide : true } }, methods:{ greet: function () { thi原创 2018-01-18 22:02:03 · 7507 阅读 · 0 评论 -
vue中Class 与 Style 绑定
1.:class1.1.常规用法 :class="color"这里的color是数据里面的一个数据 数组用法 export default { name: 'HelloWorld', data () { return { color: 'red' } } } .red{ c原创 2018-02-04 18:23:41 · 1465 阅读 · 0 评论 -
vue常用事件之v-on:click 以及事件对象,事件冒泡,事件默认行为
其实v-on后面跟的不止是click事件也可以是其他的事件,用法均相似。比如:v-on:click/mouseout/mouseover/mousedown.......以下click为例注意:所有的v-on都可以简写为@,比如说v-click可以简写为@click1.监听事件可以用v-on指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。通常来讲就是原创 2018-01-18 23:05:42 · 153494 阅读 · 5 评论 -
vue按键修饰符(按键触发的时间)eg.右键、左键、上键.......
按键修饰符就是在监听键盘事件时,我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符1.如何获取键盘的键码 @keydown="show($event)" export default { name: 'HelloWorld', data () { return { items: 1 }原创 2018-01-20 15:00:24 · 3316 阅读 · 0 评论 -
脚手架工具vue-cli
一、什么 是脚手架工具vue-cli?类似于工人手里面的脚手架一样,帮助工人搭架子用,同样的vue脚手架工具也是帮助我们更好更快速的开发代码的工具二、vue-cli能做什么?三、vue-cli安装前提条件: Node.js (>=4.x, 6.x preferred), npm version 3(必须安装Node.js)npm install -g原创 2017-12-15 19:32:31 · 1505 阅读 · 0 评论