Vue.js
Vue.js学习
^ω^奋斗小青年
一个小菜鸡
展开
-
[Vue.js] Vuex的使用
效果展示 目标Vuex概述Vuex基本使用使用Vuex完成todo案例 1.Vuex概述Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据共享使用Vuex管理数据的好处:能够在vuex中集中管理共享的数据,便于开发和后期进行维护能够高效的实现组件之间的数据共享,提高开发效率存储在vuex中的数据是响应式的,当数据发生改变时,页面中的数据也会同步更新 2.Vuex的基本使用创建带有vuex的v原创 2020-11-12 18:15:23 · 388 阅读 · 0 评论 -
[Vue.js]实战 -- 电商项目(八)
数据统计数据统计概述用于统计电商平台运营过程的中的各种统计数据通过直观的可视化方式展示出来,方便相关运营和管理人员查看 用户来源数据统计报表Echarts 第三方可视化库的基本使用安装echarts库// 安装echarts库 npm install echarts -S导入echarts接口// 导入echarts接口 import echarts from 'echarts' 实现用户来源数据统计报表调用接口获取后台接口数据通过ec原创 2020-11-11 18:33:44 · 307 阅读 · 0 评论 -
[Vue.js]实战 -- 电商项目(七)
订单管理订单管理概述用于维护商品的订单信息可以查看订单的商品信息、物流信息,并且可以根据实际的运营情况对订单做适当的调整。 订单列表订单列表展示订单数据加载订单列表布局const { data: res } = await this.$http.get('orders', { params: this.queryInfo })if (res.meta.status !== 200) { return this.$message.error('获取订单列表失败!')原创 2020-11-11 17:59:00 · 542 阅读 · 0 评论 -
[Vue.js]实战 -- 电商项目(六)
商品管理商品管理概述 用于维护电商平台的商品信息包括商品的类型、参数、图片、详情等信息。通过商品管理模块可以实现商品的添加、修改、展示和删除等功能 商品列表实现商品列表布局效果调用后台接口获取商品列表数据const { data: res } = await this.$http.get('goods', { params: this.queryInfo })if (res.meta.status !== 200) { return this.$message.e原创 2020-11-11 14:35:33 · 406 阅读 · 0 评论 -
[Vue.js]实战 -- 电商项目(五)
参数管理参数管理概述商品参数用于显示商品的固定的特征信息,可以通过电商平台商品详情页面直观的看到 商品分类选择选择商品分类页面布局<div> <!-- 面包屑导航区域 --> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-bread原创 2020-11-10 16:40:28 · 277 阅读 · 0 评论 -
[Vue.js]实战 -- 电商项目(四)
分类管理商品分类概述商品分类用于在购物时,快速找到所要购买的商品,可以通过电商平台主页直观的看到 商品分类列表基本布局与数据获取基本布局面包屑导航区域<!-- 面包屑导航区域 --><el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item&原创 2020-11-10 09:20:32 · 366 阅读 · 2 评论 -
[Vue.js]实战 -- 电商项目(三)
权限管理权限管理业务分析通过权限管理模块控制不同的用户可以进行哪些操作,具体可以通过角色的方式进行控制,即每个用户分配一个特定的角色,角色包括不同的功能权限 权限列表展示创建对应规格在components文件夹下创建power文件夹,在此文件夹下创建Rights.vue(此vue用于开发权限管理的权限列表内容)在index.js文件下导入import Rights from "../components/power/Rights";{ path: '/r原创 2020-11-09 10:09:35 · 469 阅读 · 1 评论 -
[Vue.js]实战 -- 电商项目(二)
主页布局整体布局主页布局开始引入官网的框架时,首先要在element.js中添加import { Container, Header, Aside, Main} from 'element-ui'Vue.use(Container)Vue.use(Header)Vue.use(Aside)Vue.use(Main)<template> <el-container class="home-container">原创 2020-11-08 15:12:41 · 286 阅读 · 0 评论 -
[Vue.js]实战 -- 电商项目(一)
项目目录项目概述项目初始化登录/退出功能主页布局用户管理模块权限管理模块分类管理模块参数管理模块商品管理模块订单管理模块数据统计模块 项目概述电商项目基本业务概述 电商后台管理系统的功能用于管理用户账号、商品分类、商品信息、订单、数据统计等业务功能。 电商后台管理系统的开发模式(前后端分离)前端项目是基于Vue技术栈的SPA项目 电商后天管理系统的技术选型前端项目技术栈VueVue-routerE原创 2020-11-08 15:07:34 · 1116 阅读 · 1 评论 -
[Vue.js] 模块化 -- 前端模块化
模块化相关规范模块化概述传统开发模式的主要问题命名冲突文件依赖通过模块化解决传统开发模式的问题模块化就是把单独的一个功能封装到一个模块(文件)中,模块之间相互隔离,但是可以通过特定的接口公开内部成员,也可以依赖别的模块好处方便代码的重用提升开发效率方便后期维护 浏览器端模块化规范AMDRequire.jsCMDSea.js 服务器端模块化规范CommonJS模块分为单文件模块 和 包原创 2020-11-05 15:43:53 · 728 阅读 · 1 评论 -
[Vue.js] 路由 -- 基于vue-router的案例--后台管理
基于vue-router的案例感觉好多,啊啊啊!!!实现效果 实现步骤抽离并渲染App根组件将左侧菜单改造为路由链接创建左侧菜单对应的路由组件在右侧主体区域添加路由占位符添加子路由规则通过路由重定向默认渲染用户组件渲染用户列表数据编程式导航跳转到用户详情页实现后退功能 抽离并渲染App根组件首先要引入vue.js和vue-router.js<script src="https://cdn.jsdelivr.net/npm/vue/di原创 2020-11-04 16:11:29 · 727 阅读 · 1 评论 -
[Vue.js] 路由 -- 前端路由
路由的基本概念与原理路由本质是对应关系后端路由概念 : 根据不同的用户URL请求,返回不同的内容本质 : URL请求地址与服务器资源之间的对应关系SPA后端渲染(存在性能问题)Ajax前端渲染(前端渲染提高性能,但是不支持浏览器的前进后退操作)SPA (Single Page Application)单页面应用程序:整个网站只有一个页面,内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作SPA实现原理之一:基于URL地址的hash (hash的变化原创 2020-11-04 11:51:45 · 205 阅读 · 0 评论 -
[Vue.js] 深入 -- 案例 - 购物车
案例 - 购物车按照组件化方式实现业务需求根据业务功能进行组件化划分标题组件(展示文本)列表组件(列表展示、商品数量变更、商品删除)结算组件(计算商品总额)功能实现步骤实现整体布局和样式效果划分独立的功能组件组合所有的子组件形成整体结构逐个实现各个组件功能标题组件列表组件结算组件效果图展示 实现组件化布局先创建一个局部组件my-cart,在里面引入属性components,定义三个组件cart-title,cart-list,cart-to原创 2020-11-03 15:56:21 · 391 阅读 · 0 评论 -
[Vue.js] 深入 -- 组件化开发
组件化开发思想现实中的组件化思想体现标准分治重用组合 组件注册全局组件注册语法Vue.component(组件名称,{ data:组件数据, template:组件模板内容}) 组件用法<div id='app'> <button-counter></button-counter></div><button-counter></button-counter>可以重复原创 2020-11-03 14:40:10 · 158 阅读 · 0 评论 -
[Vue.js] 基础 -- 综合案例 -- 图书管理
综合案例 – 图书管理补充知识(数组相关API)变异方法(修改原有数据)push()pop()shift()unshift()splice()sort()reverse()替换数组(生成新的数组)filter()concat()slice()修改响应式数据Vue.set(vm.items, indexOfltem, newValue)vm.$set(vm.items, indexOfltem, newValue)参数一表示要处理的数组名称参数二表示要处理原创 2020-11-02 15:48:41 · 752 阅读 · 1 评论 -
[Vue.js] 基础 -- 过滤器(格式化时间)
对日期进行格式化date 要格式化的日期format 进行格式化的模式字符串支持的模式字母y : 年M : 年中的月份(1-12)d : 月份中的天(1-31)h : 小时(0-23)m : 分(0-59)s : 秒(0-59)S : 毫秒(0-999)q : 季度(1-4)function dateFormat(date, format) { if (typeof date === "string") { var mts = date.matc原创 2020-11-02 15:19:31 · 306 阅读 · 1 评论 -
[Vue.js] 基础 -- Vue常用特性
Vue常用特性常用特性概览表单操作自定义指令计算属性过滤器侦听器生命周期 表单操作基于Vue的表单操作Input 单行文本textarea 多行文本select 下拉多选radio 单选框checkbox 多选框<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>D原创 2020-11-02 11:05:52 · 260 阅读 · 2 评论 -
[Vue.js] 基础 -- 案例之Tab选项卡
实现效果 实现步骤实现静态UI效果用传统的方式实现标签结构和样式基于数据重构UI效果将静态的结构和样式重构为基于Vue模板语法的形式处理事件绑定和js控制逻辑声明式编程模板的结构和最终显示的效果基本一致<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>原创 2020-11-01 18:43:53 · 946 阅读 · 0 评论 -
Vue 自定义按键修饰符对应表
Vue 自定义按键修饰符对应表按键键码8BackSpace9Tab12Clear13Enter16Shift17Ctrl18Alt19Pause20Caps_Lock27Escape32space33page up34page down35End36Home37Left38Up39Right40Down41Select42Pr原创 2020-11-01 10:18:06 · 309 阅读 · 0 评论 -
Vue -- 目录
[Vue.js] 基础[Vue.js] 基础 – 安装Vue[Vue.js] 基础 – Vue简介[Vue.js] 基础 – Vue实例[Vue.js] 基础 – 模板语法原创 2020-09-25 17:01:06 · 228 阅读 · 0 评论 -
[Vue.js] 基础 -- 模板语法
模板语法Vue.js的模板是合法的HTML 插值文本Mustache语法(双大括号) 的文本插值 <span>Message: {{ msg }}</span>无论何时,绑定的数据对象上 msg property 发生了改变,插值处的内容都会更新。 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-原创 2020-09-25 16:58:06 · 272 阅读 · 0 评论 -
[Vue.js] 基础 -- Vue实例
Vue实例创建一个Vue实例//var vm = new Vue({ // 选项})当创建一个 Vue 实例时,你可以传入一个选项对象一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例 数据与方法VUE实现前端页面数据与控件的双向绑定,VUE实例中必须定义数据,以及操作数据的方法。Vue实现使用new Vue函数创建,当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,视图原创 2020-09-24 21:47:13 · 205 阅读 · 0 评论 -
[Vue.js] 基础 -- Vue简介
Vue.js是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.什么是渐进式?渐进式意味着你可以将Vue作为你应用的一部分嵌入其中,带来更丰富的交互体验。如果你希望将更多的业务逻辑使用Vue实现,那么Vue的核心库以及其生态系统特点:解耦视图和数据可复用的组件前端路由技术状态管理虚拟DOM 起步通过引入:<!-- 开发环境版本,包含了有帮助的命令行警告 --><script src="https原创 2020-09-23 15:44:16 · 220 阅读 · 0 评论 -
[Vue.js] 基础 -- 安装Vue
安装 Vue版本说明Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器直接用 < script > 引用直接引用标签的话,Vue会被注册为一个全局变量<script src = ../vue.js> </script>使用CDN方法制作原型或者学习<script src="https://cdn.jsdelivr.net/npm.原创 2020-09-22 19:55:21 · 247 阅读 · 0 评论