Vue.js
文章平均质量分 66
ShiYadong_
E-Mail:ityadong@163.com
展开
-
vue-cli3升级到vue-cli4,同时将vue2.6升级到vue2.7
对于项目太大,升级有难度,又想体验compositionAPI的可以先过渡到vue2.7原创 2022-09-13 20:59:03 · 1227 阅读 · 1 评论 -
select动态绑定vue.js
动态选项,用 v-for 渲染:<select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option></select><span&a转载 2018-07-20 09:49:22 · 2647 阅读 · 0 评论 -
vue中怎样实现 路由拦截器(当用户没有登录的时候,跳转到登录页面,已经登录的时候,不能跳转到登录页,除非后台token失效)
现在 我们需要实现这样 一个功能,登录拦截其实就是 路由拦截,首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录。如果用户已经登录,则顺利进入路由, 否则就进入登录页面。在路由管理页面添加meta字段router/index.js文件,例如,在用户直接跳转/manage 路径下的时候,实现路由拦截 { path:...原创 2018-06-28 11:26:16 · 18657 阅读 · 3 评论 -
vue 基础 filter 过滤器使用
vue 对数据提供一个 filter 的处理器,虽然命名为 filter ,但是我觉得叫做数据处理器更体贴。用以在不改变的data 的情况下 输出前段需要的格式数据。基本调用方法:{{ message | filterFun }}new Vue({ // ... filters: { filterFun: function (value) { return v...转载 2018-07-09 17:08:04 · 734 阅读 · 0 评论 -
vue-awesome-swiper 的使用
在Vue项目中如何实现轮播图的效果呢,在传统项目中第一个想到的一般都是swiper插件,代码简单好用。一开始我也是直接npm安装swiper然后照着之前的传统写法写,然而却没有效果,只会显示图片但没有轮播效果。上网查了很多资料也参考其他同行的做法,跟着改但是还是没效果。后来发现vue是有一个专门的轮播插件:vue-awesome-swiper,下面介绍如何用这个插件实现轮播效果:1.安装 vue...翻译 2018-07-02 11:12:38 · 2164 阅读 · 0 评论 -
Vue打包之后会出现map文件,体积很大
build命令后占体积最大的竟然是.map文件,webpack如何设置不让编译出.map文件呢?解决办法:去config/index.js中改一个参数: productionSourceMap:false 把这个改为false。不然在最终打包的文件中会出现一些map文件map文件的作用:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。 有了map就可...原创 2018-06-27 09:16:04 · 5006 阅读 · 0 评论 -
在vue项目中使用echarts
安装echarts依赖npm install echarts -S1或者使用国内的淘宝镜像:安装npm install -g cnpm --registry=https://registry.npm.taobao.org1使用cnpm install echarts -S1创建图表全局引入main.js// 引入echartsimport echarts from 'echarts'Vue....转载 2018-06-19 16:24:39 · 1043 阅读 · 0 评论 -
babel-plugin-import 插件 的使用
babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式以Vant 为例:# 安装 babel-plugin-import 插件npm i babel-plugin-import -D// 在 .babelrc 或 babel-loader 中添加插件配置// 注意:webpack 1 无需设置 libra...原创 2018-06-30 15:19:01 · 41200 阅读 · 3 评论 -
全局安装 Vue cli3 和 继续使用 Vue-cli2.x
官方链接:https://cli.vuejs.org/zh/guide/installation.html1.安装Vue cli3 关于旧版本Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove ...原创 2018-08-15 14:16:42 · 17027 阅读 · 0 评论 -
关于 Vue cli 3的配置 vue.config.js 和使用
vue.config.js 的配置 官方文档:https://cli.vuejs.org/zh/config/#vue-config-js 最近安装了下vue cli3版本,查看链接。 和vue cli2 相比文件目录少了很多配置,没有了build和config目录,那么像vue cli2 之前的关于端口号的配置,打包之后路径的配置,图片的配置 等等,应该去哪里配置呢,vue cli...原创 2018-08-16 16:01:57 · 53104 阅读 · 5 评论 -
vue 路由传参 params 与 query
初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query。然后,错误就这么来了: router文件下index.js里面,是这么定义路由的:{ path:"/detail", name:"detail", component:home }我想用params来传参,是这么写的,嗯~t...转载 2018-08-30 17:17:22 · 518 阅读 · 6 评论 -
Vue 之vue-router router.beforeEach导航守卫,陷入死循环
官方文档 :https://router.vuejs.org/zh/guide/advanced/navigation-guards.html判断浏览器缓存是否有用户的信息,没有的话跳转登录页。看了官方文档,直接这样写了。(试了手动清除缓存,再从url里面跳登录页,直接陷入了死循环)router.beforeEach((to,from,next)=>{ if(sessionS...原创 2019-01-09 14:49:39 · 6667 阅读 · 5 评论 -
Vue 弹出层时 禁止页面滑动
上代码 /***滑动限制***/ stop(){ var mo=function(e){e.preventDefault();}; document.body.style.overflow='hidden'; document.addEventListener("touchmove",mo,false);//禁止页面滑动 ...转载 2018-12-20 16:17:23 · 1844 阅读 · 2 评论 -
vue中父组件调用子组件的方法
我们都知道通过$ref可以获取到某个DOM,但是它也可以用来获取子组件的实例,调用子组件的方法例: 子组件:<template> <div></div></template><script> export default { methods:{ childMethod(flag) { ...转载 2018-11-28 14:17:48 · 1478 阅读 · 0 评论 -
安卓原生嵌套网页,调用vue里面的函数,进行交互
刚好遇到这个问题,便转发了这篇博客:https://blog.csdn.net/jhl122/article/details/79151303 之前写过一个博客是安卓原生与JS交互的博客:http://blog.csdn.net/jhl122/article/details/53406623。那是正常情况下的交互,但是如果前段人员使用vue开发就会产生一个问题:安卓原生调用js中的方法报“...转载 2018-11-21 14:43:56 · 3437 阅读 · 0 评论 -
vue中使用keep-alive (缓存效果,返回不刷新)
1.keep-alive的作用以及好处在做电商有关的项目中,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页,这时候我们使用keep-alive来缓存组件,防止二次渲染,这样会大大的节省性能。2.keep-alive的基本用法在app.vue中<!-- 缓存所有的页面 --><keep-alive&g...转载 2018-09-06 14:42:35 · 4677 阅读 · 1 评论 -
Vue 实现 路由过渡动画效果
演示效果iOS滑动效果,可以切换到ios分支获取代码github地址:https://github.com/zhengguorong/pageAinimate原创 2018-09-05 16:42:36 · 1553 阅读 · 0 评论 -
vue中当图片地址无效的时候,显示默认图片,和图片加载完毕执行的回调
web项目中经常需要展示图片,很可能就会碰到图片地址无效的情况,比如图片地址不对,或者后台拿到图片地址后,该地址无效,或者数据库中没有该图片等情况。这时候,图片就会显示一个叉。 对于项目中出现的这种情况,我们也可以不做处理,但是比较影响美观,所以我们都会使用一个默认的图片来代替图片原来的地址。<img :src="item.img" @error="imgError(item)" @...转载 2018-08-28 16:45:01 · 1792 阅读 · 0 评论 -
Vue 中 $refs 的使用
说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素) 使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取 注意:如果获取的是一个子组件,那么通过ref就能获取到子组件中的data和methods1.添加ref属性<div id="app"> <h1 ref="h1Ele">这是H...转载 2018-08-21 11:45:54 · 3116 阅读 · 0 评论 -
vue2.0 点击跳转传参--vue路由跳转传参
vue中路由跳转传参数有多种,自己常用的是下面的几种通过router-link进行跳转通过编程导航进行路由跳转1. router-link<router-link :to="{ path: 'yourPath', params: { name: 'name', dataObj: data ...转载 2018-06-22 14:57:59 · 2194 阅读 · 0 评论 -
(vue.js)前后端分离的单页应用如何来判断当前用户的登录状态?
问题: (vue.js)前后端分离的单页应用如何来判断当前用户的登录状态?描述:有个单页应用的url例如http://cctv.com/!#/car/list,只有在登录的情况下,我才可以去访问这个url,如果不是登录状态,则要跳到登录页面。以前的话,请求url到后台,后台会判断下当前用户是否登录,但是现在做成单页应用了,也不需要请求到后台了,那么在单页应用的情况下如何来处理用户是否已经登录了的状...转载 2018-06-20 23:05:55 · 16101 阅读 · 0 评论 -
npm install --save 与 npm install --save-dev 的区别
以npm安装msbuild为例:npm install msbuild:会把msbuild包安装到node_modules目录中不会修改package.json之后运行npm install命令时,不会自动安装msbuildnpm install --save:会把msbuild包安装到node_modules目录中会在package.json的dependencies属性下添加msbuild之后...原创 2018-01-30 20:39:14 · 1664 阅读 · 0 评论 -
在vue路由变化的时候,改变页面的title
由于用Vue框架开发的应用是SPA(单页面应用),采用的是路由的形式,没有所谓的页面,所以想让网页的标题随着路由的改变而改变,可以使用document.title = ×××来改变网页标题。基本环境配置: webpack + vue2.0 + vue-router +nodeJS进入 router 文件夹底下的index.js文件首先引入:import Vue from 'vue'import ...转载 2018-02-27 10:49:22 · 5959 阅读 · 1 评论 -
关于Vue 设置定时器后不能向组件传值的问题
刚开始学Vue ,在组件中设置定时器倒计时的时候,不知道怎么在定时器中去操作data中的值在网上找到了解决方法。就是改变this的指向 components:{ "test":{ template:"#tem", data:function () {原创 2018-01-25 14:03:25 · 1394 阅读 · 1 评论 -
Vue路由 重定向和 别名的区别
重定向重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b:const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ]})重定向的目标也可以是一个命名的路由:const router = new VueRouter({ routes: [原创 2018-02-01 13:46:47 · 5008 阅读 · 0 评论 -
vue脚手架使用swiper /引入js文件/引入css文件
转自:https://www.cnblogs.com/wangzhichao/p/7652749.html这里是在vue组件中单独使用1.安装vue-cli参考地址:https://github.com/vuejs/vue-cli如果不使用严格语法需要在后三项打no;(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮助的)2.swiper下载示例转载 2018-02-01 09:55:07 · 14824 阅读 · 1 评论 -
Vue-cli 将px转化为rem,适配移动端(vue-cli2.x 和 vue-cli3中的使用)
一. Vue-cli2.x中的用法1.下载lib-flexible我使用的是vue-cli+webpack,所以是通过npm来安装的npm i lib-flexible --save2.引入lib-flexible在main.js中引入lib-flexibleimport 'lib-flexible/flexible'3.设置meta标签通过meta标签,设置设...转载 2018-01-31 13:03:30 · 11646 阅读 · 2 评论 -
vue.js指令v-for使用以及下标索引的获取
在 v-for 代码块中,我们可以完全地访问父级作用域下的属性。v-for 还支持可选的第二个参数,作为当前项的索引。也可以使用 v-for 来遍历对象的属性。 {{item.name}} new Vue({ el:"#box", data:{ dataList:[原创 2017-10-26 21:19:53 · 20242 阅读 · 0 评论 -
vuejs中,如何使一个自定义函数在vue渲染完之后再自动执行
在vue中定义一个函数,但是必须在vue中的data,和整个vue页面渲染完之后再去执行该函数,如果vue没有渲染完毕,就会报错,说我没有定义,找不到undefined;原创 2017-10-24 14:57:34 · 18200 阅读 · 0 评论 -
Vux在vue-cli中的搭建和配置
一、vue安装(node.js)1、安装node.js https://nodejs.org/en/下载安装2、安装淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org检查方式 cnpm -V 出现版本号3、安装webpacknpm install webpack -g检查方式 webpack -V4、安装脚手架n...原创 2018-03-13 11:03:04 · 1110 阅读 · 0 评论 -
关于webpack打包vue项目后的页面body为空的问题
build之后,终端里会有个提示: Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work.npm run dev是开发环境, npm run build是生产环境, 在开发环境完成代码和测试, 之后用生产环境生成代码,npm run bui...原创 2018-03-19 21:55:05 · 3018 阅读 · 0 评论 -
vue项目中如何实现国际化
转自:https://blog.csdn.net/DOCALLEN/article/details/78408137?locationNum=2&fps=1一、前言 趁着10月的最后一天,来写一篇关于前端国际化的实践型博客。国际化应该都不陌生,就是一个网站、应用可以实现语言的切换。 在这就不谈原理,只说说如何实现中英文的切换。做技术的总得先把 demo 做出来嘛。二、demo 场景需求...转载 2018-03-31 11:27:22 · 2118 阅读 · 0 评论 -
处理 Vue 单页面应用 SEO 的另一种思路
转自:https://www.cnblogs.com/tiedaweishao/p/7493971.htmlvue-meta-info 官方地址: monkeyWangs/vue-meta-info(设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plugin形成更优的配合)单页面应用在前端正大放光彩。三大框架 Angular、Vue、React...转载 2018-04-20 10:51:32 · 2416 阅读 · 0 评论 -
vue-cli 设置网页左上角icon图标
把.ico文件放在根目录下的static文件夹下,然后link标签引入 <link rel="shortcut icon" href="./static/favicon.ico">原创 2018-04-19 21:36:29 · 9872 阅读 · 0 评论 -
vue中怎么获取radio的选中值 、选中状态?
方法1:设置v-model<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <script src="https://cdn.bootcss.com/vue/2转载 2018-04-19 10:10:44 · 63115 阅读 · 3 评论 -
Vue 2.0 组件间的通讯
一.父组件向子组件传值1.创建子组件,在src/components/文件夹下新建一个Child.vue2.Child.vue的中创建props,然后创建一个名为message的属性父组件数据如何传递给子组件呢?可以通过props属性来实现父组件://这里必须要用 - 代替驼峰data(){ return { msg: [1,2,3] }; }子组件通过props来接收...转载 2018-04-05 15:04:45 · 362 阅读 · 0 评论 -
Vue 将后台传过来的 带html字段的字符串 转换为 HTML
后台传过来 一个带标签的字符串 前端可以直接转换成html格式的,可是在vue中怎么办呢在这个DEMO中,item.content所带的字符串将被转换为HTML代码。注意:使用了v-html的标签中的内容将被item.content替代: <div class="item" v-for="item in socialArray"> <dl v-html...原创 2018-03-29 10:02:25 · 30077 阅读 · 5 评论 -
vue-axios 配置整合使用
转载自:https://blog.csdn.net/hant1991/article/details/74931158cnpm install axios1.axios配置 我的目录结构src/axios/index.js,axios配置都在该文件下src/axios/index.js 如下:import axios from 'axios'import qs from 'qs'// axios...转载 2018-03-27 13:13:50 · 4263 阅读 · 0 评论 -
解决IE报vuex requires a Promise polyfill in this browser
出现的原因,就是ie9和一些低版本的高级浏览器对es6新语法并不支持解决方法第一步: 安装 babel-polyfill 。 babel-polyfill可以模拟ES6使用的环境,可以使用ES6的所有新方法npm install --save babel-polyfill第二步:在webpack.config.js文件中,使用将module.exports = { entry: { ...原创 2018-04-02 15:11:11 · 639 阅读 · 0 评论 -
使用 vue-cli 打包之后 遇到的坑
修改打包路径 1. 在config文件夹下的index.js文件中的assetsPublicPath路径修改为当前路径:build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.re...原创 2018-03-26 11:07:45 · 2609 阅读 · 0 评论