前言 pc端开发需要拖拽组件完成列表的顺序交换，一般移动端的UI组件会包含，但是我在用的iview并没有此功能的组件，于是手写一个，实现起来很简单。效果图如下：可以拖拽完成新排序，点击某一项可以触发相关事件. 关于拖拽 drag & drop 拖放（Drag 和 drop）是 HTML5 标准的组成部分。 拖拽对象dataTransfer对象，只能在拖放事件的事件处理程序中访问。重要属性： effectAllowed ( none | copy | copyLink | copyMove | link、link...
最近倒腾了一会vue，有点迷惑其中methods与computed这两个属性的区别,所以试着写了TodoList这个demo，(好土掩面逃~）;1. methodsmethods类似react中组件的方法，不同的是vue采用的与html绑定事件。给个例子/*html*/<input type="button" value="点击" v-on:click=handlClick id="app">/*js*/var app = new Vue({el:#app,methods:{handlClick:function(){alert(succeed!);},}}) 通过在input标签中的vue命令 v-on命令绑定handlClick事...
这次给大家带来修改node.js默认npm安装目录步骤详解，修改node.js默认npm安装目录的注意事项有哪些，下面就是实战案例，一起来看一下。默认的安装路径：C:/用户/[用户名]/AppData/Roming/npm/node_meodules修改一：打开CMD，查看配置npm config ls二：在其它物理盘建立文件夹如：D:\sw\develop\nodejs\npm三：重新设置npm config set prefix "D:\sw\develop\nodejs\npm" npm config set cache "D:\sw\develop\nodejs\npm\cache"四...
今天我们就谈谈jquery中的事件和简单动画吧，它们毕竟基础是进阶华丽的根本！！ 1.事件 1.window事件 ready 准备就绪 2.鼠标事件 方法 执行时机 click(fn) 单击鼠标 $(document).ready(function(){$("dd>img").click(function(){$("dt>img").show();});mouseover(fn) 鼠标指针移过时 mouseout(fn) 鼠标指针移出时$("#nav .navsBox ul li").mouseover(function(){$(this).addCla...
用法和$.Callbacks完全一致 ， 但是只是实现了add , remove , fire , empty, has和带参数的构造函数功能， $.Callbacks 还有disable,disabled, fireWith , fired , lock, locked 方法 代码如下： 代码如下: String.prototype.trim = function () { return this.replace( /^\s+|\s+$/g, ); }; // Simulate jQuery.Callbacks object function MyCallbacks( options ) { ...
微信小程序网络请求wx.request详解及实例 如果说小程序API里面最重要一个接口是哪一个？那么首推wx.request()。相当于在小程序内请发起一个https请求（本地调试模式下支持HTTP）。HTTP协议中共定义了八种方法或者叫“动作”来表明对Request-URI指定的资源的不同操作方式。 GET：向特定的资源发出请求。POST：向指定资源提交数据进行处理请求。数据被包含在请求体中。PUT：向指定资源位置上传其最新内容。DELETE：请求服务器删除Req...
前提 Node.js 6.3+, 这个可上Node.js官网自行下载；Chrome 55+. 如果您本地的chrome升级到最新版后还是<55, 可以从此处下载：Chrome Canary，亲测可行。配置 就目前来说，在浏览器端并行调试JavaScript与Node.js还属于新特性，新体验。为了能够正常使用，你还需要做如下配置： 1、输入url：chrome://flags/#enable-devtools-experiments. 注：如果使用中文版Chrome，显示的配置项名称应该为： 开发者工具实验性功能 ,如下图;2、启用...
什么是组件：组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。 如何注册组件？ 需要使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。Vue.extend方法格式如下： var MyComponent = Vue.extend({// 选项...后面再介绍 }) 如果想要其他地方...
在写SDK项目的时候碰到一个问题：在直播间初始化SDK时使用默认主题，在专题页初始化SDK时使用其它主题。默认主题在打包时挂在全局环境下供多个页面使用，定制主题需要在初始化SDK的时候传入。 实现起来很简单，判断是否有定制主题，有就使用定制主题，没有就使用默认主题。项目下的基本组件大多是这样的： import { h, Component } from lib/preact import csjs from lib/csjs import { theme } from lib/platformconst styles = c...
二次封装axios，根据参数来实现多个请求多次拦截 1. 新建 axiosTool.js 文件，设置请求拦截和处理的逻辑 import Vue from vue import axios from axios //取消请求 let CancelToken = axios.CancelToken //设置默认请求头，如果不需要可以取消这一步 axios.defaults.headers = {X-Requested-With: XMLHttpRequest } // 请求超时的时间限制 axios.defaults.timeout = 20000 // 开始设置请求 发起的拦截处理 // config 代表发起请求的...
本篇文章主要介绍了详解vue.js的devtools安装 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧安装2.下载好后进入vue-devtools-master工程 执行npm install ----->npm run build.3.修改manifest.json 中的persistent为true4.打开谷歌浏览器设置--->扩展程序--》勾选开发者模式---》添加工程中的shells-->chrome的内容或者直接拖动shells-->chrome，至此恭喜已经安装成功！！！5.打开自己的vue项目中...
这次给大家带来webstorm中配置nodejs环境及npm步骤详解，webstorm中配置nodejs环境及npm的注意事项有哪些，下面就是实战案例，一起来看一下。——nodejs安装及环境配置1.nodejs官网,下载windows平台nodejs环境安装包(.msi格式)，安装2.测试安装是否成功：cmd操作，进入node安装根目录下：node -v ； npm -v 查看版本号3.配置全局在node的安装的根目录，也就是nodejs文件夹下新建两个名字为node_cache、node_global文件夹设置环境变...
功能概述： 有多种图表样式可供选择 可以自定义日期轴线 可设置旋转轴文字 自动计算趋势线 工具条提示和高亮数据点 默认最优设置，非常易于使用 以上功能在jqPlot主页中的示例页面有 很多直观的展示。这里是它详细使用文档。 缺点：柱状图无法显示具体数据值。饼状图无法显示具体百分比。 下边是搜集的详细参数配置： 代码如下:options = { seriesColors: [ "#4bb2c5", "#c5b47f", "#EAA228", "#579575", "#839557", "#958c12", "...
jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器，以及jQuery独创的高级而复杂的选择器。另外还可以加入插件使其支持XPath选择器，甚至开发者可以编写属于自己的选择器(即选择器插件，参考上篇：jQuery插件原来如此简单——jQuery插件的机制及实战)。正是jQuery强大的选择器功能，让它很容易上手，吸引了大批的开发者，本文就来介绍一下强大的jQuery选择器。 jQuery选择器类型 jQuery选择器主要分为四类： 1、基本选择器...
代码的本质突出顺序、有序这一概念，尤其在javascript——毕竟javascript是单线程引擎。 javascript拥有函数式编程的特性，而又因为javascript单线程引擎，我们的函数总是需要有序的执行。优秀代码常常 把函数切割成各自的模块，然后在某一特定条件下执行，既然这些函数是有序的执行，那么我们为什么不编写一个统一管理的对象，来帮助我们管理这些函数——于是，Callbacks（回调函数）诞生。 什么是Callbacks javascript中充斥着函...