VUE实战

Vue实战—实现商品详情页（12）

这篇我们来实现商品详情页面：在首页点击某一商品会展示商品的详细信息。如下图所示：创建good组件创建一个组件goodtransition来定义页面展示的形式；使用v-show与变量showFlag来控制显示与隐藏，ref配合BScroll控制页面的滑动；现在结构内出现的数据的引用我们在script内进行处理。{{food.name}}{{food.month_saled_content}}￥{{f
前端大彬哥·2019-08-31 00:00

Vue实战案例(form表单动态添加组件)

  今天我们来给大家介绍下在Vue开发中我们经常会碰到的一种需求场景，就是在form中我们需要动态的增加组件模块，效果如下:  这种效果实现其实就是对v-for指令的一种使用，组件不是必须的，只是为了将这部门的代码我们单独的拎出来，便于查看，好了，话不多说，我们来看下具体怎么来实现。案例效果的实现1.创建组件  首先我们创建一个单独的组件，同时在template中定义我们的表单元素，此处使用的是e
波波烤鸭·2019-08-30 00:49

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

十四、Vuex的使用Vuex是什么？Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex也集成到Vue的官方调试工具devtoolsextension，提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试功能。简单点理解，就是凡是将数据用状态管理模式来存储，在用到该数据的地
啃土豆的菜鸟·2019-08-28 12:00

Vue实战—购物车详情页面的实现（11）

上次我们为商品分类菜单添加了显示购物数量，这篇我们继续推进项目，来实现购物车的详情页面，在开始之前我们先看它在页面中的样子：如上所示，此页面包含了购物列表，而它由商品名称，单价，增减商品功能构成，增减商品功能我们在商品列表中实现过，那么我们现在可以进行复用。搭出购物车结构我们将购物车底部构建出来，0}">老情况，在templete模板下的shopcart-wrapper内完成底部购物车一栏：1co
前端大彬哥·2019-08-17 00:00

Vue实战—商品分类菜单数量提示（10）

如上所示，这篇我们将商品分类菜单显示数量的提示完善，是软件更加易于使用。好先让我回顾一下上节课的内容，Goods组件，数量提示功能最终需要在Goods组件内显示。{{container.tag_name}}{{item.name}}{{calculateCount(item.spus)}}//通过i标签展示数量{{item.name}}{{food.name}}{{food.description
前端大彬哥·2019-07-25 00:00

vue实战（3）：底部导航显示、搭建各模块静态页面、添加登录页页面与路由

本次整理内容---底部导航显示-----给谷歌浏览器安装vue调试插件---各模块的静态页面搭建完成---添加登录页静态页面与路由0.其它vue实战（1）：准备与资料整理vue实战（2）：初始化项目、搭建底部导航路由
i摸鱼喵·2019-07-22 17:47

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

十、徒手撸一个vue下拉左侧二级导航先附上最终效果图：vue代码：探索{{list.message}}{{item.subTitle}}事件：methods:{handleSelect:function(){},//鼠标覆盖显示下拉内容addDropdownContent:function(){this.activeDisplay="block";returnthis.activeDisplay;
啃土豆的菜鸟·2019-07-21 17:00

Vue实战—商品控件与购物车联动（9）

本篇我们将构建商品控件与购物车联动。商品控件商品控件的结构编写在商品组件的标签内完成项目结构，以及数据，事件的绑定，与判断逻辑的书写。{{container.tag_name}}{{item.name}}{{item.name}}{{food.name}}{{food.description}}{{food.month_saled_content}}{{food.praise_content}}￥
前端大彬哥·2019-07-20 00:00

Vue实战教程之仿肯德基宅急送App

Vue学习有一段时间了，就想着用Vue来写个项目练练手，弄了半个月，到今天为止也算勉强能看了。由于不知道怎么拿手机App的接口，并且KFC电脑端官网真的...一言难尽，所以项目所有数据都是我截图然后写在EasyMock里的，有需要的同学可以自取首页商品页外卖页技术栈vue+webpack+vuex+axios文件目录│App.vue│main.js│├─assets│logo.png│├─comp
三口木·2019-07-19 13:31

vue实战（1）：准备与资料整理

磨刀不误砍材工声明：本项目为照着尚硅谷vue视频仿写0.其它vue实战（1）：准备与资料整理vue实战（2）：初始化项目、搭建底部导航路由vue实战（3）：底部导航显示、搭建各模块静态页面、添加登录页页面与路由
i摸鱼喵·2019-07-15 10:37

vue实战（5）：总结一

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

vue实战（8）：完整开发登录页面（二）

0.其它vue实战（1）：准备与资料整理vue实战（2）：初始化项目、搭建底部导航路由vue实战（3）：底部导航显示、搭建各模块静态页
i摸鱼喵·2019-07-15 10:31

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
上一页 3 4 5 6 7 8 9 10 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他