先简单说明一下,这个Demo引入的vue,iview的方式是标签引入的,没有用到webpack之类的构建工具...毕竟公司还在用angularjs+jq.这也是我第一次写文章,大家看看思路就行了,要是有大佬指点指点就更好了 话不多说,先来个效果图我们再看下极为简单的目录结构IViewEditTable ## vue+iview 实现的可编辑表格 └── index.html ## 首页 └── js└── editTable.js ## 首页JS └── ivew ## iview相关 └── vue├── axi...
基础用法你可以用v-model指令在表单input，textarea以及select元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但是v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据。 v-model会忽略所有表单元素的value, checked, selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值。(1) 文本 <input v-model="message" placehod...
关于在vue中使用websocket的简易例子使用vue-cli生成一个vue模版安装三个依赖： npm install -s socket.io npm install -s vue-socket.io npm install -s socket.io-client创建一个新的servers：在文件最外层创建 server/app.js文件： var sever=require(http).createServer(); var io=require(socket.io)(sever)io.on(connection, function (socket) {socket.on(login,function(data){ //接收连接中的login事件console.log(data);...
用v-for把一个数组对应为一个组件元素我们用v-for指令根据一组数组的选项列表进行渲染。v-for指令需要使用item in items形式的语法： <ul><li v-for="item in items">{{ item.message }}</li> </ul>var vm = new Vue({el: #el,data: {items: [{message: foo},{message: boar}]} })在v-for块中，我们拥有对父作用域属性的完全访问权限。v-for还支持一个可选的第二个参数为当前项的索引。 <ul><li v-for="(item, index) in items">{{...
之前公司有一个需求是：通过js来生成html。而且大部分都是生成表格，直接通过字符串拼接的话，代码的可复用性太低的，所以写了个通用的json转html表格的工具。 代码htmlKit = {_tags: [], html: [], _createAttrs: function (attrs) {var attrStr = [];for (var key in attrs) {if (!attrs.hasOwnProperty(key)) continue;attrStr.push(key + "=" + attrs[key] + "")}return attrStr.join(" ")}, _createTag: function (tag, attrs...
需要使用vue做一个专题页面。滚动页面指定区域导航高亮。监听滚动页面事件，对比当前页面的位置与元素的位置，如果当前滚动的区域位置大于元素的位置，导航添加class，其他去掉class进行样式切换。我使用的方法是在定位元素上添加id，在导航添加data-id属性，监听滚动事件，如果当前滚动区域大于定位元素区域，将元素的id赋值给变量，然后与导航的data-id进行匹配，切换class。html结构main.vue <template><div class="qz-home"><d...
前言: 本文基于vue 2.5.2, webpack 3.6.0（配置多页面原理类似，实现方法各有千秋，可根据需要进行定制化） vue 是单页面应用。但是在做大型项目时，单页面往往无法满足我们的需求，因此需要配置多页面应用。 1. 新建 vue 项目vue init webpack vue_multiple_test cd vue_multiple_test npm install2. 安装 globnpm i glob --save-devglob 模块用于查找符合要求的文件 3. 目标结构目录. ├── README.md ├── build │ ├── ...
Vue.js 组件组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。 具体代码如下所示： <!DOCTYPE html> <html> <head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Page Title</title><meta name="viewport" content="width=device-width, initial-scale=1"><script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script><style>*...
一、思路，从后台获取七牛token，上传图片到七牛，获取返回图片路径放入el-upload。 二、代码。 <el-input v-model="listVideoQuery.orgLogo" @change="orgLogoChange"></el-input><el-col :span="10" class="mt10"><el-upload class="upload-demo" :file-list="fileList2" :action="domain" :before-upload="beforeAvatarUpload" :data="form":on-remove="handleRemoveQrgLogo" :on-success="handleAvatarSuccess" list-type="pic...
本文基于http Range Requests协议，实现了分片下载的功能。 使用场景包括基于浏览器的流文件片段传输、基于客户端的分片下载等。 原理 http通过Range Requests相关的header，可以与服务器进行协商，实现分部分的请求。 这里就不细说具体协议内容了，具体可以参考这两篇文章，解释的非常详细： https://tools.ietf.org/html/rfc7233https://www.gxlcms.com/article/68284.htm下面贴一下实现过程。 服务端代码 服务端用node实现： ap...
之前有一篇写的如何同时传递form表单及upload组件文件，如果有多个upload文件该如何传递呢 上代码 html <el-form ref="newform" :model="newform" :rules="rules"><el-form-item prop="expName" label=""><el-input v-model="newform.expName" placeholder="" style="width:75%"></el-input></el-form-item><el-form-item prop="expSn" label=""><el-input v-model="newform.expSn" placeholder="" style="width:75%"></el-input><...
1. 引用vue.js <!DOCTYPE html> <html> <head> <script src="http://vuejs.org/js/vue.js"></script><meta charset="utf-8"><title>JS Bin</title> </head> <body><div id="root"><input type="text" v-model="inputValue"><button @click="handlerAdd">提交</button><ul><li v-for="(item,index) of lists" :key="index" @click="handlerDel(index)">{{item}}</li></ul></div><script>new Vue({el: #root,data: {inputValue: ,lis...
打开cmd创建即可 $ npm init Package name: (hello) //模块名字，npm init会自动取当前目录名作为默认名字，这里不需要改，直接确认即可 Description: A example for write a module //模块说明 Package version: (0.0.0) 0.0.1 //模块版本号，这个大家按自己习惯来定就可以 Project homepage: (none) //模块的主页，如果有的话可以填在这里，也可以不填 Project git repository: (none) //模块的git仓库，选填。npm的用户一般...
本文介绍了NodeJS服务器实现gzip压缩，分享给大家，具体如下：在浏览器向服务器请求静态资源时，服务器为了减小在网络传输过程中消耗的流量和时间，都是将静态资源经过压缩后返回给服务器的，实现压缩的算法有 deflate 和 gzip 等，最常用的是 gzip 压缩。 gzip 简介 在浏览器和服务器之间通过 gzip 压缩流实现传输的过程可以用下图表示。当浏览器向服务器请求静态资源，服务器会将静态资源经过处理转换为压缩流，大大减小文件体积...
最近在尝试利用 electron 将一个 web 版的聊天工具包装成一个桌面 APP。作为一个聊天工具，截屏可以说是一个必备功能了。不过遗憾的是没有找到很成熟的库来用，也可能是打开方式不对，总之呢没看到现成的，于是就想从头撸一个简单的截图工具。下面就进入正题吧！ 思路 electron 提供了截取屏幕的 API，可以轻松的获取每个屏幕（存在外接显示器的情况）和每个窗口的图像信息。 把图片截取出来，然后创建一个全屏的窗口盖住整个屏幕，...