vue | 易学教程

vue 路由过渡动效

阅读更多关于 vue 路由过渡动效

<router-view> 是基本的动态组件，所以我们可以用 <transition> 组件给它添加一些过渡效果： <transition name="slide-left" mode="out-in"> <router-view /> </transition> 过渡的类名在进入/离开的过渡中，会有 6 个 class 切换。 v-enter ：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。 v-enter-active ：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。 v-enter-to : 2.1.8版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。 v-leave : 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。 v-leave-active ：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。 v-leave-to : 2.1.8版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave

vue拖拽排序插件vuedraggable的使用附原生使用方法

阅读更多关于 vue拖拽排序插件vuedraggable的使用附原生使用方法

Vue中使用先下载依赖： npm install vuedraggable -S 　　项目中引入 import draggable from 'vuedraggable' 注册 components: { draggable }, 　　demo： <template> <draggable v-model="colors" @update="datadragEnd" :options = "{animation:500}"> <transition-group> <div v-for="element in colors" :key="element.text" class = "drag-item"> {{element.text}} </div> </transition-group> </draggable> </template> <script> import draggable from 'vuedraggable' export default{ data(){ return{ msg:"这是测试组件", colors: [ { text: "Aquamarine", }, { text: "Hotpink", }, { text: "Gold", }, { text: "Crimson", }, { text: "Blueviolet", }, { text:

Vue生命周期钩子函数

阅读更多关于 Vue生命周期钩子函数

Vue生命周期钩子函数 vue 生命周期钩子函数可以理解为 vue 实例从创建到销毁的一个个阶段，每个阶段的内部构造都是不一样的，可以在不同的阶段做相应的处理 Vue生命周期钩子函数包括： beforeCreate created beforeMount mounted beforeUpdate updated activated （keep-alive组件专属） deactivated （keep-alive组件专属） beforeDestroy destroyed errorCaptured （2.5.0+ 新增）生命周期钩子详情 beforeCreate 在实例初始化之后，数据观测(data observer) 之前调用该钩子，此时无法获取 data，不能使用 watch 监听，可以加入 loading 事件 created 实例已经创建完成之后调用该钩子，此时实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调 data 被初始化，可以获取 data和调用 watch 监听，但是页面还是空白，结束 loading 事件，可以进行一些数据，资源的请求 beforeMount 在挂载开始之前调用该钩子，相关的 render 函数首次被调用，完成 el 初始化，页面依然是空白 mounted el 被新创建的

Vue中使用代理进行跨域

阅读更多关于 Vue中使用代理进行跨域

跨域是前后端联调之间老生常谈的一个问题,产生跨域的根本原因是: 浏览器的同源策略:是浏览器最核心也是最基本的安全功能会出现跨域的情况协议不同(http/https) 端口不同(127.0.0.1:80/127.0.0.1:8080) 域名和ip(如localhost请求127.0.0.1) 一级域名和二级域名域名完全不同解决跨域的方式(非前端) 后端代理 cors(跨域资源共享) 前端跨域 jsonp:script标签的src属性不存在跨域,请求的结果是一个回调函数 Vue中的代理解决跨域 Vue中的代理其实是后端代理,通过配置proxyTable(使用http-proxy-middleware中间件),浏览器先发送给自己的服务器,自己的服务器再请求远程服务器上的资源 vue.config.js的代理配置 module . exports = { publicPath : '/' , devServer : { disableHostCheck : true , //若有一个127.0.0.1/api/getInfo接口,则按如下配置 proxy : { '/api' : { target : "http://localhost:3000" , ws : true , changeOrigin : true , } , } } , } ; 来源： CSDN 作者：

Vue的过滤器

阅读更多关于 Vue的过滤器

　　过滤器是数据在真正渲染到页面的时候，可以使用过滤器对数据进行一些处理，把最终处理的结果渲染到网页中。过滤器的使用：　　过滤器可以用在两个地方：`{{ }}`和`v-bind`表达式。过滤器应该被添加在`JavaScript`的尾部通过管道符（"|"）进行分割。注意：需要写在创建实例之前。 `function`的第一个参数必须是要处理的值，不能是其他作用的参数。可以多个过滤器连用。前提是这些过滤器在没有冲突的时候。过滤器分为全局过滤器和局部过滤器： 1）全局过滤器：绑定在Vue上。 2）局部过滤器：在组件中创建的过滤器只能在组件中用。　 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <title>Vue过滤器</title> </head> <body> <div id="app"> <p>{{user|strip}}</p> 传递参数 <p>{{user|strip2('*')}}</p> 过滤器串联 <p>{{user

vue模块拖拽效果

阅读更多关于 vue模块拖拽效果

正巧在之前面试中遇到问实现拖拽效果当时面试的时候简单回答了实现的方式与逻辑。现在闲来无事，把这个东西实现了一下。原理很简单，写的很方便。数据驱动，建立一个数组，数组初始长度为1 拖动触发时，添加一个对象到数组中，拖动的是下标为0的对象，新建的还在原来位置放着，等待下次拖动。话不多说，上代码 <template> <div class="view"> <div class="x" @mousedown="move($event,index)" v-for="(x,index) in i"> <span v-if="index+1 !== i.length">{{index+1}}</span> <input v-model="x.input"> </div> {{i}} </div> </template> <script> export default { name: "index", data(){ return{ positionX:0, positionY:0, i:[ {input:''} ] } }, methods:{ move(e,x){ let odiv = e.target; //获取目标元素 //算出鼠标相对元素的位置 let disX = e.clientX - odiv.offsetLeft; let disY = e.clientY - odiv

vue 可拖拽可缩放 vue-draggable-resizable 组件常用总结

阅读更多关于 vue 可拖拽可缩放 vue-draggable-resizable 组件常用总结

特征没有依赖使用可拖动，可调整大小或两者兼备定义用于调整大小的句柄限制大小和移动到父元素或自定义选择器将元素捕捉到自定义网格将拖动限制为垂直或水平轴保持纵横比启用触控功能使用自己的样式为句柄提供自己的样式安装和基本用法 npm install --save vue-draggable-resizable 全局注册组件main.js中写入： import Vue from 'vue' import VueDraggableResizable from 'vue-draggable-resizable' // 可选择导入默认样式 import 'vue-draggable-resizable/dist/VueDraggableResizable.css' Vue.component('vue-draggable-resizable', VueDraggableResizable) 局部注册：在使用的组件里引用 import VueDraggableResizable from 'vue-draggable-resizable' import 'vue-draggable-resizable/dist/VueDraggableResizable.css' 常用属性总结 :w 默认宽度 :h 默认高度 :x="50" 默认水平坐标注意相对元素是谁 :y="50"

VueJS和Javascript实现文字上下滚动效果

阅读更多关于 VueJS和Javascript实现文字上下滚动效果

一提到文字上下滚动，我们就会想到用不同的程序去实现，而且页面中有文字滚动会增加这个网页的互动和可信度。 1.Js最简单的方法是控制盒子的高度，使不断的重复添加 <html> <body> <head> /**scroll css**/ #scrolldiv{height: 400px;overflow: hidden;} </head> <div id="scrolldiv" class="scroll"> <ul id="scroll1"> <li>用户130****0834 刚刚砸中<span class="yellow">500元京东卡</span> 正在兑换中</li> <li>用户176****2746 刚刚砸中<span class="yellow">1000美元赠金</span> 正在兑换中</li> <li>用户132****7754 刚刚砸中<span class="yellow">500元京东卡</span> 正在兑换中</li> <li>用户181****4518 1分钟前砸中<span class="yellow">U盘+高级笔+充电宝</span> 正在兑换中</li> <li>用户185****5483 1分钟前砸中<span class="yellow">品牌热销保温杯</span> 正在兑换中</li> <li>用户158****7375

ABAP system landscape和vue项目webpack构建的最佳实践

阅读更多关于 ABAP system landscape和vue项目webpack构建的最佳实践

基于Netweaver的ABAP transport route一般都有dev，test和prod三种类型的系统。而Vue前端项目的webpack build设置也类似。以 SAP成都研究院数字创新空间开发的智能服务前端实现为例, 在package.json里定义了名为dev和build两个script： "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "build": "node build/build.js" } 一旦运行npm run dev，会观察到在dev环境下使用了webpack-dev-server这个依赖启动了web服务器当然webpack-dev-server这个依赖也必须定义在package.json的dependencies区域里： npm install把所有依赖下载到本地后，也能观察到webpack-dev-server.js这个依赖的实现：执行命令行npm run dev, 实际上执行的命令行为： node "C:Usersi042416Documents_DISCodeSmartServiceFront ode_modules.bin..webpack

GitHub Vue项目推荐｜Vue+Element实现的电商后台管理系统功能丰富

阅读更多关于 GitHub Vue项目推荐｜Vue+Element实现的电商后台管理系统功能丰富

GitHub Vue项目推荐|mall-admin-web是一个电商后台管理系统的前端项目基于Vue+Element实现主要包括商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等功能项目热度标星(star)：3398 （很不错的实用项目，大神作品，建议关注）标星趋势关注(watch)：171 拷贝(fork)：2003 贡献人数：1 仓库大小：1 MB 最后更新：2019-08-29 代码提交活跃度：综合推荐指数：【3】颗星开发语言主要语言：Vue 语言分布：Vue:81.04%、JavaScript:15.95%、CSS:2.78%、HTML:0.23% 项目概述 mall-admin-web前言该项目为前后端分离项目的前端部分，后端项目mall地址：https://github.com/macrozheng/mall 项目介绍 mall-admin-web是一个电商后台管理系统的前端项目，基于Vue+Element实现。主要包括商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等功能。项目演示项目在线演示地址：http://39.98.190.128/index.html 技术选型后端前端系统架构业务架构项目布局 src -- 源码目录├── api -

订阅 vue