Vue.js

本周总结 细看项目，感觉还需要加很多东西，为了整个项目的完整性，用户更好的体验感，我们还得继续干！ VUE它已经拖太久了，我准备转战期末复习； 我大概总结了一个文档，怎么说呢今天（周日）早上，感觉不太方便去看，所以，还需要完善完善，用于下午考核； 期末复习太艰难了，不行不行，得挤出时间，不要再去做那些没必要做得事了。 下周规划 学习目标 项目 期末复习（列了一个大概的计划） 学习任务 项目抓紧时间完成，一定要抓紧时间 根据刚刚列的期末复习计划表，一步一步执行 学习时间 周一至周五无课时间 周六周日 结束语 期末考试马上就要来了，项目也还没有完工，双面夹击，好好努力！ 来源： oschina 链接： https://my.oschina.net/u/4380417/blog/4831616

从0开始，构建前后端分离应用 导航 前端工程化（一）---工程基础目录搭建 前端工程化（二）---webpack配置 前端工程化（三）---Vue的开发模式 通过前两部分的总结，项目具备了一个可以运行的前端工程。接下来的工作就是具体的功能开发了，我选择了Vue作为前端的框架，使用iView作为UI库。 建议在使用Vue开发之前一定要通读 Vue官网教程 对Vue中的基本概念及整体的思想有一个基本的认识。最好的教程莫过于官方文档了，不要上来就各种百度，从一些只言片语中摸索，这样会少走弯路。 个人感觉使用Vue进行开发，首先要改变以往前端开发中形成的思维模式。对于页面元素的操作，由原有的dom操作转换为数据操作。 dom操作的事情，Vue已经替我们干了，我们只需要关注数据就可以了。页面元素同数据进行了绑定（实际上是Vue模板的元素，只不过Vue的设计拥抱原生的html语法，看上去模板的元素与原生的html元素长得一样），当数据变化的时候，dom也随之变化。 1、Vue的开发模式：定义一个扩展名为.vue的文件，其中包含三部分内容，模板、js、样式 < template lang ="html" > </ template > < script > export default { } </ script > < style lang ="css" scoped > </ style >

年底了，总结下今年用到的一些有意思的《js轮子》（只是大概列出些比较有意思的库，每个标题都是超链接，可点击自行查阅） 希望能对您有用！ 如有意思的 轮子 可以在评论列出一起讨论下 color ==功能==：JavaScript库，用于不可变的颜色转换和对CSS颜色字符串的支持。 npm install color var color = Color('#7743CE').alpha(0.5).lighten(0.5); console.log(color.hsl().string()); // 'hsla(262, 59%, 81%, 0.5)' console.log(color.cmyk().round().array()); // [ 16, 25, 0, 8, 0.5 ] console.log(color.ansi256().object()); // { ansi256: 183, alpha: 0.5 } uuidjs ==功能==：UUID.js-JavaScript的RFC兼容UUID生成器 // Create a version 4 (random number-based) UUID object var objV4 = UUID.genV4(); // Create a version 1 (time-based) UUID object var objV1

蚂蚁金服的design Vue表格 动态合并代码详情! 你好！我们本次合并表格是实现的列 合并 rowSpan 在上代码 之前 我们先讲一下表格 Ui框架： 1、Vue 2、Ant design Vue 表格： 1、行是 colSpan 2、列是 rowSpan design 表格的title 是不计算 索引的 ！ 我们开始贴图上代码，全部代码在文章末尾！ 完成效果： 举例：我们以红框选中列做相同数据合并 1、Vue 展示 Ant table 代码 2、展示 data 数据 3、vue 导出代码 4、methods 方法里面实现 rowSpan 1、 注意 这里 key 是传值 声明方法的时候可以后写 2、使用的时候 在 mounted 里面调用即可 5、customRender 实现合并 代码部分： < template > < a-table :columns = "columns" :data-source = "data" bordered > < template slot = "name" slot-scope = "text" > < a > { { text } } < /a > < /template > < /a-table > < /template > < script > const data = [ { key: "1" , name: "张三" ,

1.介绍webpack webpack是模块打包机，宗旨是一切皆模块。通过入口文件解析打包成bundle.js文件，通过loader转换不能识别的less,sass,图片,.vue等文件，通过plugin扩展webpack功能。 module:编写源代码，export导出的模块, bundle:打包出来的文件 chunk:bundle分解出来的，通常和bundle是一对一的关系，但也不总是。输出的时候可以更改chunkfilename,每一个chunk有它的chunkid.一个chunk，也可以包括多个module 2.升级webpack4 安装npm-check-updates文件，更新pakage.json文件 删除node_modules文件和pakage-lock.json文件 重新安装webpack-cli（因为webpack4中webpack-cli和webpack分成两个npm包 ） babel-core报错，安装回babel-loader7.1.5 extract-css-plugin更新到@next版本(或者使用mini-css-extract-plugin推荐使用，两者区别，前者会把所有css文件打包到一个app.css文件，后者会依据懒加载方式拆分，这样页面css可以和js一样使用按需加载) mini-css-extract-plugin使用注意修改： /

不知道大家有没有遇到过这个问题，当我们给data里边声明或者已经赋值过的对象或者数组，添加新的属性时，如果更新此属性的值是不会动态更新视图的。 $set 看以下实例： 我们开始给drug_list追加一个新的属性‘edit_select’，默认所有的编辑状态为false，当我们点击的时候，把当前点击的编辑状态置为true 作者：_conquer_ 链接：https://www.jianshu.com/p/c457cfe7d713 来源：简书 简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。 <div id="box"> <div v- for ="drug_item in drug_list" @click="choose(drug_item)"> <a :class="{pressed:drug_item.edit_select}"></a> <span>{{drug_item.drug_common_name}}{{drug_item.edit_select}}</span> </div> </div> <script> var vm = new Vue({ el: '#box' , data:{ drug_list:[ {drug_common_name: "辛伐他汀片",drug_count: "1" }, {drug_common_name:

Python实战社群 Java实战社群 长按识别下方二维码， 按需求添加 扫码关注添加客服 进Python社群▲ 扫码关注添加客服 进Java社群 ▲ 作者丨前端章鱼猫 来源丨前端GitHub（ID：FrontEndGitHub） 今天给大家带来的是 几个大厂的前端代码规范 。 前端代码规范 代码千万行，安全第一行；前端不规范，同事两行泪。 腾讯 包含内容也挺多的： PC端专题 ：快速上手、文件目录、页面头部、通用title、通用foot、统计代码、兼容测试 移动端专题 ：快速上手、文件目录、页面头部、REM布局、通用foot、统计代码、分享组件、兼容要求 双端官网 ：快速上手、页面跳转 http://tgideas.qq.com/doc/index.html 不过里面也有一些内容是针对其业务的，并不通用。 京东 对比腾讯的代码规范，我更推荐凹凸实验室的代码规范，比较齐全。 HTML规范 基于W3C、苹果开发者等官方文档，并结合团队日常业务需求以及团队在日常开发过程中总结提炼出的经验而约定。 图片规范 了解各种图片格式特性，根据特性制定图片规范，包括但不限于图片的质量约定、图片引入方式、图片合并处理等。 CSS 规范 统一团队 CSS 代码书写和 SASS 预编译语言的语法风格，提供常用媒体查询语句和浏览器私有属性引用，并从业务层面统一规范常用模块的引用。 命名规范 从 “目录命名

首先，先看我个人的项目结构。 这个webapi项目是专门作为图片上传的业务处理，而其中分为两个控制器：单图片上传和多图片上传。在接下来的内容主要还是针对单文件上传，对于多文件的上传，我暂且尚未研究成功。 其中pictureoptions类，由于我把关于图片上传相关的配置项（保存路径、限制的文件类型和大小）写在了配置文件中，所以接下来会通过依赖注入的方式，注入到这个类中 接下来，正式开工 第一步，配置文件的设置 " PictureOptions " : { " FileTypes " : " .gif,.jpg,.jpeg,.png,.bmp,.GIF,.JPG,.JPEG,.PNG,.BMP " , " MaxSize " : 10485760 , " ImageBaseUrl " : " G:\\dotnet\\imageServer\\evaluate " } 然后在项目根目录下新建PictureOptions类 1 public class PictureOptions 2 { 3 /// <summary> 4 /// 允许的文件类型 5 /// </summary> 6 public string FileTypes { get ; set ; } 7 /// <summary> 8 /// 最大文件大小 9 /// </summary> 10 public int

上传文件就按照element官方文档就可以实现上传：代码如下 <el- upload :action="#" :before-upload="beforeUpload" :auto-upload="true" :multiple="false" ref="newupload" accept=" application/vnd.openxmlformats- officedocument.spreadsheetml.sheet" //上传的文件格式 > <el-button size="small" type="primary">上传文件</el-button> </el-upload> ============js部分=================== beforeUpload (file) { let fd = new FormData() fd.append('excelFile', file) // 传文件 // fd.append('srid', this.aqForm.srid) // 传其他参数 this.$http.post(url, fd).then(res => { console.log('文件上传成功') }) 上传图片和图片的格式，大小，宽高校验 <el- upload class ="avatar-uploader" accept ="image

通过自己所学的这段时间，利用空余时间，使用vue3.0脚手架搭建的一个关于后台的管理模板，所实现功能也是模仿一个后台的界面，数据分为两种存放，一种是直接存储到mlab,这里的数据是存放这登录注册，只有注册了自己的账号才能访问到页面，另一些数据直接存放在easy-mock里， 源码地址: https://github.com/MrZHLF/vue-admin 自己需要搭建vue3.0的脚手架，在这里就不用讲关于vue3.0的脚手架怎么搭建。vue3.0脚手架需要node版本10以上，这样的话，可以使用nvm来管理自己的node版本，直接通过官网 https://github.com/coreybutler/nvm-windows/releases 。通过下载包进行安装，然后环境配置就可以使用了 比例安装 nvm install 10.10.0 node10的版本和 nvm install 10.14.2两个版本 当我们切换的是可以使用 nvm use 10.10.0，这样就切换到10.10.0的版本了 一写登录注册的数据，是使用node+mongodb去完成编写的，登录注册的数据存放到mlab里面 效果展示 相关技术 　　1.使用vue3.0最新脚手架搭建环境 　　2.axios:数据请求 　　3.element-ui:基于vuejs2.0的ui组件库。 　　4.vuex:是一个专为