正巧在之前面试中遇到问实现拖拽效果 当时面试的时候简单回答了实现的方式与逻辑。 现在闲来无事，把这个东西实现了一下。 原理很简单，写的很方便。 数据驱动，建立一个数组，数组初始长度为1 拖动触发时，添加一个对象到数组中，拖动的是下标为0的对象，新建的还在原来位置放着，等待下次拖动。 话不多说，上代码 <template><div class="view"><div class="x" @mousedown="move($event,index)" v-for="(x,index) in i"><span v-i...
一： 环境搭建 使用vue-cli脚手架工具构建 安装 vue-cli npm install -g vue-cli使用vue-cli初始化项目 vue init demo1进到目录 cd demo1安装依赖 npm install开始运行 npm run dev浏览器访问http://localhost:80801、首先会打开首页 也就是我们看到的index.html文件 2、使用webpack打包之后默认加载main.js文件并将其引入到index.html文件中 二： 开发 在main.js中可以引入相关模块以及组件 import Vue from vue import App from ...
最近有个需求是要添加一个左滑删除的功能。参考了一下别的老哥的代码,做了一点点改进。记录一下。以备不时之需,话不多说 ，上代码 <template><div class="slider-item"><divclass="content"@touchstart=touchStart@touchmove=touchMove@touchend=touchEnd:style="deleteSlider"><div class="remove">删除</div></div></div> </template> <script> // 获取删除按钮的宽度，此宽度为滑块左滑的最大距离 const DELBTNWIDTH = 60; expo...
最近在自己写页面，模仿思否论坛，然后写登录注册UI的时候需要一个验证码组件. 去搜一下没找到什么合适的，而且大多都是基于后端的，于是自己手写一个。 演示分析验证码组件 分析验证码功能 随机出现的数字大小写字母 （基础功能）不同的数字或者字母有不同的颜色 (功能优化)不同的数字或者字母有不同的字体大写 (功能优化)不同的数字或者字母有不同的边距 (功能优化)不同的数字或者字母有不同的倾斜角度 (功能优化)更多功能优化.....
最近用Vue开发后台系统时，有些数据需要在地图上标注出来，需要用到地图功能，因为是国际项目，国内的地图不太适用，所以选用了Google地图，谷歌地图API： https://developers.google.cn/maps/documentation/javascript/tutorial 。 一、必须的开发要求 1.获取密钥API Key 首先，要使用Google Maps JavaScript API，必须获取一个可用的API密钥，并且必须启用结算，具体获取步骤可百度查询，在此就不一一叙述了，主要想讲的地图用法...
每个项目网络请求接口封装都是很重要的一块，第一次做Vue项目，我们的封装方法如下： (1).新建一个js文件，取名api.js (2).引入 axios ，mint-UI ,如下图： import axios from axios import {MessageBox, Toast} from mint-uiaxios.defaults.timeout = 50000//默认请求超时时间 axios.defaults.headers = 请求头(2).封装get方法 export function getHttp (url, params = {}) {// 创建动画mint-uiIndicator.open({text: 加载中...,s...
通过购物车的一个案列，把vuex学习了一篇。vuex概念浅谈Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单的来说，就是数据共用，对数据集中起来进行统一的管理。 如果您的应用够简单，您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是，如果您需要构建是一个中大型单页应用，您很可能会考虑如何更好...
前言 做移动端时，适配 是必须的。使用rem单位，可在不同屏幕上完美显示相同的布局。px2rem 插件方便的将px单位转为了rem。 px2rem 地址：https://www.npmjs.com/package/px2rem 这应该是vue项目在适配移动端时候，最简单的方法之一下面是基本步骤（使用cnpm）1.下载并引入lib-flexible cnpm install --save lib-flexible在main.js中 ：import 'lib-flexible/flexible'2.引入px2rem-loader cnpm install --save px2rem-loader3.将p...
先简单说明一下,这个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">{{...
需要使用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>*...