今天逛博客,发现一个干货, 赶紧记录,内容太多,慢慢消化 vuejs心法和技法 https://www.cnblogs.com/kidsitcn/p/5409994.html…

Vue通信.传值的多种方式,详解(都是干货) 可参考博客: https://blog.csdn.net/qq_35430000/article/details/79291287…

本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于戏台一般精彩纷呈,从 MVC 到 MVVM,你刚唱罢我登场. backbone,angularjs 已成昨日黄花,reactjs 如日中天,同时另一更轻量的 vue 发展势头更猛,尤其是即将 release 的2.0版本,号称兼具了 angularjs 和 reactjs 的两者优点.不过现在的官方…

vue-meizi 本项目是基于vue2最新实战项目,是适合新手进阶的绝佳教程.代码简单易懂,注释多多.实现了移动端使用最多的 无限滚动,图片加载,左右滑动,等待.先发布预览版本,后面更多更全的功能和教程将会陆续发出. 首先 感谢gank.io提供的api接口喜欢的请点心,关注,star ,fork,这些是我坚持下去的动力demo地址 demo (请用chrome的手机模式预览)本项目地址github地址手机扫一扫 项目二维码.png 项目技术架构 vue-cli vue vue-resourc…

DncZeus 前言 关于 DncZeus DncZeus = Dnc + Zeus "Dnc"--.Net Core 的缩写: "Zeus"--中文译为宙斯,是古希腊神话中的众神之王,奥林匹斯十二主神之首,统治宇宙万物的至高无上的主神(在古希腊神话中主神专指宙斯),人们常用"众神和人类的父亲"."神王"来称呼他,是希腊神话诸神中最伟大的神. DncZeus的愿景就是做一个.NET Core 领域的简易精致的通用后台权限管理模…

转:https://www.jianshu.com/p/53199b842d25 image.png 图上那些类似于星座图的点和线,是由vue-particles生成的,不仅自己动,而且能与用户鼠标事件产生互动. 一直中意这种动态插件,今天有时间,迫不及待试了一波~ 大写的NICE~ 使用教程: npm install vue-particles --save-dev main.js里加入以下代码: import VueParticles from 'vue-particles' Vue.use…

1.安装mockjs依赖 (c)npm install mockjs --save-dev 2.安装axios(Ajax) (c)npm install --save axios 3.项目目录 4.设计到的相关文件 fetch.js(封装axios) import Qs from 'qs'; import axios from 'axios'; // 创建axios实例 const service = axios.create({ baseURL: process.env.BASE_API, /…

双十一剁手节过去了,大家应该在很多网页中看到了数字翻牌的效果吧,比如倒计时. 数字增长等.相信很多人都已经自己独立实现过了,我也在网上看了一些demo,发现HTML结构大多比较复杂,用了4个并列的标签来放置前后两个“牌”.本文就来讲解下,如何进一步精简HTML,让结构简单,让JS方法封装得易使用.先来看看最终效果: 每个翻牌的HTML结构(精简至2个并列标签): <div class="flip down"> <div class="digital fron…

前言 前几天因为项目需要,用jquery写了一个swiperOut组件,然后我就随便把这个组件翻译成基于Vue的了,有兴趣的朋友可以看下.Github源码(不麻烦的话帮忙start,请各位大爷赏个星星) demo展示 效果展示 老规矩,先上效果,效果不是很好,大家如果有什么生成gif的好用的软件可以推荐下: 开始制作 DOM结构 分析效果途中的结构,我们可以得出每一项可滑动删除的节点的结构包含如下两部分: 正文部分,显示咱们的主内容 滑动出来的部分(如:删除按钮) <li class="r…

本人只有一个阿里云的ip和一个已经解析过的域名,然后想用80端口部署多个项目,比如输入: www.a.com和www.b.com与www.c.com就能访问不同项目,而不用输入不同端口号区分. 1.这里就只部署单体springboot项目,比较简单,打包成jar包,端口号改成没有被占用的就行 (我这里用了8080端口,然后访问没问题,要放到nginx里也可以,本人这里没有放) 2.微信小程序的话好像只能用80.443端口来部署,不然报错,如下: 3.vue项目属于手机端,nuxt项目属于pc端,…

一.安装环境及Vue脚手架搭建 参考文档:https://www.jianshu.com/p/1626b8643676 二.开发文档 官方文档:https://cn.vuejs.org/v2/guide/ 三.第三方插件 官方推荐:https://github.com/vuejs/awesome-vue 四.HTTP Requests 1.vue-resource    安装:npm install vue-resource  --save 2.axios            安装: npm…

扯淡 经过不少日夜的赶工,Chloe 的官网于上周正式上线.上篇博客中LZ说过要将官网以及后台源码都会开放出来,为了尽快兑现我说过的话,趁周末,我稍微整理了一下项目的源码,就今儿毫无保留的开放给大家,希望能对大家有帮助,献丑了. 项目不大,官网就是几个展示页面.后台借鉴了 NFine 的设计,直接套用了 NFine 的前端模版以及他的一些权限设计.由于个人开发习惯和所用技术与 NFine 的有些不同,比如,NFine 前端数据展示用 jqgrid,而我比较倾向于使用 knockoutjs,同时,…

欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 李萌,16年毕业,Web前端开发从业者,目前就职于腾讯,喜欢node.js.vue.js等技术,热爱新技术,热爱编程. vue.js的文档对于动画的使用做了很多的介绍,不熟悉的小伙伴可以先了解一下. 下面就进入正题啦! 第一个动画示例: 这其实是一个很常见的弹出层效果,鼠标点击按钮切换弹出层的显示,点击其他区域弹出层消失,用javascript绑定事件可能几行代码就搞定了,但是vue.js的状态驱动模式和j…

欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:陈纬杰 背景 对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见的动画效果都封装起来了,非常实用.但是有时候在开发中,仅仅只是需要某一两个动画效果,把整个CSS文件都引入,这样不是太好. 需求就出现了,能不能有一个工具可以直接预览Animate.css对应的动画效果,并且生成对应的动画代码呢? 作为一个UI开发,平时跟Chrome浏览器打交道最多,于是就整了一个…

最近在某个项目中用到了Vue.js,从上手做开发到项目发布,一步步踩了不少坑.本文试图总结过去一个多月使用Vue.js中的一些经验,也算是一点心得体会吧,拿出来与大家分享,欢迎多多交流. Vue.js简介 Vue.js is a JavaScript framework for building astonishing web applications. Vue.js is a JavaScript library for creating web interfaces. Vue.js is a…

人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠人玫瑰,手留余香呢?终于时候到了...哈哈 首先容我吐槽一番,在大前端的背景下各种框架层出不穷,相对的各种打包工具也应用而生,要说最火的就是webpack了,用户多所以社区相对活跃,团队维护,网上也有各种各样的问题可以轻易搜到从而解决自己的遇到的各种奇葩问题,所以90%的项目都会采用webpack来…

欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者:曾柏羲 导语 入职接到的第一个需求是实现一个关于K歌实体售卖的ERP系统,管理系统过去做过不少,这次打算换个姿势,基于时下正热但早已不新鲜的Vue 2.0技术实现.本文首先对Vue的相关技术进行简单介绍与分析,接着总结开发实践(主要描述 Vuex 实践)过程中的流程规范,并记录在此过程中遇到的问题与关键点,最后做出一点实践的总结与思考. Vue 图:vue 2.0 简介 众所周知,如今的前端框架/解决方案数不胜数,从最初的Backb…

马上过年了,最近工作不太忙,再加上本人最近比较懒,毫无斗志,不愿学习新东西,或许是要过年的缘故(感觉像是在找接口). 就把前一段时间做过的vue项目,进行一次完整的总结. 这次算是详细总结,会从项目的搭建,一直到最后的服务器上部署. 废话不多说了.干货直接上. 一.   必须node环境,   这次就不写node环境的安装了.过两天我会写个node环境的安装随笔. 二.  node环境配好后.开整vue. 1. 安装vue脚手架. npm install -g vue-cli 2.  用脚手架搭…

Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(下篇--多页面VueSSR+热更新Server) @(HTML/JS) 这是Vue多页面框架系列文章的第二篇,上一篇(纯前端Vue多页面)中,我们尝试从webpack-simple原型项目改造为一个多页面的Vue项目.而这里,我们继续往前,尝试把Vue多页面改造为Nodejs直出.由于步骤较多,所以本文片幅较长. 本文源代码:https://github.com/kenkozheng/HTML5_research/tr…

前言 我的目标是写一个非常详细的关于diff的干货,所以本文有点长.也会用到大量的图片以及代码举例,目的让看这篇文章的朋友一定弄明白diff的边边角角. 先来了解几个点... 1. 当数据发生变化时,vue是怎么更新节点的? 要知道渲染真实DOM的开销是很大的,比如有时候我们修改了某个数据,如果直接渲染到真实dom上会引起整个dom树的重绘和重排,有没有可能我们只更新我们修改的那一小块dom而不要更新整个dom呢?diff算法能够帮助我们. 我们先根据真实DOM生成一颗virtual DOM,当…

一.前言 在之前的前端开发中,为了实现我们的需求,通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素,得益于 Jquery 对于 DOM 元素优异的操作能力,我们可以很轻易的对获取到的 DOM 元素进行操作.但是,当我们开始在前端项目中使用 Vue 这类的 MVVM 框架之后,对于 DOM 的操作我们就应当完全的交给框架,而我们只需要关注于数据.难道,在 Vue 中就不能手动获取到页面上的 DOM 元素了吗,答案当然是可以手动获取到 DOM 元素的,在 Vue 中我们可以通过…

在Vue.js 中,如果网络请求使用 axios ,并且使用了 ElementUI 库,那么一般来说,文件上传有两种不同的实现方案: 通过 Ajax 实现文件上传 通过 ElementUI 里边的 Upload 组件实现文件上传 两种方案,各有优缺点,我们分别来看. 准备工作 首先我们需要一点点准备工作,就是在后端提供一个文件上传接口,这是一个普通的 Spring Boot 项目,如下: SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/…

一.前言 在上一章的学习中,我们继续学习了 Vue 中组件的相关知识,了解了在 Vue 中如何使用组件的 data.prop 选项.在之前的学习中有提到过,组件是 Vue 中的一个非常重要的概念,我们通过将页面拆分成一个个独立的组件,从而更好地实现代码复用,使我们的代码更加简洁,容易维护.既然在 Vue 中我们会大量的使用到组件,必定会涉及到组件之间的通信,那么本章我们就来学习,如何实现组件间的数据交互. 学习系列目录地址:https://www.cnblogs.com/danvic712/p/…

一.前言 在上一章的学习中,我们学习了 Vue 中组件的基础知识,知道了什么是组件,以及如何创建一个全局/局部组件.不知道你是否记得,在上一章中,我们提到组件是一个可以复用的 Vue 实例,它与 Vue 实例也只是拥有些许的差异.本章,我们将继续学习组件的相关基础知识,了解 Vue 的组件中的 data.prop 选项的使用. 学习系列目录地址:https://www.cnblogs.com/danvic712/p/9549100.html 仓储地址:https://github.com/Lan…

一.前言 在之前的学习中,我们对于 Vue 的一些基础语法进行了简单的了解,通过之前的代码可以清晰的看出,我们在使用 Vue 的整个过程,最终都是在对 Vue 实例进行的一系列操作. 这里就会引出一个问题,就像我们刚开始学习 C# 的时候把全部的代码一股脑的写到 Main 方法中,现在我们把所有对于 Vue 实例的操作全部写在一块,这必然会导致 这个方法又长又不好理解. 在 C# 的学习过程中,随着不断学习,我们开始将一些相似的业务逻辑进行封装,重用一些代码,从而达到简化的目的.那么,如何在 V…

松哥的书里边,其实有涉及到 Vue,但是并没有详细说过,原因很简单,Vue 的资料都是中文的,把 Vue.js 官网的资料从头到尾浏览一遍该懂的基本就懂了,个人感觉这个是最好的 Vue.js 学习资料 ,因此在我的书里边就没有多说.但是最近总结小伙伴遇到的问题,感觉很多人对前后端分离开发还是两眼一抹黑,所以今天松哥想和大家聊一下前后端分离以及 Vue.js 的一点事,算是一个简单的入门科普吧. 前后端不分 后端模板:Jsp.FreeMarker.Velocity 前端模板:Thymeleaf 前…

一.前言 Vue.React.Angular,当今前端界的三驾马车,作为传统的后端程序员,前端再也不是我们想的那种切切图就可以了,第一次接触的话,先了解了解一些基础的概念. 学习系列目录地址:https://www.cnblogs.com/danvic712/p/9549100.html 仓储地址:https://github.com/Lanesra712/VueTrial/blob/master/docs/Concept.md 二.干货合集 1. Vue.js是什么? Vue (读音 /vju…

一.前言 在上一章中,我们了解了一些在使用 Vue 进行开发中经常会遇到的基础概念,与传统的前端开发不同,Vue 可以使我们不必再使用 JavaScript 去操作 DOM 元素(还是可以用,但是极度不推荐),而这一优秀特性的核心就是 Vue 的指令系统,本章,一起来学习 Vue 的指令系统. 学习系列目录地址:https://www.cnblogs.com/danvic712/p/9549100.html 仓储地址:https://github.com/Lanesra712/VueTrial/…

一.前言 熟悉了 Vue 的指令系统后,在实际开发中,不可避免的会使用到对于事件的操作,如何处理 DOM 事件流,成为我们必须要掌握的技能.不同于传统的前端开发,在 Vue 中给我们提供了事件修饰符这一利器,使我们可以便捷的处理 DOM 事件,本章,一起来学习如何使用事件修饰符来实现对于 DOM 事件流的操作. 学习系列目录地址:https://www.cnblogs.com/danvic712/p/9549100.html 仓储地址:https://github.com/Lanesra712/…

一.前言 前端开发中有三大件:HTML.CSS.JavaScript,在前面的学习中,不管是学习 Vue 的指令系统还是 Vue 的事件修饰符,主要还是针对的是我们在前端开发中的 JavaScript 这一块,而在实际的开发中必定会需要涉及到对于页面布局的设计.即使你采用的是使用第三方的 UI 组件,当我们实际开发中时,还是需要自己写一些样式去满足自己的需求,如何实现在 Vue 中对元素设置样式则是本章学习的重点 学习系列目录地址:https://www.cnblogs.com/danvic71…