Vue - 随笔分类 - 哓番茄

vue打包静态资源后显示空白及static文件路径报错

摘要：1、打包之后打开dist的页面显示空白：这个是打包项目比较常见的一个错误改一下config下面的index.js中bulid模块导出的路径。因为打包后的index.html里边的内容都是通过script标签引入的，默认显示的路径不对，打开肯定是空白的。 2.src里边router/index.j 阅读全文

posted @ 2019-01-23 17:14 哓番茄阅读(1740) 评论(0) 推荐(0)

VUE之使用百度地图API

摘要：利用vue创建点餐系统，在点餐系统中需要知道商家地址信息，这时就需要借用百度地图API。步骤一：申请百度地图密钥；步骤二：在index.html中添加百度地图JavaScript API接口；步骤三：在webpack.base.conf.js配置文件中配置BMap，在module.export 阅读全文

posted @ 2018-10-09 17:43 哓番茄阅读(322) 评论(0) 推荐(0)

vue-cli webpack打包后加载资源的路径问题

摘要：vue项目，访问打包后的项目，输入路径后，页面加载空白。这时会有两类问题，都是路径问题。 1.一个是css,js,ico等文件加载不到，是目录里少了dist 打开页面时一片空白解决办法： config/index.js文件的build->assetsPublicPath的默认值改为 './' as 阅读全文

posted @ 2018-09-13 10:55 哓番茄阅读(404) 评论(0) 推荐(0)

vue+element-ui动态生成多级表头，并且将有相同字段下不同子元素合并为同一个

摘要：element表头要多层生成，下一级表头数据源必须是当前表头的子一级，这样一层一层嵌套可以生成多层表头：要把数据处理成这种类型的数据在vue的页面上对于循环的处理也是要多层循环：  对于用别人的ui框架，最好就是改下数据源，阅读全文

posted @ 2018-09-07 13:49 哓番茄阅读(3530) 评论(0) 推荐(0)

vue A对象赋值给B对象，修改B属性会影响到A问题

摘要：实际在vue中 this.A = this.B,没有进行深层赋值，只是把this.A的地址指向了与this.B相同的地址，所有对于A的修改会影响到B。解决相互影响的思路是在this.A必须是新建的一个对象，这样才能保证不被指向同一地址，属性修改不会相互影响。解决方式: 将对象转成字符串剔除对象属阅读全文

posted @ 2018-09-07 13:37 哓番茄阅读(307) 评论(0) 推荐(0)

vue+element-ui 实现table单元格点击编辑，并且按上下左右键单元格之间切换

摘要：通过我的测试我发现两个两种方法来编辑单元格的内容第一种点击编辑：我是给td里添加一个input，将值赋值给input，当失去焦点的时候将input的值付给td原来的内容，然后将input删除，代码如下： let oldel = cell.children[0] 第二种方法：通过content 阅读全文

posted @ 2018-08-30 11:24 哓番茄阅读(4696) 评论(0) 推荐(0)

vue-cli开发-搭建项目(一)

摘要：前言 vue-cli是Vue官方提供的命令行工具，可用于快速搭建大型单页应用。集成了webpack环境及主要依赖，对于项目的搭建、打包、维护管理等都非常方便快捷。建议先熟悉 Vue 本身之后再研究 CLI。使用之前需要对 Node.js 和相关构建工具有一定程度的了解。安装先决条件：Node.j 阅读全文

posted @ 2018-08-28 10:20 哓番茄阅读(386) 评论(0) 推荐(0)

VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址

摘要：VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址前言我们在开发项目的时候，往往会在同一个局域网进行开发，前后端分离同时进行开发。我们前端调用后端给的接口也是在局域网内部的。但是，当项目推到线上的时候，我们会从真实服务器上获取接口，因此，我们可能在测试接口和真实接口之间频繁切换阅读全文

posted @ 2018-08-01 13:48 哓番茄阅读(243) 评论(0) 推荐(0)

vue2.0 引入font-awesome

摘要：网上的大部分教程复杂而且难看懂，其实两步就能搞定。先cnpm install font-awesome --save引入依赖然后在main.js引入 font-awesome/css/font-awesome.min.css 即可。阅读全文

posted @ 2018-07-31 10:50 哓番茄阅读(173) 评论(0) 推荐(0)

vue-cli 脚手架项目简介（一） - package.json

摘要：vue-cli是用来生成 vue项目的命令行工具，它的使用方法是这样的： vue init <template-name> <project-name>第二个参数 template-name 就是我们打算使用的模板，目前，模板是通过github上vue-templates这个组织进行发布。我们通常使阅读全文

posted @ 2018-07-31 10:39 哓番茄阅读(205) 评论(0) 推荐(0)

Vue代码分割懒加载的实现方法

摘要：什么是懒加载懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。为什么需要懒加载在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页阅读全文

posted @ 2018-05-31 10:27 哓番茄阅读(423) 评论(0) 推荐(0)

使用Vue自定义指令实现Select组件

摘要：完成的效果图如下：一、首先，我们简单布局一下：效果是这样：下面可供选择的options用的是绝对定位；同时input设置了readonly，使input变的不可输入，整体布局很简单。二、开始添加功能接下来，我们要添加两个功能：点击上面的input框，可以切换显示下面的options 选择阅读全文

posted @ 2018-05-30 16:11 哓番茄阅读(712) 评论(0) 推荐(0)

vue中页面跳转拦截器的实现方法

摘要：首先对index.js的router进行配置; 定义完路由后，我们主要是利用vue-router提供的钩子函数beforeEach()对路由进行判断。阅读全文

posted @ 2018-05-28 17:52 哓番茄阅读(405) 评论(0) 推荐(0)

Vue.directive()的用法和实例

摘要：官网实例： https://cn.vuejs.org/v2/api/#Vue-directive https://cn.vuejs.org/v2/guide/custom-directive.html 指令定义函数提供了几个钩子函数（可选）： bind: 只调用一次，指令第一次绑定到元素时调用，用这阅读全文

posted @ 2018-05-23 17:00 哓番茄阅读(280) 评论(0) 推荐(0)

Vue全局API总结

摘要：1.extend用于创建一个子类Vue,用$mount来挂载 2.Vue.nextTick([callback,context])在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。结果如下：我们可以看到视图更新以后拿到的并不是更新后的innerH 阅读全文

posted @ 2018-05-23 11:36 哓番茄阅读(458) 评论(0) 推荐(0)

vue 实战问题－watch 数组或者对象

摘要：1、普通的watch 2、数组的watch 3、对象的watch 4、对象具体属性的watch［活用computed］阅读全文

posted @ 2018-05-22 16:57 哓番茄阅读(212) 评论(0) 推荐(0)

Vue.js学习笔记（二） - 常用模板语法

摘要：一、文本渲染 Vue支持动态渲染文本，即在修改属性的同时，实时渲染文本内容。同时为了提高渲染效率，也支持只渲染一次，即第一次渲染出文本后，文本内容不再跟随属性值的变化而变化。实时渲染 v-model 指令将 input 标签的值动态绑定到属性 msg 上，通过 {{ msg }} 表达式显示在页面阅读全文

posted @ 2018-05-22 15:02 哓番茄阅读(225) 评论(0) 推荐(0)

Vue.js学习笔记（三） - 修饰符

摘要：一、v-model的修饰符 v-model 是用于在表单表单元素上创建双向数据绑定的指令。在 <input> 和 <textarea> 上，默认通过监听元素的 input 事件来更新绑定的属性值。为了能明显的看到绑定属性值的变化，需要在Chrome浏览器中安装Vue Devtools扩展程序。当查阅读全文

posted @ 2018-05-22 13:57 哓番茄阅读(184) 评论(0) 推荐(0)

正确理解使用Vue里的nextTick方法

摘要：最近，在项目中要使用Swiper做一个移动端轮播插件。需要先异步动态加载数据后，然后使用v-for渲染节点，再执行插件的滑动轮播行为。解决这个问题，我们通过在组件中使用vm.$nextTick来解决这一需求。一、vm.$nextTick( [callback] ) 二、Vue.nextTick( 阅读全文

posted @ 2018-05-21 16:22 哓番茄阅读(1004) 评论(0) 推荐(0)

在vue项目中，将juery设置为全局变量

摘要：1.首先执行：npm install jQuery --save-dev,在package.json里加入jQuery。 2.修改build下的webpack.base.conf.js 方法一：首先加入：然后在module.exports 对象中加入：方法二：先加入：然后：最后： 3.在阅读全文

posted @ 2018-05-17 15:06 哓番茄阅读(390) 评论(0) 推荐(0)

导航

随笔分类 - Vue