之前开发一个后台管理系统，里面用到了Vue和Element-UI这个组件库，遇到一个挺有意思的问题，和大家分享一下。 场景是这样，在一个列表展示页上，我使用了Element-UI的表格组件，新的需求是在原表格的基础上支持拖拽排序。但是原有的组件本身不支持拖拽排序，而且由于是直接引入的Element-UI，不方便修改它的源码，所以比较可行的方法只能是直接操作DOM。 具体的做法是在mounted生命周期函数里，对this.$el进行真实DOM的操作，监听...
全选功能可以说是前端开发中非常常见的一个功能，以前的项目开发用jQuery开发比较多。最近在使用vue前端框架重构之前的项目。从jQuery到vue的转变主要是一个思想想的转变，是将原有的直接操作dom的思想转变到操作数据，用数据驱动dom，也是vue框架的一个核心思想，思想转变过来，对功能的实现自然容易理解一些。 例如下面这个简单的demo按照jQuery的思想来做的话，要选中全选checkbox和所有的checkbox项，分别注册选中事件，判断选...
最近面试，被问到一个题目，vue做一个按钮组件；当时只是说了一下思路，回来就附上代码。 解决思路： 通过父子组件通讯（$refs 和 props）props接受参数, $refs调用子组件的方法来达到点击提交改变按钮状态，如果不成功则取消按钮状态在src/components/ 下建一个button.vue <template> <!-- use plane --> <!-- 传入bgColor改变按钮背景色 --> <!-- state切换button的状态 调用cancel()可以切换 --> <!-- text为按钮文字 --><div c...
todolist demo最近有空重新看了一下vuex,然后又写了一个todolist小demo,原理比较简单,主要是自己规范了一下代码的写法.下载地址 :vue-test_jb51.rar效果图根组件<template><div class=container><h1 class=title>todo list demo</h1><type-filter:types=types:filter=filter:handleUpdateFilter=handleUpdateFilter/><add-todo :handleAdd=handleAdd /><todo-itemv-for=(item,index) in list:key=item.id:index=index:data=item:fi...
前言 曾经在工作上对 vue 路由权限管理这方面有过研究，这几天又看到了几篇相关的文章，再加上昨天电面中又再一次提及到，就索性整理了一下自己的一些看法，希望对大家有帮助。 实现 大体上实现的思路很简单，先上图：无非是将路由配置按用户类型分割为 用户路由 和 基本路由，不同的用户类型可能存在不同的 用户路由，具体依赖实际业务。 用户路由: 当前用户所特有的路由基本路由：所有用户均可以访问的路由实现控制的方式分两种：...
本文介绍了webpack+vuex+axios 跨域请求数据的示例代码，分享给大家，具体如下： 使用vue-li 构建 webpack项目，修改bulid/config/index.js文件dev: {env: require(./dev.env),port: process.env.PORT || 8080,autoOpenBrowser: true,assetsSubDirectory: static,assetsPublicPath: /,proxyTable: {/v2: {target: http://api.douban.com,changeOrigin: true,pathRewrite: {^/v2: /v2} }},} 在action.js 中想跨域请求设置action.js：...
一、场景tween.js是一款可生成平滑动画效果的js动画库当你要实现一个返回顶部的功能时候你会怎么做，大部分人会使用document.body.scrollTop =0；这么写就实现了功能， 不过要更加的细腻一点我们不妨用tween的缓动来实现，看看效果如何吧。之前我们写过tween的相关文章，这里不做介绍了。二、代码<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script src="https://cdn.jsdelivr.net/npm/vue"></script><sty...
本文介绍了如何在vue中使用ts的示例代码，分享给大家，具体如下： 注意：此文并不是把vue改为全部替换为ts，而是可以在原来的项目中植入ts文件，目前只是实践阶段，向ts转化过程中的过渡。ts有什么用？ 类型检查、直接编译到原生js、引入新的语法糖为什么用ts？ TypeScript的设计目的应该是解决JavaScript的“痛点”：弱类型和没有命名空间，导致很难模块化，不适合开发大型程序。另外它还提供了一些语法糖来帮助大家更方便地实践面...
1、安装swiper npm install swiper@3.4.1 --save-dev2、引用组件 import Swiper from swiper; import swiper/dist/css/swiper.min.css;3、html页面代码<div class="swiper-container" id="swiper"><div class="swiper-wrapper"><div class="swiper-slide" v-for="(item,$index) in detail.imgs"><a v-on:click="showPreview($index,detail.imgs,swiperObj)"><figure class="wp-avatar banner"><img v-cloak :src="item | toQiNiuIm...
上次写了一个简单的图片轮播，这个相当于在上面的一些改进。这个组件除了可以进行图片滚动外，也可以嵌入任何内容的标签进行滚动，里面用了slot进行封装。 父： <template><div id="app"><er-carousel-index :typeNumber=2 :pageNumber=3 :timeSpace=2 :duration=2 :isOrNotCircle="true" url="/src/js/index.json" :isOrNotButton=false><template scope="props">-----使用子组件传过来的值，封装slot<div class="articleList-box...
1.nginx 是一个高性能的HTTP和反向代理服务器，常用于分布式服务器管理. 它常用于做负载均衡(通过调用多台服务器达到此目的) 静态资源输出更快，可以对资源实现gzip压缩后输出(这也是本文为什么用它做静态资源访问的一个重要原因) 适合解决跨域问题和反向代理(因为谁也不想看到在本域名下看到访问其他域名的情况发生,跨域可导致csrf攻击,这是本文用它的第二个原因) 占用内存少,秒启,能快速切换结点,防止宕机 2.es6 是ECMAScript的第...
有时候因为布局问题，需要子组件 把数据 传给父组件，并执行父级的某个方法，不多说上代码： 子组件： <template> <div class="isShowing" ref="isShowing"> <div class="menu-wrapper" ref="scroll_warpper" v-show="!hid_show_switch"> <ul ref="scroll_warpper_ul"> <li class="menu-item" @click="goToFatherDetail(233)"> </li> </ul> </div> <v-loading class="isloading" v-show="hid_show_switch"></v-loading> </div> </...
有时表格太大，滚动时信息查看不方便，需要对表格进行全局表头、首列固定， 上效果： 一、创建多个表格进行覆盖 思路：当页面滚动到临界值时，出现固定表头、首列先创建一个活动表格<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">th,td {min-width: 200px;height: 50px;}#sTable {margin-top: 300px}[v-cloak]{display: none;}</style></head><body v-cloak><!--活动的表格--><table ...
这个示例是模仿官网示例样式和功能用我自己的方式写的，基本上没有看官网的源码，只参考自定义指令。让我们一步步来探讨一下。官网demo 要实现的功能 单条添加todo单条删除todo双击编辑todo单条todo已完成相应样式状态改变全部todo是已完成相应样式状态改变清除全部已完成todos待办todos数量显示所有todos，已完成todos，未完成todos筛选单条添加todo<input type="text" class="todos_add" placeholder="What needs to be done?" ...
本文介绍了vue 2.0 购物车小球抛物线的示例代码，分享给大家，具体如下： 备注：此项目模仿 饿了吗。我用的是最新的Vue, 视频上的一些写法已经被废弃了。 布局代码 <div class="ball-container"><transition name="drop"v-for="ball in balls"@before-enter="beforeDrop"@enter="dropping"@after-enter="afterDrop"><div v-show="ball.show" class="ball" v-bind:css="false"><div class="inner inner-hook" ></div></div></transi...