Vue2.x 之中，实现自定义 v-model // CheckComponent.vue<template><input type="checkbox" :value="value" @change="$emit(‘input‘, $event.target.value)"></template><script>export default {name: ‘InputComponent‘,mode: {prop: ‘value‘,event: ‘change‘}props: {value: {required: true}}}</script>// ParentComponent.vue<template><CheckComponent v-model="variable"></template> Vue 3.x 之中，实现自定义 v-m...
一、什么是懒加载 顾名思义，懒加载就是随用随加载，什么时候需要就什么时候加载。 二、为什么需要懒加载 在单页应用中，如果没有使用懒加载，webpack打包后的文件会很大，这时进入首页时的加载时间会很长，不利于良好的用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载所用的时间。 三、路由中懒加载机制的体现 const OldPhone = resolve => requ...
注册功能之图片验证码： 1.实现过程 传递uuid给后端，再发送图片验证码的请求给后端，后端存储uuid并生成图片验证码保存到redis，然后将图片验证码返回给前端。 当用户输入图片验证码的时候，前端会发送uuid和用户输入的图片验证码内容给后端，后端进行比较校验。 2.实现步骤 后端：实现接口，获取图片验证码，生成图片验证码，保存图片验证码到redis，返回图片验证码到前端 前端：uuid作为验证码图片的标识，并...
我发现好多倒计时的插件，刷新都会变成从头再来，于是自己用vue2.0写了一个，测试通过，直接上代码如下是组件代码：<template><span :endTime="endTime" :callback="callback" :endText="endText"><slot>{{content}}</slot></span></template><script>export default {data(){return {content: ‘‘,}},props:{endTime:{type: String,default :‘‘},endText:{type : String,default:‘已结束‘},callback : {type : Function,defa...
1.需求分析目前登录层在myheader组件里面，登录按钮也在同一个组件里面，我们点击登录，调用showLogin()方法即可目前的问题是，我们在另外一个页面，选择某些操作时我们需要判断当前是否登录，如果登录可以进入下一个页面；如果没有登录需要显示登录层，那么这个问题怎么解决呢，我们不能直接调用头部登录方法，我们目前的组件是包含在nuxt里面的问题总是能够解决的，其实很简单，我们可以注册一个全局登录事件，当需要登录层是，我...
详解使用vue实现tab 切换操作转载 https://www.jb51.net/article/117622.htm 这篇文章主要介绍了详解使用vue实现tab操作,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 在使用jQuery类库实现tab功能时，是获取鼠标在mousenter或click时的index值，然后切换到当前的标题和内容，把其他的标题和内容的状态去掉：$(‘.tab .title‘).find(‘.item‘).removeClass(‘current‘).eq(index).addClass(‘...
首先需要下载安装依赖npm install -S file-saver xlsxnpm install -D script-loader然后在utils里边创建两个文件（Blob.js和Export2Excel.js）； 这两个文件可以从网盘里拿到 链接: https://pan.baidu.com/s/1bMgE4HM5IFgq8MUXJGbV-A 提取码: bh4e 然后在页面使用exportOrderExcelHandler() {require.ensure([], () => {const {export_json_to_excel} = require(‘@/utils/Export2Excel‘)const tHeader = ["订单号","任务...
浏览器事件循环（结合vue nextTick）https://juejin.im/post/5cb736c5f265da039955d4e8#commentmessageChanel的讲解https://www.jianshu.com/p/4f07ef18b5d7「前端进阶」从多线程到Event Loop全面梳理 https://juejin.im/post/5d5b4c2df265da03dd3d73e5原文：https://www.cnblogs.com/little-ab/p/11760598.html
我们知道使用jquery很容易做到给当前样式添加指定class,给兄弟节点移除class，但是使用vue该如何做呢？其实也非常简单，例如给点击id为week的div，为其添加样式c_active:<div v-for= "（item,index） in data" :key = "index"> <div :class="{c_active: index == active}" @click="changeClass(index)" id="week"></div>new Vue({ data: { week: [‘星期一‘，‘星期二‘，‘星期三，‘星期四‘，‘星期五‘，‘星期...
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>vue-router功能</title> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript" src="js/vue-router.js"></script> <style> .router-link-exact-active{ color: #ef3239; } </style></head><body><div id="app"> <h1 v-text="title"></h1> <p> <!-- 使用 router-link 组...
接下来，带来js全新技术ES6，结合Vue install全局组件实现Axios封装，以代码形式讲解。1、请求封装//file：src/api/http/http.js import axios from ‘axios‘ axios.create(); axios.interceptors.request.use((config)=>{ //axios请求拦截return config; //记得return请求}) axios.interceptors.response.use((response)=>{return response; }) class http{static async get(url,params,contentType="application/x-www-form-u...
<script src="../../script/vue-lazyload.js"></script><img v-lazy="remoteUrl + pics_url" class="xunjian_pics" v-for="pics_url in item.pics_text">Vue.use(VueLazyload, {preLoad: 1.3,error: ‘../../image/error.png‘,attempt: 1,filter: {progressive(listener, options) {// 实现渐近式加载图片（先加载模糊的图）listener.el.setAttribute(‘lazy-progressive‘, ‘true‘)//暂时不知道这个配置有什么用//调用apicloud...
废话：上一篇https://www.cnblogs.com/adouwt/p/9928278.html 提到了vue实现的基本实现原理：Object.defineProperty() -数据劫持 和 发布订阅者模式（观察者），下面讲的就是数据劫持在代码中的具体实现。1.先看如何调用new一个对象，传入我们的参数，这个Myvue ，做了啥？上面看到了在实例化一个Myvue 对象的时候，会执行init方法， init 方法做了两个事，调用了observer 方法，和 实例化调用了 compile 方法。 到这里我们就明白了...
一、解释1、安装与引用NPM： npm install vue-resource --save-dev 除了 vue-resource 之外，还可以使用 `axios` 的第三方包实现实现数据的请求/*引入Vue框架*/ import Vue from ‘vue‘ /*引入资源请求插件*/ import VueResource from ‘vue-resource‘/*使用VueResource插件*/ Vue.use(VueResource)2、使用语法// 基于全局Vue对象使用http Vue.http.get(‘/someUrl‘, [options]).then(successCallback, errorCallback); Vue....
一创建一个 options.js 代码为：export const option1 = {bar: {title: {text: ‘珠海猪场‘ // 指定图表标题},credits: {enabled: false},chart: {backgroundColor: ‘black‘,type: ‘bar‘},plotOptions: {column: {colorByPoint: true},line: {dataLabels: {// 开启数据标签enabled: true}// 关闭鼠标跟踪，对应的提示框、点击事件会失效// enableMouseTracking: false}},xAxis: {categories: [‘今日已入场‘, ‘已交易单次‘...