Vue.js
关注
分享
扫一扫
文章平均质量分 76
以实战为线索，逐步深入Vue开发各个环节，掌握前
端常用性能体验优化思路，打造完整前端工作流,提升工
程化编码能力和思维能力。
沐小侠
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Vue+ElementUI电商项目效果
登录页面、首页、用户管理、权限管理、商品管理、订单管理项目代码讲解：Vue+ElementUI电商项目（一）Vue+ElementUI电商项目（二）Vue+ElementUI电商项目（三）Vue+ElementUI电商项目（四）Vue+ElementUI电商项目（五）Vue+ElementUI电商项目（六）Vue+ElementUI电商项目（七）...原创 2021-11-16 16:04:43 · 462 阅读 · 0 评论
-
Vue面试题整理
Vue相关面试题整理原创 2022-09-19 14:52:08 · 1008 阅读 · 2 评论 -
Vue内置指令——v-model（双向数据绑定）
v-model 指令在表单控件元素上创建双向数据绑定。根据控件类型自动选取正确的方法来更新元素。负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。注意：v-model 会忽略所有表单元素的 value、checked、selected属性的初始值而总是将 Vue 实例的数据作为数据来源。应该通过 JavaScript 在组件的 data 选项中声明初始值。运行结果：修饰符...原创 2022-06-29 10:34:19 · 3278 阅读 · 0 评论 -
Vue内置指令——v-on（事件处理）
Vue.js提供了事件处理机制，可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。通常情况下需要编写监听事件、事件处理方法、内联事件处理。原创 2022-06-29 10:32:31 · 759 阅读 · 0 评论 -
Vue内置指令——v-bind
v-bind指令用于动态地绑定一个或多个属性。在开发的时候，有时候我们的属性不是写死的，有可能是根据我们的一些数据动态地决定的，比如图片标签（）的src属性，我们可能从后端请求了一个包含图片地址的数据，需要将地址动态的绑定到src上面，这时就不能简单的将src写死。v-bind指令主要用于属性绑定。操作元素的 class 列表和内联样式是数据绑定的一个常见需求。class和style都是属性，所以可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错...原创 2022-06-29 09:54:44 · 1286 阅读 · 0 评论 -
Vue内置指令——v-for
v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，item 则是被迭代的数组元素的别名。当Vue用 v-for 正在更新已渲染过的元素列表时，它默认使用“就地复用”策略。如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的改变，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 。原创 2022-06-29 09:43:48 · 997 阅读 · 0 评论 -
Vue内置指令——v-show
v-show的用法与v-if类似，不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。v-if VS v-showv-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。...原创 2022-06-29 09:40:37 · 2049 阅读 · 0 评论 -
Vue内置指令——v-if、v-else-if、v-else
v-if 指令用于条件性地渲染一块内容，Vue会根据表达式的值的真假条件来渲染元素。v-else是搭配 v-if 使用，v-else元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。类似 JS 的 if … else。v-else-if充当v-if的else-if块，可以链式的使用多次。 类似JS的 if … else if … else。.........原创 2022-06-29 09:37:33 · 7372 阅读 · 0 评论 -
Vue内置指令——v-text、v-html、v-pre、v-once
v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题。使用v-html指令插入，会将数据解析为HTML。能有安全问题, 一般只在可信任内容上使用 v-html，永不用在用户提交的内容上.......原创 2022-06-29 09:35:19 · 338 阅读 · 0 评论 -
Vue内置指令——v-cloak
v-cloak指令用于解决插值表达式的“闪动”问题。原理：先隐藏，替换好值之后显示最终的值。在数据渲染完场之后，v-cloak 属性会被自动去除， v-cloak一旦移除也就是没有这个属性了，属性选择器就选择不到该标签，也就是对应的标签会变为可见。......原创 2022-06-29 09:25:02 · 541 阅读 · 0 评论 -
Vue组件——弹框组件案例
页面效果实现代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>组件-弹框</title> <style> * { margin: 0; padding: 0; } .dialog { position: fixed; top: 0; left: 0; widt原创 2022-04-22 15:48:44 · 2975 阅读 · 0 评论 -
动态组件实现Tab切换
案例效果：实现代码：<!DOCTYPE html><html> <head> <title>动态组件</title> <style> .tab-button { padding: 6px 10px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid #ccc; curso原创 2022-04-22 15:43:48 · 660 阅读 · 0 评论 -
Vue+ElementUI电商项目（七）
数据统计创建数据统计路由组件并添加路由规则<template> <div> <Breadcrumb :item="item" :subItem="subItem"></Breadcrumb> <Echarts></Echarts> </div></template><script> import Breadcrumb from '../../components/原创 2021-11-18 15:49:45 · 423 阅读 · 0 评论 -
Vue+ElementUI电商项目（六）
订单列表创建订单列表路由组件并添加路由规则//在view中新建orderManagement文件夹，新建Order.vue组件，组件中添加代码如下<template> <div> <Breadcrumb :item="item" :subItem="subItem"></Breadcrumb> <OrdersList></OrdersList> </div></template>原创 2021-11-18 15:42:12 · 1519 阅读 · 1 评论 -
Vue+ElementUI电商项目（五）
商品管理1. 商品分类创建子级路由创建categories，goods，params子级路由组件并设置路由规则import Goods from '@/views/goodsManagement/Goods.vue'import Params from '@/views/goodsManagement/Params.vue'import Categories from '@/views/goodsManagement/Categories.vue'path: '/home', compone原创 2021-11-17 10:51:16 · 1578 阅读 · 0 评论 -
Vue+ElementUI电商项目（四）
实现权限列表1. 权限列表添加权限列表路由创建权限管理组件（Rights.vue），并在router.js添加对应的路由规则import Rights from '@/views/rightsManagement/Rights.vue'...... path: '/home', component: Home, redirect: '/welcome', children: [ { path: "/welcome", component: Welcome },原创 2021-11-17 10:28:24 · 1195 阅读 · 0 评论 -
Vue+ElementUI电商项目（三）
实现用户列表功能完成用户列表主体区域新建用户列表组件 userManagement/Users.vue在router.js中导入子级路由组件Users.vue，并设置路由规则 { path: 'users', component: Users }当点击二级菜单的时候，被点击的二级子菜单并没有高亮，我们需要正在被使用的功能高亮显示我们可以通过设置el-menu的default-active属性来设置当前激活菜单的index但是default-active属性也不能写死，固定为某个菜单值所以原创 2021-11-16 15:06:48 · 2462 阅读 · 0 评论 -
Vue+ElementUI电商项目（二）
实现后台首页后台首页基本布局打开Home.vue组件，进行布局：<el-container class="home-container"> <!-- 头部区域 --> <el-header>Header<el-button type="info" @click="logout"> 退出 </el-button></el-header> <!-- 页面主体区域 --> <el-container&g原创 2021-11-16 15:02:16 · 510 阅读 · 0 评论 -
Vue+ElementUI电商项目（一）
1.电商业务概述客户使用的业务服务：PC端，小程序，移动web，移动app管理员使用的业务服务：PC后台管理端。PC后台管理端的功能：管理用户账号（登录，退出，用户管理，权限管理），商品管理（商品分类，分类参数，商品信息，订单），数据统计电商后台管理系统采用前后端分离的开发模式前端项目是基于Vue的SPA（单页应用程序）项目前端技术栈:Vue,Vue-Router,Vuex,Element-UI,Axios,Echarts后端技术栈：Node.js,Express,Jwt(模拟session)原创 2021-11-16 14:55:54 · 1918 阅读 · 2 评论 -
使用Vue的filters模拟微信朋友圈的时间显示格式
模拟微信朋友圈的时间显示格式，使用filters实现时间过滤。/* 假设一个发布的时间，和当前系统时间比较 *///不满足1分钟，刚刚//不满足1小时，几分钟前//不满足1天，几小时前//不满足2天，昨天//不满足一个月时，几天前原创 2021-10-08 17:58:14 · 568 阅读 · 0 评论 -
Vue内置指令使用详解
指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。v-cloak、v-text、v-html、v-pre、v-once、v-if、v-else-if、v-else、v-show、v-for、v-bind、v-on、v-model原创 2021-09-18 10:34:17 · 639 阅读 · 0 评论 -
Vue的生命周期
Vue 的生命周期。通过数据渲染了解Vue的生命周期的执行顺序以及什么时候执行。Vue声明周期在真实场景下的业务应用。原创 2021-04-19 14:18:37 · 393 阅读 · 0 评论 -
Vue.js实现购物车结算
1. 使用computed计算属性实现简单的购物车结算功能。2. 使用watch函数来监听checkboxList属性，实现全选按钮选中或者取消。原创 2021-01-19 15:18:09 · 1906 阅读 · 0 评论 -
超详细Vue Devtools的下载和安装——Vue的调试工具
在使用 Vue 时，我们推荐在浏览器上安装 Vue Devtools。vue-devtools是一款基于Chrome浏览器的扩展，用于调试Vue应用。下载Github下载地址：https://github.com/vuejs/vue-devtools/tree/v5.1.1解压下载的文件，在这里解压到D:/Vue下。在命令行中切换到解压好的vue-devtools-5.1.1目录，使用cnpm install命令进行依赖安装。依赖包下载完后执行npm run build,编译打包成功后会原创 2021-01-11 17:18:21 · 68078 阅读 · 47 评论 -
使用Vue.js实现Tab选项卡
使用Vue.js实现Tab选项卡原创 2020-12-23 09:19:38 · 324 阅读 · 0 评论 -
Vue实现简单的音乐播放器
Vue实现简单的音乐播放器原创 2020-12-17 09:15:03 · 2355 阅读 · 0 评论