vue技巧以及问题总结
关注
分享
扫一扫
vue技巧以及问题总结
moguPeople
一个切图仔~
展开
-
vue-cli项目打包出现空白页和路径错误问题
vue-cli项目打包： 1. 命令行输入：npm run build 2. 打包出来后项目中就会多了一个文件夹dist，这就是我们打包过后的项目。 第一个问题，文件引用路径。我们直接运行打包后的文件夹中的index.html文件，会看到网页一片空白，f12调试，全是css，js路径引用错误的问题。解决：到config文件夹中打开index.js文件。 assetsPublic...转载 2018-07-26 14:33:24 · 266 阅读 · 0 评论 -
npm ERR! Unexpected token in JSON at position 1 while parsing near
执行npm 任何命令报错npm ERR! Unexpected token < in JSON at position 1 while parsing near 'npm ERR! <!doctype html>npm ERR! <htm...'npm ERR! A complete log of this run can be found in:报错如下图：...转载 2020-01-17 16:30:51 · 6820 阅读 · 3 评论 -
element-ui table行合并--支持多个行 开箱即用
项目中使用table组件的时候，存在合并列或者合并行看element-ui table组件的文档由于数据是动态获取，所以存在合并不方便的场景所以换个思路来实现合并具体代码： <el-table :data="tableData" :span-method="arraySpanMethod" border sty...原创 2019-06-21 09:35:29 · 7488 阅读 · 11 评论 -
vue开发 cross-env跨平台设置环境变量
vue开发 cross-env跨平台设置环境变量vue开发过程成中使用环境变量 以便在不同的环境里面查看不同的数据。cross-env可以很方便帮我们解决关于介绍 cross-env首先安装 cross-envnpm install cross-env --save-dev使用在package.json 里面配置环境变量名称// config/proxyDev.js 代理地址一...原创 2019-04-22 16:14:35 · 1873 阅读 · 0 评论 -
vue rander函数 on事件触发失败
在编写组件时 使用rander函数编写组件 发现事件没有被触发后来发现写的方式不对错误的使用// jsrender(h){ return h( 'div', { 'class': { foo: true, bar: false }, style: { // color: 'red', font...原创 2019-04-18 19:37:03 · 1663 阅读 · 0 评论 -
vue-cli2.0 vw实现移动端适配
参考地址: 如何在Vue项目中使用vw实现移动端适配.升级版3.0 ：使用vue-cli3.0使用vw/rem实现移动端适配.使用vue-cli2.0构建项目适配移动端项目环境：win10node v8.9.3npm 5.5.1使用vue-cli命令构建项目vue init webpack myapp...转载 2019-03-14 22:57:51 · 1016 阅读 · 0 评论 -
vue3.x 报错： Duplicate keys detected: xx. This may cause an update error.
VUE for循环报错： // template &lt;ul&gt; &lt;li v-for="(item) in oli" :key="item.id+Math.random()"&gt;{{ item.value }}&lt;/li&gt; &lt;/ul&gt; //原创 2019-03-05 16:12:55 · 1045 阅读 · 0 评论 -
vue2.0 组件复用 数据没有更新
如果开发过程中出现使用v-if-else来切换组件时发现数据没有更新，那么就是因为元素被复用具体可以参考 https://cn.vuejs.org/v2/guide/conditional.html#用-key-管理可复用的元素<template v-if="loginType === 'username'"> <input placeholder="Enter your ...原创 2019-01-28 10:30:04 · 1675 阅读 · 0 评论 -
vue2.0 render()渲染函数及jsx
render()函数通过虚拟DOM 来渲染页面因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点，及其子节点。我们把这样的节点描述为“虚拟节点 (Virtual Node)”，也常简写它为“VNode”。“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。–来源：https://cn.vuejs.org/v2/guide/render-function....原创 2019-01-25 17:57:27 · 1309 阅读 · 0 评论 -
vue组件watch
就是一篇记录 关于vue 的watch使用记录：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>watch</title> <style type="text原创 2018-09-19 15:08:47 · 443 阅读 · 0 评论 -
vue组件多选并展示选中顺序；
在公司某些开发场景中需要多选并显示优先级 现记录一下； 基本思路： 根据Vue.js 的数据绑定，当事件发生时会触发数据的变化来更新数据；&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8" /&a原创 2018-09-13 19:17:45 · 3665 阅读 · 2 评论 -
vue2.0+ 作用域插槽
作用域插槽个人理解为 数据来源是子组件 但是html模板是父组件提供 其中子组件中插槽slot 绑定的名称 就是父组件模板数据的来源具体例子如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Docu原创 2018-08-16 14:44:54 · 401 阅读 · 0 评论 -
vue2.0 使用过渡效果
在组件中使用过渡效果是在需要过渡的组件上面包裹一层transition标签 而这个标签是会有一个name 属性值是和过渡的css类名相关联的，如果不写的话，则默认是v- ，具体例子如下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset=&quo原创 2018-08-13 16:59:43 · 283 阅读 · 0 评论 -
vue2.0+ 使用keep-alive 以及is属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ list-sty原创 2018-08-13 15:35:07 · 1018 阅读 · 0 评论 -
vue2.0+ 使用v-model 及报错解决办法；
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title></head><body> <原创 2018-08-12 22:00:01 · 8333 阅读 · 0 评论