Vue
文章平均质量分 89
Vue
优小U
Keep on learning as long as you live.
展开
-
Ant Design of Vue @1.7.8 学习笔记(Vue2版本)
快速学习Ant Design Vue在实际业务中的一定会用到的组件。原创 2022-12-12 09:11:36 · 3296 阅读 · 0 评论 -
Vue 项目调试总结
文章目录1. 代码中写debugger2. Vue.js devtools3. VScode + Chrome1. 代码中写debugger如果是简单的代码调试,想看到的值很少,就直接使用原生的debugger语句调试或使用console.log打印在控制台,这个适用于比较简单的调试。2. Vue.js devtools在浏览器安装扩展 Vue Devtools,然后F12控制台会多出一个tab:3. VScode + Chrome1.vscode 安装 Debugger for Chrome原创 2021-04-15 23:45:40 · 537 阅读 · 2 评论 -
Vue2.x 项目性能优化之代码优化
文章目录1. 代码层面1.1 v-if 和 v-show 的使用1.2 computed 和 watch 区分使用1.3 v-for 遍历必须为 item 添加 key,且避免同时使用 v-if1.4 纯显示长列表性能优化1.5 事件的销毁1.6 图片资源懒加载1.7 路由懒加载1.8 第三方插件按需引入众所周知,Vue项目采用了数据双向绑定和虚拟DOM基础,在数据驱动代替DOM频繁渲染已经算是非常高效了,对开发者而言已经非常优化了,那为什么还会有Vue性能优化这一说呢?因为目前Vue 2.x使用了we原创 2021-03-27 14:32:07 · 3998 阅读 · 12 评论 -
vue router 的两种路由模式hash与history的区别
文章目录两种模式特点总结两种模式前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求。hash模式是通过改变锚点(#)来更新页面URL,并不会触发页面重新加载,我们可以通过window.onhashchange监听到hash的改变,从而处理路由。history模式是通过调用window.history对象上的一系列方法来实现页面的无刷新跳转。特点hashhash,原本用来结合锚点控制页面视窗的位置,具有以下特点:可以改变URL,但不会触发页面重新加载(hash的改变会记录原创 2021-03-14 21:35:27 · 4943 阅读 · 4 评论 -
vue.config.js 配置参考
文章目录属性说明常用完整配置属性说明vue.config.js是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写。若没有vue.config.js文件可以自行在根目录创建。// vue.config.jsmodule.exports = { // 选项}baseUrl原创 2021-03-14 20:32:08 · 2899 阅读 · 21 评论 -
vue组件通信大总结
文章目录1. props/$emit2. sync/update3. provide/inject4. \$attrs/\$listeners1. props/$emit父组件给子组件添加属性:msg="msg"传值,子组件通过props:['msg']接收;子组件可以通过this.$emit('changeMsg','Welcome')向父组件发送事件和数据,父组件通过 @changeMsg="change" 监听事件和传递过来的数据。代码<!-- Parent.vue -->&原创 2021-03-13 21:37:46 · 267 阅读 · 6 评论 -
【Ant Design Vue】之Grid栅格和Space间距
文章目录Grid 栅格Space 间距Grid 栅格Ant Design Vue 将整个设计建议区域按照 24 等分的原则进行划分,划分之后的信息区块我们称之为『盒子』。建议横向排列的盒子数量最多四个,最少一个。『盒子』在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版规则,以保证视觉层面的舒适感。布局的栅格化系统,我们是基于行(row)和列(col)来定义信息区块的外部框架,以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理:通过row在水平方向建立一组colu原创 2021-03-12 11:42:57 · 12125 阅读 · 11 评论 -
【Ant Design Vue】之layout布局
文章目录基本布局基本布局原创 2021-03-11 22:13:53 · 11387 阅读 · 8 评论 -
【Ant Design Vue 】之Menu菜单
文章目录常用属性常用事件递归嵌套多级菜单效果版本ant-design-vue: "^1.7.4",常用属性属性说明默认值mode菜单类型,现在支持垂直、水平、和内嵌模式三种verticalinlineCollapsedinline 时菜单是否收起状态theme主题颜色(light/dark)lightopenKeys(.sync)当前展开的 SubMenu 菜单项 key 数组defaultOpenKeys初始展开的 SubMenu原创 2021-03-11 17:27:20 · 12004 阅读 · 14 评论 -
vue项目路径修改及打包上传到服务器
1.项目路径修改默认项目路径是localhost:8080,如果要配置位相对路径,需要在config/index.js文件的 assetsPublicPath配置为 ./ 2.项目打包 用命令行工具进入项目根目录,运行:npm run build会在根目录生成dist 文件夹,里面是打包好的css,js等文件。 3.上传并运行如果项目中没有http...原创 2018-04-27 11:50:43 · 7068 阅读 · 2 评论 -
vue-router嵌套路由,默认子路由设置
需求: 1. 底部5个tab选项卡 2. 其中一个里面又有tab选项卡 3. 显示active状态 4. 底部选项卡和子路由的选项卡都默认选择第一个选项卡举个栗子: 示例是随便写的。 1.路由文件 router/index.jsimport Vue from 'vue'import Router from 'vue-router'import Home from...原创 2018-05-17 16:25:01 · 46797 阅读 · 8 评论 -
vue-router路由安装与使用
1.vue-router路由安装在当前项目根目录运行npm install vue-router --save-dev 2.在App.vue增加 router-view标签这里是路由页面的显示区域:<router-view></router-view> 3.新建router文件夹,新建index.jsimport ...原创 2018-04-25 17:02:07 · 3017 阅读 · 3 评论 -
Vue 安装 live-server
live-server是轻量级热插拔插件,在开发阶段可以不用刷新浏览器,只用保存了文件,浏览器自动重新加载页面的元素,非常方便。如果没有用vue-cli搭建项目可以直接全局安装live-server方便开发。如果用vue-cli初始化项目,一般会自带hot插件。1.安装方法npm install live-server -g2.运行在项目根目录运行:live-server3...原创 2018-04-25 16:53:16 · 4691 阅读 · 4 评论 -
vue学习小笔记
1.redirect & aliasredirect: 直接改变了url的值 alias: url没有改变,只是改变了router-view中的内容 坑:不能再path为’/’中配置alias{ path: '/', component: Hello, alias: '/home'}无效!!! 2.computed VS met...原创 2018-04-25 16:31:54 · 222 阅读 · 3 评论