![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
修炼中的小精灵
这个作者很懒,什么都没留下…
展开
-
关于vue路由的配置(包括二级导航路由、路由复用)
1、安装路由:(1)、cnpm install vue-router(2)、main.js中配置路由import VueRouter from 'vue-router' //引入路由import Routers from './router'Vue.use(VueRouter) //使用路由const router = new VueRout...原创 2019-03-10 16:29:29 · 582 阅读 · 0 评论 -
vue模拟登陆功能,vuex登陆后显示用户信息
vue模拟后台登陆功能<template><div class="login"><form class="container" @submit.prevent="login"><div class="form-group"><label for="exampleInputEmail1">Email</labe...原创 2019-03-24 10:11:13 · 9767 阅读 · 2 评论 -
vue中实现回到顶部功能
下面直接看代码:(不清楚的看对应注释) 效果可以参看 http://jm.sangeayi.cn/ (兼容手机和电脑)代码参考网址:https://blog.csdn.net/qq_36070288/article/details/84765139HTML:<!-- 回顶部按钮为一张50*50的图片 --><!-- btnFlag 控制图片显示隐藏 -->...原创 2019-04-04 17:58:52 · 689 阅读 · 0 评论 -
vue地址栏直接输入路由无效问题(回车也无效)
1、参考网址:https://www.jianshu.com/p/06b004c6772fvue 项目只要不是静态页面,一般都会和官方的路由管理器 vue-router 一起使用。最近项目有一个需求,是在地址栏输入路由,跳转到对应路由组件,在开发环境中这样做是可以跳转的,但是项目打包后,路由可以访问,但是回车会有404页面的报错因为 vue 在页面上显示哪个组件是根据 vue-rout...原创 2019-04-10 18:50:19 · 3944 阅读 · 0 评论 -
vue中实现sort()排序功能
1、请求数据axios.get(this.baseURL + '/api/graphql?', {params: {query: ` { domain {alias{alias} displayText image { paths } contentItemId } }...原创 2019-03-28 09:34:49 · 18037 阅读 · 0 评论 -
解决vue本地环境跨域请求正常,版本打包后跨域代理不起作用,请求不到数据的方法
问题:在本地使用了proxyTable代理可以正常跨域请求后台数据,打包上传后就无法获得后台的json文件。查看了相关资料可以用nginx进行解决。还可以使用命名环境变量,请求的时候进行判断,话不多说上干货1、dev.env.js进行配置module.exports = merge(prodEnv, {NODE_ENV: '"development"'API_HOST:"//lo...原创 2019-03-28 10:00:13 · 22448 阅读 · 6 评论 -
vue实现懒加载功能
页面滑动到底部触发内容加载(参考网址https://www.jianshu.com/p/29aa8ac3e1c5)原理:首先要先判断页面怎么样才是滚动到底部,也就是scrollTop+window的height是否大于document的heightif($(window).scrollTop()+$(window).height()>=$(document).height()){...原创 2019-03-28 14:47:53 · 986 阅读 · 0 评论 -
Vue中如何实现部分组件内显示footer的功能
最近做一个vue的项目首页要求不显示Footer的组件,其余的详情页需要显示。特此做了如下的处理参考网址:https://www.cnblogs.com/zdz8207/p/vue-header-footer-emit.html在app.vue文件里引入公共的footer并且footer默认显示,例如某个页面不需要显示footer可以使用 this.$emit('footer',fa...原创 2019-04-11 14:44:43 · 3152 阅读 · 1 评论 -
Vue 如何检测浏览器窗口的变化
起源:网站右侧做了快速导航的功能,但是滑倒底部 导航会覆盖footer,很丑,所以决定利用浏览器窗口发生改变来控制导航的高度。参考网址(https://blog.csdn.net/Simon9124/article/details/81117480 https://www.jianshu.com/p/b34f144467a2)实现过程:1、我们将document.body.c...原创 2019-04-12 16:43:22 · 1298 阅读 · 0 评论 -
vue如何引入swiper和如何使用 以及相关的问题解决
1、github中搜索swiper 参考网址https://github.com/surmon-china/vue-awesome-swiper2、按照步骤进行操作 安装npm install vue-awesome-swiper --save3、在main.js中引入import VueAwesomeSwiper from 'vue-awesome-swiper'// ...原创 2019-03-25 22:23:17 · 656 阅读 · 0 评论 -
vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化1、安装vuexcnpm/npm install vuex --savepackage.json中查看是否安装成功2、在src下创建store文件夹,在创建一个js文件命名可以使默认的index.js 也可自己命名例如s...原创 2019-03-18 22:16:53 · 153 阅读 · 0 评论 -
路由守卫总结(全局守卫、后置钩子、路由独享守卫、组建内守卫)
路由守卫路由独享守卫(beforeEach) main.js中进行配置//路由守卫router.beforeEach((to, from, next) => { if (to.path == '/login' || to.path == '/register') { next(); } else { alert("还没有登录") next("/login"...原创 2019-03-10 17:13:11 · 2346 阅读 · 0 评论 -
如何进行和后台交互通信(axios)
前提需要配置跨域请求:找到根目录下config文件夹下的index.js文件 将下面内容 进行覆盖proxyTableproxyTable: { '/api': { target: 'http://www.abc.com', //目标接口域名 changeOrigin: true, //是否跨域 pathRewrite: {...原创 2019-03-10 18:51:49 · 741 阅读 · 0 评论 -
Vue项目如何引入jq和bootstrap
1.下载jquery;npm install jquery --save-dev2.在webpack.base.conf.js中添加如下内容:var webpack = require('webpack') // 增加一个pluginsplugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: ...原创 2019-03-16 13:55:54 · 519 阅读 · 1 评论 -
vue中实现点击自己的元素展示相应的内容(循环的多条数组中)
1、如果是一级导航,划入只展示自己下面的内容可以通过index来进行找到相应的值HTML:<div class="class-one" v-for="(nav,index) in customMenus" :key="index"><span class="oneclass" @mouseover.stop="showOnedDescription(nav,inde原创 2019-03-16 15:43:36 · 2381 阅读 · 0 评论 -
vue中如何实现点击除了自己元素之外都将自身元素隐藏的功能
1、vue的写法1//html<div id="box" ref="box" style="width:110px;height:110px;background-color:red"></div>//JScreated(){ document.addEventListener('click',(e)=>{ console.log(th...原创 2019-03-16 16:01:27 · 7969 阅读 · 3 评论 -
vue 如何实现划入一个元素让另一个元素慢慢的显示和隐藏
CSS:.knowledgeborder{ width:100%; display: flex; justify-content: space-between; } .class-one{ border: 1px solid blue; width:20%; height:...原创 2019-03-16 16:04:56 · 2740 阅读 · 0 评论 -
vue实现添加购物车 如果存在则实行数量加加 否则新添加到列表
HTML:<button @click="add(newpa,newpaz)">+</button>JS:add: function(item, option) {let sumsdata = {name: item.name,size: option.size,price: option.price,cunt: 1};if (t...原创 2019-03-17 10:43:18 · 1917 阅读 · 0 评论 -
vue中如何引用font awesome字体图标库
1.控制行代码:cnpm install --save font-awesome2、main.js中 引用(全局引用)// add font-awesomeimport 'font-awesome/css/font-awesome.css'3、VUE组件中进行使用<a class="list-group-item" href="#"><i class="fa...原创 2019-03-21 10:10:06 · 875 阅读 · 0 评论 -
VUE笔记(1)
Vue.jsXSS CSRF1、什么是Vuejs?渐进式javaScript的框架特点:易用:学习曲线相对低且平滑(react需要掌握什么事函数式编程,angular需要掌握什么事依赖注入,什么事内部模块)灵活:可在一个库到一套生态中伸缩(小到只用部分组件来写,或者只应用到视图,大到可以用vue全家桶来构建整个系统)高效:运行快,体积相对小(根据虚拟dom来执行,打包体...原创 2019-06-25 22:37:23 · 124 阅读 · 0 评论