pingting_的博客

仿写网易云-项目初始化-扫描二维码登录1. 项目初始化2. 安装使用 Element UI3. 设置一下页面的布局4. 开始写 Header5. 点击未登录弹出登录窗口5.1 原理分析5.2 扫码登录 LoginByScanCode 组件5.2.1 组件UI 样式5.2.2 函数的封装5.2.3 页面功能逻辑1. 项目初始化2. 安装使用 Element UI这里使用的是全部引入，比较方便安装 element ui ：npm i element-ui -S全部引入 在 main.js 中添

黑马头条案例0. 写在前面1. 创建并梳理项目结构1.1 创建1.2 components 和 views 文件夹1.4 其他项目文件的初始化2.安装和配置 Vant 组件库3. 使用 Tabbar 组件开启路由模式3.1 报错 `Component name "Home" should always be multi-word`3.2 修改 vant 组件的默认样式4. 在 vue 项目使用 axios5. 零零散散6. 上拉加载更多7. 下拉刷新8. 定制主题8.1 直接覆盖8.2 通过 theme.l

后台管理案例黑马后台小案例控制页面权限1. 当需要权限的路径不多时可以声明数组来储存路径2. 当需要权限的路径较多时 可以设置一个导出数组的 js 文件黑马后台小案例跟着视频写的案例源码地址：控制页面权限1. 当需要权限的路径不多时可以声明数组来储存路径// 全局前置守卫router.beforeEach((to, from , next) => { // 控制页面权限 const pathArr = ['/home', '/home/users', '/home/goods

Vue UI组件库以及 Element UI 使用1. Vue UI 组件库1.1 移动端常用 UI 组件库1.2 PC 端常用 UI 组件库2. Element UI2.1 安装2.2 上手2.3 按需引入1. Vue UI 组件库1.1 移动端常用 UI 组件库VantCube UIMint UI1.2 PC 端常用 UI 组件库ElementIVew UI2. Element UI官网： Element UI2.1 安装npm i element-ui -S2.

Vue记住滚动条位置1. 先给占位符加一层缓存2. 在路由上加一个源信息meta，记录滚动条的top值3. 使用 scrollBehavior4. 给页面添加事件监听使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 可以自定义路由切换时页面如何滚动。注意：这个功能只在支持history.pushState的浏览器中可用1. 先给占位符加一层缓存Home 是需要记住滚动条位置的组件<!-- 路由占位符 -->&

Vuex1. 理解 Vuex1.1 vuex是什么1.2 什么情况下使用 vuex1.3 Vuex 工作原理2. 安装及其使用2.1安装和初始化工作2.2 使用3. Vuex 开发者工具4. store 的一些配置项4.1 getters4.2 mapState 和 mapGetters4.3 mapActions 与 mapMutations5. 多组件共享数据6. 模块化 + 命名空间1. 理解 Vuex1.1 vuex是什么专门在 Vue中实现集中式状态（数据）管理的一个 vue 插件，

前端路由和vue-router1. 前端路由的概念与原理1.1 什么是路由1.2 SPA 与前端路由1.3 锚链接1.4 前端路由工作方式1.5 手动模拟简易的前端路由2. vue-router 的基本用法2.1 什么是 vue-router2.2 安装配置以及基本使用3. vue-router 常见用法3.1 路由重定向3.2 嵌套路由3.3 默认子路由3.3 动态路由匹配3.3.1 动态路由的概念3.3.2 参数对象 参数值3.3.3 为路由开启 props 传参3.3.4 拓展 query 和 ful

在vue中使用axios1. 基本用法演示2. 把 axios 挂载到 Vue 原型上并配置请求根路径2.1 挂载2.2 配置请求根路径2.3 缺点2.4 main.js 源码1. 基本用法演示get 请求<button @click="getInfo">发起 GET 请求</button>methods: { async getInfo () { const { data: res } = await axios.get('http://www

ESLint以及安装配置相关插件1.创建带 eslint 的项目1.1 写在前面的 VSCode 配置1.2 创建流程2. `.eslintrc.js` 配置文件中的rules 节点3. 初步了解语法规则4. 安装并配置 ESlint 插件5. Prettier - Code formatter插件6. 一些参考配置1.创建带 eslint 的项目1.1 写在前面的 VSCode 配置在设置中搜索 tabsize修改下面两个选项在设置中搜索 format on save修改下面这个选

Vue自定义指令1. 什么是自定义事件2. 自定义指令的分类3. 私有自定义指令3.1 基本使用3.2 binding.value3.3 update 函数3.4 函数简写4. 全局自定义指令5. main.js 中的小提示1. 什么是自定义事件vue 官方提供了 v-text，v-for，v-model，v-if 等常用指令。除此之外 vue 还允许开发者自定义指令。2. 自定义指令的分类私有自定义指令全局自定义指令3. 私有自定义指令3.1 基本使用在每个 vue 组件中，可以在 d

Vue插槽1. 什么是插槽2. 插槽基本用法3. v-slot: 将内容放在指定插槽4. 插槽后背（默认）内容5. 具名插槽6. 作用域插槽1. 什么是插槽插槽（slot）是 Vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的，希望由用户指定的部分定义为插槽。2. 插槽基本用法如果没有在组件内部声明插槽区域，则组件标签内的内容默认不显示App.vue<Left> <p>这是在 Left 组件声明的p标签</p></Lef

Vue动态组件1.什么是动态组件2. 如何实现动态组件渲染3. 使用 keep-alive 保持状态4. keep-alive 对应的生命周期函数5. keep-alive 的 include 属性6. 了解组件注册名称和组件声明时name的区别1.什么是动态组件动态组件指的是动态切换组件的显示与隐藏2. 如何实现动态组件渲染vue 提供一个内置的 <component> 组件，专门用来实现动态组件的渲染。<component> 组件作用：相当于占位符is 属性的值

ref引用1. ref 引用概念2.使用 ref引用获取 DOM3. 使用 ref 引用组件实例4. 了解 this.$nextTick 应用场景4.1 遇到的场景4.2 解决方案4.3 为什么不用 updated1. ref 引用概念jquery ：简化了程序员操作 DOM 的过程。vue 优势：MVVM 在vue中，程序员不需要操作 DOM 。程序员只需要把数据维护好即可。建议：在 vue 的项目中，不要使用 jquery。那么在 vue 中需要操作 DOM 怎么办呢？ref 用来辅助

Vue 生命周期和数据共享1. 组件的生命周期1.1 生命周期与生命周期函数1.2 组件生命周期函数的分类1.3 生命周期图示以及详解2. 组件之间的数据共享2.1 组件之间的关系2.2 父向子传值2.3 子向父传值2.4 兄弟之间的数据关系1. 组件的生命周期1.1 生命周期与生命周期函数生命周期是指一个组件从 创建 => 运行 => 销毁 的整个时间段，强调的是一个时间段。生命周期函数是由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。1.2 组件生命周期

组件1. 组件化开发2. vue 中的组件化开发3. vue 三个组成部分4. methods watch computed flters5. 启用 less 语法6. 组件之间的父子关系7. 使用组件的三个步骤8. 安装并配置@路径提示的插件9. 私有子组件和全局组件9.1 注册私有子组件9.2 注册全局组件10. 组件的 props10.1 概念10.2 使用10.2 props 是只读的10.3 props 的默认值 default10.4 props 的 type 值类型10.5 props

vue-cli1.介绍并安装 vue-cli1.1 什么是单页面应用程序1.2 什么是 vue-cli1.3 安装2. 使用 vue-cli 创建项目2.1 基于 vue-cli 快速生成工程化的 Vue 项目：2.2 创建过程：3. 介绍项目目录结构3.1 基本目录3.2 src 目录4. 了解 vue 项目的运行流程1.介绍并安装 vue-cli1.1 什么是单页面应用程序单页面应用程序，顾名思义，指的是一个 web 网站中只有唯一的一个 HTML 页面，所有的功能与交互都在这唯一的一个页面内完

axios简单使用1. axios 的基本使用2. get 请求传递参数 **params**3. post 请求 传递请求体 data4. 使用 async await 调用 axios5. 使用结构赋值6. axios.get 和 axios.post6.1 axios.get6.2 axios.post1. axios 的基本使用axios 是一个专注于网络请求的库！axios 基本语法如下：axios({ method: '请求方式', url: '请求地址',})

过滤器和侦听器和计算属性1. 过滤器1.1基本用法1.2私有过滤器和全局过滤器1.3 Dayjs1.4 连续调用多个过滤器1.5 过滤器传参1.6 兼容性2. watch 侦听器2.1 简介2.2 应用场景：判断用户名是否被占用2.3 immediate 选项2.4 deep 选项3.计算属性3.1 了解计算属性应用场景3.2 控制 div 背景颜色案例1. 过滤器1.1基本用法过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式和 v-bi

vue的指令1.vue 的指令1.1 指令的概念与分类1.2 内容渲染指令1.3 属性绑定指令1.4 事件绑定指令1.4.1 如何绑定1.4.2 事件对象1.4.3 事件修饰符1.4.4按键修饰符1.5 双向绑定指令1.5.1 基本使用1.5.2 v-model 指令的修饰符1.6 条件渲染指令1.6.1 v-if 和 v-show1.6.2v-else-if 和 v-else1.7 列表渲染条件1.7 品牌列表案例源码1.vue 的指令1.1 指令的概念与分类指令 是 vue 为开发者提供的模板语

vue简介以及基本使用1. vue简介1.1 了解 vue 是什么1.2 vue两个特性1.2.1 数据驱动视图1.2.2 双向数据绑定1.3 浅学一下 MVVM1.3.1 MVVM1.3.2 工作原理1.4 vue的版本2. vue 基本使用2.1 基本使用步骤3.vue 调试工具3.1 安装1. vue简介1.1 了解 vue 是什么官方给出的概念：Vue 是一套用于构建用户界面的前端框架。构建用户界面：用 Vue 往 html 页面中填充数据，非常的方便框架：是一套现成的解决方案，