最近在学习vue的单页面应用开发，需要vue全家桶，其中用到了VueRouter，在路由的设置和跳转中遇到了两个对象$router 和 $route。router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,que...
copy(text) {var Input = document.createElement(‘input‘); //创建一个隐藏input（重要！）Input.value = text; //赋值document.body.appendChild(Input);Input.select(); // 选择对象document.execCommand(‘Copy‘); // 执行浏览器复制命令Input.className = ‘oInput‘;Input.style.display = ‘none‘;this.$message({ message: ‘复制成功‘, type: ‘success‘ });}, 原文：https://www.cnblogs.com/gggggggxin/p/1315881...
使用Spring Boot + Vue 做前后端分离项目搭建，实现登录时，出现跨域请求Access to XMLHttpRequest at ‘http://localhost/open/login‘ from origin ‘http://localhost:8080‘ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.Vue中使用的Axios，配置main.js文件Axios.defaults.baseURL = ‘http://localhost:80‘ Axios.defaults.headers[‘Content-Type‘...
以前做的项目没怎么用到，不过换了家公司，看到其他的项目里有用到一些自己平时不知道的插件，苦于记忆不好，于是将这些杂七杂八的插件记录下来。 1.vue-count-to 数据滚动插件这个插件是实现数据从一个数字增长为另一个数字时的动态效果，如一个汇总的页面，数据从0到某个具体数字。 使用也很简单，npm安装之后，在要用到的页面引入，import CountTo from ‘vue-count-to‘<count-to class="card-panel-num" :startVal="0" :end...
在家的闲暇时间来完善自己的前端知识。经过两三天的学习，按照webpack文档学习，vue文档学习，最后实现了两者结合的目标。webpack按照网站上guide的流程依次学习1、使用npm安装webpack2、设置输入文件，比如怎样引入css，images，fonts，data3、设置输出文件，比如可以根据自己的设置来决定输出脚本的名称，生成新的页面，在每次生成新页面之前先把旧的页面进行清理4、开发过程中，使用source maps来显示提示信息，方便开发者定位错...
问题描述： 用vue封装一个swiper组件的时候，发现轮播图不能轮播了。原因： 异步请求的时间远大于生命周期执行的时间，mounted初始化DOM时数据未返回，渲染数据是空数组，导致轮播图的容器层宽度为0，渲染轮播图不能滚动。解决思路： 数据返回之后再做初始化操作。解决方法： 一、容器没有宽度，就想着给容器设置一个宽度，但是一旦设置死数据了后期维护起来很麻烦。 二、设置一个定时器，延长等待的时间，但是无法...
Vue中监听input框在输入之后按下回车的事件：可以在input的属性中添加@keyup.enter="方法名称"问题描述：当输入结束时，按enter键，页面刷新，不希望刷新问题分析：当form表单中，只有一个输入框时，按Enter键，会导致表单提交，会刷新页面解决方案：网上提供了在form上添加@submit.native.prevent发现容易出现不可预测问题最终找到：在input元素上添加阻止默认表单提交事件onkeypress="if(event.keyCode == 13) return false;"——...
<template><div class="tab-control"><div v-for="(item , index) in title" class="tab-control-item" :class="{active: index === currentIndex}" @click=‘itemClick(index)‘><span>{{item}}</span></div></div> </template><script> export default {name: ‘TabControl‘,data:{title:["新款" , "流行" , "推荐"]}}},data(){return{currentIndex: 0}},methods: {itemClick(index){this.currentIndex = index;this.$emit(‘t...
事件修饰符.stop 阻住冒泡.prevent 阻止默认行为.capture 捕获阶段发生.self 自己作为事件源的时候才发生 .once 执行一次.passive 一般在移动端的滚动事件中使用(不阻止默认行为)，修饰符尤其能够提升移动端的性能键盘修饰符.enter.tab.delete.esc.space.up.down.left.right原文：https://www.cnblogs.com/musi03/p/12599409.html
常规情况下，在里动态加载不同组件的方式为:<template><!-- 符合条件A，加载组件A --><BusinessComponentA v-if="condition==‘‘A" /><!-- 符合条件B，加载组件B --><BusinessComponentB v-if="condition==‘B‘" /><!-- 符合条件C，加载组件C --><BusinessComponentC v-if="condition==‘C‘" /> </template> 这种方式的问题，就是如果有很多种业务场景，那么在template里就需要写很多的分支.? 解决办法： 根据业务条件动态...
vuex核心是 store，包含着应用中的大部分状态 Mutations 存放的是改变 state 的方法，更改store的状态的唯一方法是提交 mutation Actions 存放的是一些业务逻辑，通常是异步任务。安装yarn add vuex使用import Vue from ‘vuex’ import Vuex from ‘vuex‘ Vue.use(Vuex)==推荐使用辅助函数==stateGetter 可以认为是store的计算属性，getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。Mutat...
业务逻辑 通过gitee创立各个分支，比如swiper，header，recommende等分支，其实就是整个页面上的每个模块。模块化是公司级别项目开发的基准，每个人在各自的分支上进行代码的编写，而对主分支master没有影响。故master分支一般是承载着项目作为基本的代码。 在本个vue的项目中，其页面模板是存储在以下路径 Home.vue作为根模板起到了一个对于别的小模块的整合作用。需要引入模块，在template元素下要使用div进行一个根标签的...
三个技能，父组件 —> 子组件传值（props）、子组件 —> 父组件传值（$emit）、以及插槽（slot）；对于一个独立的组件来说，props是用来为组件内部注入核心的内容；$emit用来使这个独立的组件通过一些逻辑来融入其他组件中。举个具体点的例子，假如你要做一辆车，车轮是要封装的一个独立组件，props指的就是根据整个车的外形你可以给轮子设置一些你想要的且符合车风格的花纹，图案等；而$emit的作用则是让这些轮子能够和整辆车完美...
使用HBuilderX实现打包vue项目成app：https://www.cnblogs.com/wuzhiquan/p/10594855.html 一、准备开发工具开发工具：HBuilderX官网地址：http://www.dcloud.io（标准版需要自己安装插件，app开发版已经把app开发常用的插件安装好了，开箱即用，建议使用开发版）二、打包生成一个vue项目就拿手头上一个vue项目进行打包，vue项目预览如下：打包生成的项目结构：三、创建HBuilder的app项目（请先注册HBuilde账号并登录，打包的时候需...
vue2.0之后有哪些变化： 1.每个组件模板template,不再支持片段代码 之前： <template> <h3>vue-router+vue-loader</h3> <p>hshsh</p> </template> 现在：必须有根元素 <template> <div> <h3>vue-router+vue-loader</h3> <p>hshsh</p> </div> ...