vue el-steps 一个step展示多个数据

Vue项目中实现tab栏和步骤条的数据联动

也就是tab栏切换步骤条随之变化 <template> <div>  <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-br

基于Vue开发的门户网站展示和后台数据管理系统

基于Vue的前端框架有很多,这几年随着前端技术的官方应用,总有是学不完的前端知识在等着我们,一个人的精力也是有限,不可能一一掌握,不过我们学习很大程度都会靠兴趣驱动,或者目标导向,最终是可以以点破面,逐步掌握各种前端知识的.本篇随笔主要以实际应用场景为例介绍一些Vue前端技术的拓展,供大家参考学习.

用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维护成本更加的适合,而且最近看到Apache对react的相关许可限制:这里不讨论react和vue的对比哪个好,技术框架没有最好的,只有适合项目才是最好的. 进入主题....... 组件,是vue的核心之一. 我们可以把页面各个子模块看成一个组件,可以独立拆分出来.这样不仅维护变得简单了,而且代码复

vue组件的一个总结

用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维护成本更加的适合,而且最近看到Apache对react的相关许可限制:这里不讨论react和vue的对比哪个好,技术框架没有最好的,只有适合项目才是最好的. 进入主题....... 组件,是vue的核心之一. 我们可以把页面各个子模块看成一个组件,可以独立拆分出来.这样不仅维护变得简单了,而且代码复

Vue向后端请求课程展示

1.Vue结构 App.vue <template> <div id="app"> <router-link to="/index">首页</router-link> <router-link to="/course">课程</router-link> <router-link to="/micro">微职位</router-link&g

前端框架之Vue(1)-第一个Vue实例

vue官方文档知识储备 es6语法补充 let 使用 var 声明的变量的作用域是全局. { var a = 1; } console.info(a); 例1: var arr = []; for (var i = 0; i < 10; i++) { arr[i] = function(){ console.info(i); } } arr[6](); var arr = []; for (let i = 0; i < 10; i++) { arr[i] = function(){ cons

vue的第一个commit分析

为什么写这篇vue的分析文章? 对于天资愚钝的前端(我)来说,阅读源码是件不容易的事情,毕竟有时候看源码分析的文章都看不懂.每次看到大佬们用了1-2年的vue就能掌握原理,甚至精通源码,再看看自己用了好几年都还在基本的使用阶段,心中总是羞愧不已.如果一直满足于基本的业务开发,怕是得在初级水平一直待下去了吧.所以希望在学习源码的同时记录知识点,可以让自己的理解和记忆更加深刻,也方便将来查阅. 目录结构本文以vue的第一次 commit a879ec06 作为分析版本 ├── build │

Vue过渡和动画效果展示（案例、GIF动图演示、附源码）

前言本篇随笔主要写了Vue过渡和动画基础.多个元素过渡和多个组件过渡,以及列表过渡的动画效果展示.详细案例分析.GIF动图演示.附源码地址获取. 作为自己对Vue过渡和动画效果知识的总结与笔记. 因内容有案例解读,代码实现,导致篇幅稍长,大约3分钟可以浏览完,如有需要的话(请笔友耐心看完,也可按目录查找所需内容) 如需要全部案例代码:请到文章末尾获取(百度网盘链接,全套案例源码) 案例实现模版: PS: 点击模版后的 --> 这个标志可以浏览目录结构,以便快速定位需要的内容以下案例均是基于

Vue中实现一个无限加载列表

参考 https://www.jianshu.com/p/0a3aebd63a14 一个需要判断的地方就是加载中再次触发滚动的时候,不要获取数据. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表无限加载</title> <style> * { margin: 0; padding: 0;

vue中methods一个方法调用另外一个方法

转自http://blog.csdn.net/zhangjing1019/article/details/77942923 vue在同一个组件内: methods中的一个方法调用methods中的另外一个方法可以在调用的时候 this.$options.methods.test2(); this.$options.methods.test2();一个方法调用另外一个方法: new Vue({ el: '#app', data: { test:111, }, methods: { test1:

vue.js 作一个用户表添加页面----初级

使用vue.js 制作一个用户表添加页面,实际上是把原来需要使用js写的部分,改写成vue.js的格式首先,想象一下,先做思考,我们要添加用户表,设涉及到哪些数据,一个是用户id,一个是用户名,一个是年龄....还有很多,为了数据的简单明了,只举例部分数据即可在vue中,el是作用的范围,这个直接获取html 中的id即可,再一个是data,这个是vue中存储数据的部分,刚才说到,这里有一个用户名,一个年龄.而没一个用户名对用一个年龄,这个是固定的,对于固定的东西,我们喜欢绑定在一起,这样在

Vue - 如何实现一个双向绑定

JS - 如何实现一个类似 vue 的双向绑定 Github JS 实现代码先来看一张图: 这张图我做个简要的描述: 首先创建一个实例对象,分别触发了 compile 解析指令和 observer 监听器, compile 解析指令则循环递归解析类似 v-model 这样的指令,初始化 data 绑定数据,同时每个节点创建一个订阅者 watcher , observer 监听器则利用了 Object.defineProperty() 方法的描述属性里边的 set,get方法,来监听

用Vue.js开发一个电影App的前端界面

我们要构建一个什么样的App? 我们大多数人使用在线流媒体服务(如Netflix)观看我们最喜欢的电影或者节目.这篇文章将重点介绍如何通过使用vue.js 2 建立一个类似风格的电影流媒体WEB交互界面(见上图). 最终的产品可以去这里找:https://codepen.io/itslit/full/mvvjzr. 注:本文作者Hassan Djirdeh,由汇智网(***,包含很多vue.js的优秀教程)的小智翻译. 尽管Bulma将作为应用的CSS框架,但是本文将主要集中在Vue.js的使用

基于vue来开发一个仿饿了么的外卖商城（一）

一.准备工作 1.大前提:已安装好node. npm. vue. vue-cli.stylus(此项目使用stylus来编译) 2.开发软件:Google Chrome(建议安装插件vue-devtools,方便调试),webstorm / sublime Text / VS Code (推荐使用webstorm,sublime 和 VS Code需要安装相应的插件) 3.项目结构: 4.项目结构分析: 5. 图标准备推荐在阿里巴巴矢量图库查找需要的图标,官网地址:https://www.ic

vue.js定义一个一级的路由 ----由浅入深

#### 定义一个路由- 实例化一个路由并设置路由映射表 - 实例化里面第一个参数 routes 路由映射表 - routes 里面参数 - path 路由的路径 - component 路由对应的组件 - 第二个参数我们选中的样式指定 - 一般我们用默认样式router-link-active就行 - 指定样式语句 linkActiveClass:"aaa",``` let routes=[ { path:"/home", component:home } ]

Vue初识：一个前端萌新的总结

一.前言时隔三年,记得第一次写博客还是2015年了,经过这几年的洗礼,我也从一个后端的小萌新变成现在略懂一点点知识的文青.如今对于前端的东东也算有一知半解,个人能力总的来说,也能够独立开发产品级项目吧.至于为什么会前端的东西,估计学.NET的人应该大部分都懂些,之前自己搭建过一套框架,但觉得现在的时代趋势吧,前后端分离是主流,再加上想借这次机会改变部门的开发方式,所以就打算改造一下. 本文仅为个人心得,从实践项目出发,不讲理论,适合萌新学习,如果有说错了欢迎大家在评论区指出,共同进步,哈哈.

用Vue+axios写一个实时搜索

刚刚在学vue,试着写了一个实时搜索文件. 思路:1.input 通过v-model绑定.2.通过watch检测输入结果变化.3根据结果变化从api调用不同的数据. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=&quo

使用Vue制作了一个计算机网络中子网划分部分的简陋计算工具

前端新手请多关照~~~~ 上个学期学校开了计算机网络的课, 上到子网划分部分时, 各种计算虽然不然但是足够让人眼花缭乱于是就想着自己写一个子网划分的小工具来辅助一下, 在一些简单的题目测试后没什么问题, 放上来做一个成果展示咯 Github静态页面作为成果展示: ChinaFitz.github.io 源代码: 写的很乱几乎不能看, 十分抱歉 https://github.com/ChinaFitz/computer_network_subnetting_tools 技术栈: Vue Vue-

第八十七篇：Vue动态切换组件的展示和隐藏

好家伙, 1.什么是动态组件? 动态组件指的是动态切换组件的限制与隐藏 2.如何实现动态组件渲染 vue提供了一个内置的<component>组件,专门用来实现动态组件的渲染. 可以将其看最占位符来用 2.1.其基本用法 <component is="Left"></component> //其中is绑定的值就是其要渲染的组件 2.2.以下为动态写法: <template> <div> <Left></Lef

vue.js建立一个简单的表格

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <

vue中封装一个全局的弹窗js

/** * Created by yx on 2017/12/21. */ export default { /** * 带按钮的弹框 *  */ showAlert:function(content,callback,singleButton){ if(typeof(content)=="string"){ if(callback){ if(singleButton){ // alert("内容加function两