随笔分类 -  Vue2学习系列

Vue项目常用总结
摘要：常用插件 模块分析插件 安装以后，重新运行项目的时候，会自动打开项目分析页面 安装 npm i -D webpack-bundle-analyzer vue.config.js 配置 const { defineConfig } = require("@vue/cli-service"); cons 阅读全文
posted @ 2024-03-14 14:53 songxia777 阅读(45) 评论(0) 推荐(0)
Vue监听路由的变化
摘要：方式一：watch监听 通过watch监听，当路由发生变化的时候执行 watch:{ $route(to,from){ console.log(to.path); } }, // 或者 watch: { $route: { handler: function(val, oldVal){ consol 阅读全文
posted @ 2023-10-13 09:27 songxia777 阅读(349) 评论(0) 推荐(0)
vscode常用快捷键
摘要：快捷键 打开/关闭左侧工作区 ctrl+B 格式化 ctrl+K alt+shift+f 更改颜色 主题 Ctrl+K+T 清空控制台 cls 关闭当前标签 Ctrl+F4 或 Ctrl+W 新打开一个编辑器 ctrl+shift+n 折叠所有代码 ctrl+shift+[-] ctrl+k,ctr 阅读全文
posted @ 2023-10-10 11:26 songxia777 阅读(131) 评论(0) 推荐(0)
vuex之基础知识
摘要：Vuex官方参考文档 1. 对Vuex 的认识 1.1 简介 对 vue 应用中 多个组件的 共享状态 进行 集中式的管理(读/写) state: 驱动应用的 数据源（data数据） view: 以声明方式将 state 映射到视图（template视图） actions: 响应在 view 上的用 阅读全文
posted @ 2023-10-10 11:20 songxia777 阅读(49) 评论(0) 推荐(0)
vue之修饰符
摘要：1. 简介 修饰符是以半角句号 . 指明的特殊后缀 2. 常用修饰符 2.1 .prevent ：阻止事件默认行为 可以告诉v-on指令对于触发的事件调用 event.preventDefault()，一般用于表单提交、a标签的click事件等 <form v-on.prevent="onSubmi 阅读全文
posted @ 2023-10-10 11:17 songxia777 阅读(86) 评论(0) 推荐(0)
06vue之路由vue-router
摘要：1. 介绍 路由就是一种对应关系（Hash 地址与组件之间的对应关系），在Vue.js路由允许我们通过不同的url访问不同的内容 SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。 此时，不同组件之间的切换需要通过前端路由来实现（在 SP 阅读全文
posted @ 2023-10-10 11:17 songxia777 阅读(95) 评论(0) 推荐(0)
05vue之组件
摘要：1. 组件化编程 根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护 1.1 组件 在 Vue 中，组件就是用来封装视图的，说白了就是封装 HTML；组件思想就是把一个很大的复杂的 Web 页面视图给拆分成一块一块的组件视图，然后利用某种特定的方式把它们组织到一起完成完 阅读全文
posted @ 2023-10-10 11:15 songxia777 阅读(47) 评论(0) 推荐(0)
04vue之axios
摘要：1. 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征： 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSO 阅读全文
posted @ 2023-10-10 11:11 songxia777 阅读(63) 评论(0) 推荐(0)
03vue之脚手架搭建项目
摘要：1. 介绍 Vue脚手架是基于webpack搭建的，用来创建vue项目的工具包 Vue的运行流程： 通过 main.js 把 App.vue 渲染到 index.html 的指定区域中 脚手架-官网 2 准备工作 2.1 检查以下是否安装 # 确定是否已经安装 node, npm, vue-cli脚 阅读全文
posted @ 2023-10-10 11:10 songxia777 阅读(66) 评论(0) 推荐(0)
02vue之调试工具vue-devtools
摘要：1 下载插件 可以在 https://chrome.zzzmh.cn/#/index 这里直接下载，然后直接拖入 扩展程序即可 2 下载包 2.1 从github克隆项目 git clone https://github.com/vuejs/vue-devtools 2.2 在vue-devtool 阅读全文
posted @ 2023-10-10 11:06 songxia777 阅读(91) 评论(0) 推荐(0)
01vue之基础知识
摘要：1 概述 1.1 什么是Vue.js 是一套构建用户界面的渐进式框架。主要作用：动态构建用户界面 Vue 只关注视图层， 采用自底向上增量开发的设计 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 1.1.1 特点 1、 遵循MVVM模式 2、 编码简洁, 体积小, 运 阅读全文
posted @ 2023-10-10 11:04 songxia777 阅读(86) 评论(0) 推荐(0)