大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不能容易太多.下面就手把手带您一步步拨开这个案例的层层迷雾. 实现步骤如下: api构建部门和员工信息接口,vuex全局存放部门list和员工list数据信息.api: export default { getEmployeeList () { return { returncode: , messa…

最近一直在学习Vue,基本的文档看完后就需要进行具体的项目进行练手了,本系列文章主要是将我学习过程记录下来,和大家一起学习交流. 我在git上找到了一个淘票票的Vue项目,项目地址: https://github.com/canfoo/vue2.0-taopiaopiao,大家喜欢的话可以给作者点个fork. 看了下项目的代码,然后决定自己在山寨一下这个项目,从零开始自己搭建下. 第一步就是开始进行项目的初始化了,这里使用了Vue的脚手架,Vue-cli进行项目的基础代码结构搭建.由于使用了vu…

我们继续前两节的开发.本节教程实现的效果如下: 效果很简单,但是实现起来却要用到Vue的很多知识,下面我们将一步一步的实现这个效果. 首先这些城市的信息都是从后台的server里面获取的,所以我们需要一个后台,后台的代码可以从 https://github.com/EzrealDeng/Taopiaopiao里面的server 文件夹获取,这个server端具体怎么实现的我们暂时不用关心,只需要知道这是一个可以返回我们需要的数据的后台服务即可. 下载完后进入文件夹执行: npm run star…

上一章节我们已经把项目的初始化工作完成了,接下来我们再来进行具体的代码编写.这一节我们将完成如下的页面. 我们在src/目录下新建一个views文件夹,存放我们的主要页面文件.目录结构如下: cinema.vue如下: <template> <div> cinema </div> </template> movie.vue如下: <template> <div> movie </div> </template>…

一.Vue.js是什么 简单小巧的核心,渐进式技术栈,足以应付任何规模的应用. 简单小巧指的是Vue.js 压缩后大小仅有17KB 所谓渐进式(Progressive)就是你一步一步,有阶段性地来使用Vue.js,不必一开始就使用所有的东西. 使用Vue.js可以让Web开发变得简单,同时也颠覆了传统前端开发模式. 二.MVVM模式 与知名前端框架Angular.Ember 等一样,Vue.js在设计上也使用MVVM(Model-View-View-Model )模式. MVVM模式是有经典的软…

Vue有多优秀搭配全家桶做项目有多好之类的咱就不谈了,直奔主题. 一.Vue 系列一已经用vue-cli搭建了Vue项目,此处就不赘述了. 二.Vue-router Vue的路由,先献上文档(https://router.vuejs.org/zh-cn/). 路由在全家桶里面定位是什么呢,创建单页应用!简单!我们知道Vuejs是一系列的组件组成应用,既然是组件那么就需要组合起来,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们! 我们一般在…

前言 在前面两篇文章中已经把基础工作环境构建完成,也已经把后台核心的登录和权限完成了,现在手摸手,一起进入实操. Element 去年十月份开始用vue做管理后台的时候毫不犹豫的就选择了Elemen,那时候vue2 刚发没多久,市面上也没有很多其它的vue2的ui框架.虽然Element也有很多的不足,前期的bug也不少,但我还是选择了它,说一下我选择Element的原因吧: 有大厂背书 : 虽然核心开发只有三个人,但至少不用担心哪天就不维护,带着小姨子跑路了. 持续迭代 : Element发版…

豆宝社区项目实战教程简介 本项目实战教程配有免费视频教程,配套代码完全开源.手把手从零开始搭建一个目前应用最广泛的Springboot+Vue前后端分离多用户社区项目.本项目难度适中,为便于大家学习,每一集视频教程对应在Github上的每一次提交. 项目首页截图 代码开源地址 前端 后端 视频教程地址 视频教程 前端技术栈 Vue Vuex Vue Router Axios Bulma Buefy Element Vditor DarkReader 后端技术栈 Spring Boot Mysql…

3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v-if的指令,帮助我们完成判断的模板处理. <div id="app"> <h1 v-if="ok">Yes</h1> <h1 v-else>No</h1> </div> <!-- 当ok为tr…

前言 做这个 vueAdmin-template 的主要原因是: vue-element-admin 这个项目的初衷是一个vue的管理后台集成方案,把平时用到的一些组件或者经验分享给大家,同时它也在不断的维护和拓展中,比如最近重构了dashboard,加入了全屏功能,新增了tabs-view等等.所以项目会越来越复杂,不太适合很多初用vue的同学来构建后台.所以就写了这个基础模板,它没有复杂的功能,只包含了一个后台需要最基础的东西.vueAdmin-template 主要是基于vue-cli w…