Vue
做一个有知识的流氓
平时读书少,人丑又胆小。
人懒惰久了,稍微努力一点点,就以为这就是拼命了。
展开
-
Vue新手实践,Vue+bootstrap写一个简单的Tab导航组件
用到的语法:1、v-bind:class2、v-for:3、@click实现出来就是这个效果,非常简单,对于新手来说再合适不过了通过vue-cli创建的项目,bootstrap的包我是直接link在index.html里用:class绑定样式来控制active状态,相比于jquery的简单粗暴会有所不同话不多说直接上代码<template> <footer> &...原创 2018-04-27 09:06:19 · 4668 阅读 · 0 评论 -
vue项目打包为APP,静态资源正常显示,但API请求不到数据
Vue项目通过Hbuild打包为APP后,静态文件正常显示,但并没有像开发时那样请求到数据。这是为什么?因为APP并没有跨域,不存在跨域一说。我们在开发的时候,js在不同的域之间进行数据传输或通信,所以会给项目设置代理来跨域config下的index.js比如这个proxyTable: { '/api':{ target: 'http://XXX/xxx/v3', ...原创 2018-08-29 23:55:05 · 6690 阅读 · 5 评论 -
Vue+Mock.js搭建前端独立开发环境
安装Mock npm i mockjs -s 创建Mock文件 在main.js同级目录下创建一个Mock.js(可以任意起名)用来存放我们的数据欺骗代码Mock.jsconst Mock = require('mockjs')Mock.mock('/register', function (options) { console.log(options) return...原创 2018-08-29 23:53:45 · 762 阅读 · 0 评论 -
vue项目打包为APP,静态资源正常显示,但API请求不到数据
Vue项目通过Hbuild打包为APP后,静态文件正常显示,但并没有请求到数据的接口。这是为什么?在打包前在浏览器测试时是能正常显示数据的,而APP中静态文件、布局样式显示正常,所以我把问题定位到了接口通信上。APP并没有跨域,不存在跨域一说。我在开发的时候,给项目设置代理来跨域config下的index.js比如这个proxyTable: { '/api':{ ta...原创 2018-08-17 20:30:22 · 9059 阅读 · 7 评论 -
eslint --fix 'eslint' 不是内部或外部命令
eslint --fix 'eslint' 不是内部或外部命令报错场景:有一个以前写的文件之前没用eslint,现在放vue-cli创建的项目里面一片红,然后就想用eslint --fix,但在命令行里报错解决办法: 其实这个不算什么解决办法,曲线救国?,我用的是webstrom编辑器,用vue-cli创建的项目已经配置好了eslint,所以在编辑器里右键菜单,会看到下图,下面那个选项,其实就是执...原创 2018-06-01 11:37:56 · 13848 阅读 · 0 评论 -
node.js+express配置vue项目服务器
vue项目打包后如果放在express的服务器里运行?app.jsvar express = require('express');var fs = require('fs');var path = require('path');var bodyParser = require('body-parser');var app = express();app.use(bodyParser....转载 2018-06-14 18:20:10 · 3521 阅读 · 0 评论 -
IE不支持ES6的问题(并非解决办法,纯吐槽)
先声明:我这个不是解决办法,只是一个小吐槽当初写项目的时候不知道,没了解过IE不支持ES6,而后在网上找了一些IE兼容ES6语法的方法一一试了一下,结果还是报错网上有人说无法完美兼容,这个时候就很伤心了,难道要把项目里的ES6全部换掉?不,不存在的.jpg 如果是在公司里,那当然是老老实实换了,不过换个角度来说,已经工作的人不会犯这种错误吧,或者他们会有完美的解决方法??反正我...原创 2018-06-14 17:33:20 · 16081 阅读 · 7 评论 -
vue+axios新手实践实现登陆
其实像这类的文章网上已经有很多很好的,写这篇文章,相当于是做个笔记,以防以后忘记用到的:1、 vuex 2、axios 3、vue-route登陆流程为:1、提交登陆表单,拿到后台返回的数据2、将数据存入vuexvuex配置这里直接跳过安装之类的,百度一大堆,我直接上代码// store index.jsimport Vue from 'vue'import Vuex from 'vuex'...原创 2018-06-20 20:49:34 · 6531 阅读 · 3 评论 -
Vue 新手小项目 vue-translate-peoject 在线翻译功能
开始这是一适合新手练习的小项目,一个在线翻译的demo。在正式开始前,先啰嗦一下,是一位网友给我的建议,就是不要强行组件化的问题 开始做Vue时我们可能会喜欢拆很多组件出来 但记住组件是为了复用(常见如公共菜单按钮栏等) 如非能够复用的情况其实并不用真的拆出组件来 。当然,这个项目里因为是练手,所以强行组件化来涉及更多的vue用法。目录结构src下新建了两个文件:TranslateForm.vue...原创 2018-06-20 20:48:50 · 1484 阅读 · 0 评论 -
element-ui Form用@submit方法提交失败
element-ui里Form组件用@submit方法提交失败错误代码:<el-form @submit="newsubmit"> <el-form-item size="large"> <el-button type="primary" native-type="submit" >立即创建</el-butto原创 2018-06-06 09:42:40 · 15194 阅读 · 0 评论 -
vue-cli开发环境实现跨域请求
前端开发时,请求后台接口经常需要跨域,vue-cli实现跨域请求只需要打开config/index.js,修改如下内容即可。//例如要请求的接口url为http://172.3.2.1:8000/look/1module.exports = { dev:{ proxyTable:{ '/api':{ target:...转载 2018-05-26 18:20:49 · 539 阅读 · 1 评论 -
Vue 报错TypeError: this.$set is not a function 的解决方法
报错场景:将APi中得到的response数据,用Vue$set()使数据动态响应报错代码: methods: { textTranslate: function (text, to) { $.ajax({ url: 'http://openapi.youdao.com/api', type: 'post', dataTyp...原创 2018-05-12 13:31:35 · 87706 阅读 · 2 评论 -
Vue中mintui的field实现blur和focus事件
<mt-field label="卡号" v-model="card.cardNo" @blur.native.capture="checkCard"></mt-field> 使用@blur.native.capture="",@focus.native.capture=""即可实现。 -------------------转载 2018-09-28 22:38:57 · 5359 阅读 · 0 评论