vue实战

vue实战（9）：总结二

整理前一段所做的工作内容0.其它vue实战（1）：准备与资料整理vue实战（2）：初始化项目、搭建底部导航路由vue实战（3）：底部导航显示、搭建各模块静态页面、添加登录页页面与路由vue实战（4）：postman
i摸鱼喵·2019-07-15 10:22

vue实战（10）：开发店铺详情（一）

认真学习的样子登录部分完成的比较扑街，本篇开始做店铺的详情页面,而这里的数据使用mock0.其它vue实战（1）：准备与资料整理vue实战（2）：初始化项目、搭建底部导航路由vue实战（3）：底部导航显示
i摸鱼喵·2019-07-15 10:13

Vue实战-菜单栏，商品展示数据交互（8）

上篇我们将菜单栏，商品展示结构完成，本次我们为这两个部分接入数据。菜单栏接入数据导入组件，定义需要的数据格式//导入BScroll滚动组件importBScrollfrom"better-scroll";//导入Food商品页面importFoodfrom"components/Food/Food";exportdefault{data(){//准备需要的数据,初始化组件。return{conta
前端大彬哥·2019-07-13 00:00

从无到有构建vue实战项目（四）

六、webpack的安装和配置为了快速构建vue项目，webpack是一个必不可少的工具，我们先来安装它，附上官网地址：https://www.webpackjs.com/要安装最新版本或特定版本，请运行以下命令之一：npminstall--save-devwebpacknpminstall--save-devwebpack@如果你使用webpack4+版本，你还需要安装CLI:npminstal
啃土豆的菜鸟·2019-07-12 19:00

从无到有构建vue实战项目（三）

四、响应式布局的实现elemnt-ui参考bootatrap提供了响应式布局，附上地址：https://element.eleme.cn/#/zh-CN/component/layout以下是我的布局设计，目前看起来没什么错误：其实就是做了每行总共24个栅格，在不同尺寸的页面上如何分配宽度比例：名称尺寸xs<768pxsm≥768pxmd≥992pxlg≥1200pxxl≥1920px比如这里直接
啃土豆的菜鸟·2019-07-08 21:00

从无到有构建vue实战项目（二）

二、vue项目的初步搭建该项目我采用了当下最流行的vueui框架---element-ui，首先用vue-cli构建一个vue项目:vuecreateeducation然后会出现一系列配置选项，此时一直回车就好：然后进入项目文件夹，输入:npmrunserve出现以上情况，则说明运行成功，此时，在浏览器打开链接http://localhost:8080/，会看到如下界面：然后安装element-u
啃土豆的菜鸟·2019-07-08 09:00

从无到有构建vue实战项目（一）

一、vue的安装首先下载nodehttp://nodejs.cn/download/有两种安装方式安装包安装和二进制文件安装输入以下命令,出现版本提示表示安装成功:node-v10.15.3再下载npm由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入"npm-v"来测试是否成功安装。命令如下，出现版本提示表示安装成功:$npm-v6.4.1如果你安装的是旧版本
啃土豆的菜鸟·2019-07-06 21:00

Vue实战-商品展示切图（7）

上次我们通过设计评价组件这个过程，了解到了组件设计中的良好的习惯，比如，文件夹如何支撑组件，图片，组件路径的存放于设置。本篇我们将继续推进外卖项目—商品页的展示。如图所示，我们可以把商品也面分为两大部分：左侧“菜单栏”；右侧商品展示；goods为当前商品页面的根元素。细化左侧菜单栏我们先来细化class为menu-wrapper的菜单内容。专场热销0早餐0促销产品和热卖产品0主食0超值套餐0小食0
前端大彬哥·2019-06-22 00:00

Vue实战—评价组件的设计与实现（6）

在上篇文章我们将项目头部模块进行了编写与数据渲染。本篇文章我们进一步深入项目设计评价组件。分析页面如图所示，点菜，评价，商家，为导航，我们点击评价的时候，直接跳转评价页面。评价页面由商家评分一栏，评论列表构成，评论列表支持：全部，有图，点评三种筛选。综上我们现在开始设计评论组件：建立组件文件夹1.css图片的存放针对组件引用的图片可能产生变动性，我们将组件内的图片放入组件文件夹内，进行引用。使得组
前端大彬哥·2019-06-19 00:00

Vue实战-头部模块编写（5）

通过上篇我们了解到了vue可以通过axios发送前端请求。我们知道的在发送请求可以在creted（）钩子内，也可以在mounted（）钩子内。本篇我们通过头部模块的编写，将请求到的数据渲染到模块内。当然我们先要准备静态页面：01.分析制作静态页面如图所示，我们可以将整个一个头部模块分为4个部分：·顶部通栏：返回，搜索，拼单，等；·主题内容：餐厅名字·公告：新用户；·背景图片。然后我们依据当前这三块
前端大彬哥·2019-06-18 00:00

Vue实战—项目数据交互-axios（4）

1.axios地址https://github.com/axios/axios2.安装npminstallaxios3.使用1.用在哪？main.js全局2.什么时候用？生命周期：https://cn.vuejs.org/v2/guide/instance.htmlcreated的时候发起异步请求获取数据3.怎么用数据从哪里来：1.美团API接口，优点：贴近工作情形缺点：官方接口申请有门槛，手续繁
前端大彬哥·2019-06-17 00:00

Vue实战—路由轻松设置vue-router（3）

上篇我们说了vue项目的目录设计，本篇我们来学习一下vue路由。路由的作用：在web端路由（route）就是URL到函数的映射，vue的router就像一个容器，分配，处理每一个route到URL中。文档地址：vue路由官方文档https://router.vuejs.org/zh/guide/#html安装：通过node.js安装；npminstallvue-router但是一般情况下在node
前端大彬哥·2019-06-15 00:00

【VUE实战】学习笔记（三）

v-bind指令：作用：用于动态更新HTML上的属性，当数据变化时，就会重新渲染。缩写:v-bind:class=“xxxx”等于:class=“xxxx”绑定class的几种方式：受控方式 点击跳转 切换class ... data:()=>{ return{ url:"http://www.baidu.com", isRed:false， isError：false }; }, 可以看出
天空之蓝钻·2019-06-12 00:00

vue实战（7）：完整开发登录页面（一）

0.其它vue实战（1）：准备与资料整理vue实战（2）：初始化项目、搭建底部导航路由vue实战（3）：底部导航显示、搭建各模块静态页面、添加登录页页面与路由vue实战（4）：postman测试数据、封装
吉吉国王丶·2019-06-09 18:52

vue实战（7）：完整开发登录页面（一）

0.其它vue实战（1）：准备与资料整理vue实战（2）：初始化项目、搭建底部导航路由vue实战（3）：底部导航显示、搭建各模块静态页面、添加登录页页面与路由vue实战（4）：postman测试数据、封装
吉吉国王丶·2019-06-09 18:52

前端vue实战项目结构、常用编辑器vs code 配置

前端vue实战项目结构、常用编辑器vscode配置一、vscode常用插件及配置文件1.Chinese(Simplified)Language中文2.Beautify3.DebuggerforChrome4
MoYoon·2019-06-06 17:03

GitHub Desktop + 码云，基友搭配体验翻倍！

本篇简单整理一个好用的版本管理工具，尤其是GitHubDesktop，超级好用啊，吹爆~0.其它vue实战（1）：准备与资料整理1.GitHubDesktopGitHubDesktop官网下载地址之前有一段时间在捣鼓
i摸鱼喵·2019-05-22 15:30

vue实战（4）：postman测试数据、封装ajax、使用vuex管理状态

vuex,本来想着不慌，用起来，使用的过程中问题还真不少本篇涉及到的内容：---postman测试数据---封装ajax请求函数---封装接口请求函数---使用vuex管理状态---获取首页相关数据0.其它vue
吉吉国王丶·2019-04-30 17:42

2019-04-19 npm install vue-router --save时报错

F:\vue实战\gshop-client>npminstallvue-router--savenpmERR!
流泪手心_521·2019-04-22 09:11

es6数组拓展运算符应用于Vue实战---添加

拓展运算符剩余/拓展运算符也是ES6中一个非常重要的语法，使用3个点（...），后面跟着一个数组，它可以‘展开’这个数组，可以这么理解，数组是存放元素集合的一个容器，而使用拓展运算符可以将这个容器拆开展示，这样就只剩下元素集合，你可以把这些元素集合放到一个数组里面。前段时间在项目开发中查文档的时候总结一个感觉非常棒的写法。因为咱们在项目开放中过程数组的添加用到的非常的多，可以使用拓展运算符进行点击
一号聪明·2019-03-18 14:33

vue实战

vue是目前比较火的一个前端单页框架，简单容易上手一个简化版的项目只需要4个组件即可vue+vue-router+vuex+axiosvue：自身负责全盘内容vue-router：负责页面的切换vuex：负责全局的变量的存储和读取axios：负责和api服务器进行rest接口的交互以下的内容需要有一定前端基础才方便理解前序步骤：使用webpack打包模式来开发vue，没有直接使用引入vue文件的方
栖木之地·2019-03-12 21:41

VUE实战项目-数据转换之道

前言公司的这个项目从去年底启动、至今经历winform版本与当前的VUE两个版本，前后经历不足3个月的时间。从纯技术角度来看，推进速度都很优异。究其原因，大抵我们都是喜欢“偷懒”的程序员，把能封装、能公用的代码尽可能的整合起来。多写一行代码都觉得遭罪。一路懒下来，倒也有所收获。接下来进行一些总结，不求大而全，只求小而精，不积小流无以成江海。数据转换之道今天我要分享的是云仓VUE项目中，快速简单地实
Mr.Simm·2019-02-28 00:00

Vue实战：树形组件

一、展示点击粗体能展开节点：点击“+”，还能插入newstuff节点：还能为没有孩子的节点添加多个子节点，如图为hello节点添加：二、源码index.htmlDocument{{model.name}}{{isOpen?'-':'+'}}+(Youcandoubleclickonanitemtoturnitintoafolder.)letdata={name:'MyTree',children:
我叫白天宇·2019-02-26 11:57

Vue实战：table组件(带搜索，排序)

一、效果二、源码index.htmlDocumentletDemoGrid={template:`{{item|capitalize}}0?'asc':'dsc'">{{item[key]}}`,props:['data','columns','filterKey'],data(){letsortOrders={};this.columns.filter((item)=>{sortOrders[i
我叫白天宇·2019-02-25 18:26

微信小程序----Gallery Table（图文表格）（flex布局实现MUI的图文表格）

效果二维码效果图WXMLVUE实战ES6学习之路CSS实战VUE学习之路WXSS.tui-row{padding:5px;display:-webkit-flex;display:flex;align-items
Rattenking·2019-02-22 15:05

vue实战-vue父子组件通信方式汇总

vue项目的一大亮点就是组件化。使用组件可以极大地提高项目中代码的复用率，减少代码量。但是使用组件最大的难点就是父子组件之间的通信。子通信父我是父组件importChildrenfrom'./children.vue'exportdefault{data(){return{msg:'hello,children'}},methods:{//参数就是子组件传递出来的数据parentSay(msg){
我的小熊不见了·2019-02-20 18:50

vue实战记录（五）- vue实现购物车功能之商品总金额计算和单选全选删除功能

vue实战，一步步实现vue购物车功能的过程记录，课程与素材来自慕课网，自己搭建了express本地服务器来请求数据作者：狐狸家的鱼本文链接：vue实战-实现购物车功能（五）GitHub：sueRimn
狐狸家的鱼·2019-01-31 17:00

记：第一次Vue实战应用

学习时使用demo练习，现在是第一次在实战中使用Vue，这是一个单页面应用。签到信息验证实现的效果如下：功能点：姓名非空验证手机号格式验证错误提示http请求后端数据传统的实现方式（html+css+jquery）签到信息验证姓名手机号提交杭州哈智机器人有限公司提供技术支持$(function(){$("#errorMsg").html("");})$("input[name='userName'
Irene1991·2018-11-16 17:23

详解Vue实战指南之依赖注入(provide/inject)

案例UI美眉说咱家的选项菜单太丑了，小哥哥能不能美化一下呀，洒家自然是说小意思啦~自定义一个select组件，soeasy~简单粗暴型：option作为数据进来就ok啦。然后发现下列问题:key-value，不是所有的接口都是id-nameoption要disabled怎么办？option存在几种情况怎么办？...回头看看原生的写法是这样：VueReactAngular还要加个el-option组
Chendye·2018-11-13 09:30

vue实战(8)——微信二次分享及自定义菜单隐藏设置

一、引入js文件二、微信二次分享(SDK1.2.0)mounted(){this.shareWechat();},methods(){shareWechat(){letself=this,url_temp=window.location.href.split("#")[0];axios.post(global.api+"business-service/wechat/sign",{webUrl:u
wayne1125·2018-09-29 11:44

vue实战(7)——微信公众号开发基本配置（服务号）

1、绑定域名先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。备注：登录后可在“开发者中心”查看对应的接口权限。2、引入JS文件在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.4.0.js如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq
wayne1125·2018-09-29 11:31

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十三║Vue实战：Vuex 其实很简单

前言哈喽大家周五好，马上又是一个周末了，下周就是中秋了，下下周就是国庆啦，这里先祝福大家一个比一个假日嗨皮啦~~转眼我们的专题已经写了第23篇了，好几次都坚持不下去想要中断，不过每当看到群里的交流，看到博客下边好多小伙伴提出问题，我又燃起了斗志，不过这两天感冒了，所以更新的比较晚，这里也提醒大家，节日要照顾好自己哟~~~，好多人说我写的上不了台面，哈哈这里表示赞同，本系列的宗旨就是，给大家一个学习
baidu_35726140·2018-09-14 16:00

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十三║Vue实战：Vuex 其实很简单

前言哈喽大家周五好，马上又是一个周末了，下周就是中秋了，下下周就是国庆啦，这里先祝福大家一个比一个假日嗨皮啦~~转眼我们的专题已经写了第23篇了，好几次都坚持不下去想要中断，不过每当看到群里的交流，看到博客下边好多小伙伴提出问题，我又燃起了斗志，不过这两天感冒了，所以更新的比较晚，这里也提醒大家，节日要照顾好自己哟~~~，好多人说我写的上不了台面，哈哈这里表示赞同，本系列的宗旨就是，给大家一个学习
老张的哲学·2018-09-14 15:00

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十二║Vue实战：个人博客第一版(axios+router)

前言今天正式开始写代码了，之前铺垫了很多了，包括6篇基础文章，一篇正式环境搭建，就是为了今天做准备，想温习的小伙伴可以再看看《Vue基础入门+详细的环境搭建》，内容很多，这里就暂时不复习了，今天呢，咱们就说说用昨天创建的空项目来搭建一个简单的个人博客系统，首先先分析下整体工作流程，然后再动手写代码，主要涉及到axios和vue-router的相关概念，好啦，开始今天的讲解。零、要完成的右下角褐色的
老张的哲学·2018-09-13 15:00

vue实战(4)——网站统计之——友盟&百度统计

一、友盟统计首先进入到网站统计（U-Web）,进入立即使用添加站点已添加站点列表进入到列表中设置中站点设置统计代码添加到相应页面，即可在统计报表中看到相应数据在单页面应用vue项目中只能在index.html或App.vue中添加统计代码constscript=document.createElement('script')script.type='text/javaScript'//vartex
wayne1125·2018-09-11 23:48

Node+Vue实战项目

一、Node+Vue实战项目1.1创建Node项目、Vue项目mkdirclasswebcdclassweb/expressservervueinitwebpackvueclient.
林飞的梦呓·2018-07-31 23:09

mpvue实战-手势滑动导航栏

写点东西记录一下美好时光，上周学习了一下通过mpuve开发微信小程序，看完文档，就准备撸起袖子加油干的时候，一开始就被支持手势滑动的导航栏给搞懵逼了。求助一波百度和谷歌未果后，只能自己动脑动手！为了给像我一样的小菜鸟，提供一下思路，就记录一下吧！可以优化的地方，请大神不吝赐教。1.mpvue是什么？额，这个还是直接看文档：mpvue官方站点2.效果预览不耽误大神时间，没什么亮点，直接上效果图，有兴
hellotim·2018-07-26 13:00

vue.js + webpack工程搭建

unexpectedtabcharacter问题：解决方法3.expectedindentationof2spacesbutfoundtab报错：解决方法4.webpack+vueli打包生成资源相对引用路径与背景图片的正确引用：方法5.Vue
qq_35149546·2018-05-26 20:11

vue实战_从头开始搭建vue工程

写在前面：vue工程入口文件分析/index.html,/src/main.js,/src/APP.vue/index.html文件示例：Juicyjquery.min.js>tinymce/tinymce.min.js>index.html文件示例/src/App.vue文件示例exportdefault{name:'app'};app.vue一个简单的main.js示例（通过vueinitwe
weixin_30404405·2018-04-03 11:00

Vue的轮播图组件实现方法

今天在上慕课老师fishenal的vue实战课程的时候，有一个轮播图组件实现，在跟着做的时候，自己也踩了一些坑。此外，在原课程案例的基础上，我加入了不同方向的滑动功能。
红帽子小伙伴·2018-03-03 08:13

Vue实战--v-bind以及动态绑定Class和style

v-bind通常用来绑定属性的，格式是v-bind：属性名="值"，简写:属性名="值"之前我们知道v-bind主要就是动态更新DOM的属性的，class作为DOM的属性当然也不例外，那么v-bind怎么动态更新class呢，分为三种方法:对象语法和数组语法，还有就是变量语法：变量语法：v-bind：class="变量"，变量形式,这里的变量的值，通常是在css定义好的类名；数组语法：v-bind
初心鸿鹄·2017-11-29 13:54

Vue实战之vue登录验证的实现代码

最近一直在撸一个给大学生新生用的产品，在撸的时候有时候会发现自己力不从心，是不是我的能力下降，是不是我该放弃我的最热爱的事业了？这对我的心灵造成了巨大的伤害，所以我决定向苍老师起誓一定练好我这双手――好好写代码（想多的同学赶紧去面壁5秒钟再过来往下看）～～～我做的这个产品是课堂在线编程教学工具，由于涉及到商业问题，这里就不能和大家分享了，但是我可以把里面我认为很牛（zhuang）X（bi）的技术和
杀手·2017-10-31 10:05

【mock】后端不来过夜半，闲敲mock落灯花 （mockjs+Vuex+Vue实战）

mock的由来【假】赵师秀：南宋时期的一位前端工程师诗词背景：在一个梅雨纷纷的夜晚，正处于项目编码阶段，书童却带来消息：写后端的李秀才在几个时辰前就赶往临安度假去了,！此时手头仅有一个简单的数据接口文档的赵师秀慨叹一声："好吧，那还是我自己先模拟一下后端的接口吧"_(:3」∠)_再后来，就有了那句千古名句啦~~（为了表示对赵师秀先生的歉意，文末我将附上原文）如果我说这就是前后端分离思想和mock.
外婆的彭湖湾·2017-08-06 16:00

Vue实战之后台管理系统（二）

接着上一篇，接下来要完成的是登陆注册页面，这两个页面在流程上很相近，这里主要以登陆页面来做说明．1.创建相关文件夹及文件并进行配置在src目录下创建一个view文件夹，之后所写的和页面相关的vue组件都放在此目录下，为了方便引用，要在webpack.base.config.js的resolve中进行配置．这里为了便于维护，还可以在view下给每一个模块新建一个文件夹，因此这里我在view目录下还创
FormulaRoom·2017-08-02 17:15

Vue实战之后台管理系统（一）

这个系列是手把手教大家从零开始写一个后台管理系统，使用的技术：vuejs+vue-router+axios+vuex+element-ui+scss。1.开发环境搭建开始写代码前准备工作要做好，包括vue开发环境，调试工具的安装，webstorm的配置，这个之前的文章里有写过，这里就不再重复。window系统的开发环境搭建：http://blog.csdn.net/formularoom/arti
FormulaRoom·2017-07-31 21:22

Segmentfault 内容精选 - 2017 年第 30 周

【讲座】Vue实战：打造属于你的博客发布系统后端性能百万/s：腾讯轻量级全局流控方案详解用nginx访问日志记录mysql数据库中的用户idMySQL索引专题-认识索引你不知道的10条SQL技巧【讲座】
SegmentFault_Offical·2017-07-21 19:41

Vue实战（五）网络层拦截器与全局异常信息展示

本文是Vue实战系列的第五篇文章，主要介绍Falcon项目中网络层拦截器与全局异常信息展示。
老邢Thierry·2017-07-19 12:29

Vue实战（一）Falcon计划

本文是Vue实战系列的开篇。
老邢Thierry·2017-06-05 21:46

Vue实战&&项目开发

模块化和组件化模块化和组件化的好处是提高代码的复用性，可维护性和扩展性准备工作Vue-resource和Ajax进行通信Webpack构建工具ES6+eslinteslint：对ES6的代码风格检查工具，规范ES6的代码规范和静态语法检测，它的好处就是可以规范一个团队的代码保持相近的风格，这样有助于阅读和维护近年来前端开发趋势旧浏览器逐渐被淘汰，移动端的需求量大大增加。前端交互越来越少，功能越来越
西巴撸·2017-05-02 22:44
上一页 2 3 4 5 6 7 8 9 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他