weixin_65100963的博客

提交git add . # ./ 当前目录, 将当前目录下所有文件提交到暂存区git commit -m "feat:提交日志" # 将暂存区的内容提交到本地仓库 (生成提交日志)#git 提交规范说明# - type: feat 新功能（feature）, fix 修补bug, docs 文档修改（documentation）, style 代码格式修改 (注意不是 css 修改,不影响代码运行的变动), refactor 代码重构 (即不是新增功能，也不是

ESLint 插件自动格式化操作手册实现按照 ESLint 规则自动格式化需要借助 2 个插件：ESLint （读取 ESLint 配置文件进行语法检测）Prettier ESLint（按照 ESLint 配置文件进行格式化）使用步骤：安装插件修改默认格式化插件找到任意代码文件右键点击代码区域选择「使用…格式化文档」选择「配置默认格式化程序」选择「Prettier ESLint」到此，已经可以实现「Alt + Shift + F」进行自动格式化啦！

全局组件局部组件：在父组件中导入的这个MyCom组件，只能在当前组件中使用import MyCom from './MyCom'export default { components: { MyCom } }全局组件：在main.js中导入import MyCom from './Mycom'// Vue.component(组件名，组件)Vue.component('MyCom', MyCom)全局指令局部指令export default { directives:

(1)vue-router 3.x版本更新了一个特点,如果编程时导航跳到了相同的路径,会报一个错误:NavigitionDuplicated导航重复,vue-router限制我们不能两次跳转到同一路径,可以通过this.$router.push(patch).catch(e=>e)解决这个报错(2)element-ui 给提供的功能 this.$confirm$开头的方法就地位高一些,一般就是组件自带的$store , $refs , $router , $route , $nextTick

常见的vue技术栈组件库● 移动端（Vant, Cube-UI, NutUI ）● PC端 （ element-ui, Ant Design of Vue, iView）● 小程序: uniapp组件库的基本使用流程根据项目的实际情况，进行技术选型： 用什么技术栈，用什么组件库去对应的官方上查文档遇到困难时：a. 在官网上找 常见问题(一般在网页的最底部)b. 在社区/搜索引擎 找答案c. 去提issue ，面对面直接向组件的作者提问d. 改源码小结● vue技术栈有很

Vuex-辅助函数mapState来使用公共数据当访问某个数据项嵌套太深了,用mapState把公共数据（vuex.store） 映射 到本组件内部的计算属性中mapState的使用步骤映射// 1. 导入辅助函数mapState，它是在vuex中定义的一个工具函数。// es6 按需导入 import { mapState } from 'vuex' import { mapState } from 'vuex'computed: { // 说明1： ...对象 是把对象展开，合并

组件之间通信方案序号组件关系数据通信1父子关系子传父：props ； 父传子：$emit2非父子关系eventBus: $on + $emit3非父子关系vuexVuex是什么Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式， 采用集中式存储管理应用的所有组件的状态，解决多组件数据通信。要点：vue官方搭配，专属使用 (类似于：vue-router)，有专门的调试工具集中式管理数据状态方案 (操作更简洁)data() {

路由模式设置修改路由在地址栏的模式router/index.js中:const router = new VueRouter({ routes, mode: "history" // 打包上线后需要后台支持})history和hash模式区别：它们都实现页面的跳转功能（跳转页面）它们的区别体现在3个方面:a.外观 : history模式的path路径不带#号，hash有#号b.原理 : hash模式使用onhashchange , history使用pushState , 导致

全局前置守卫pageA -----守卫----> pageB路由跳转之前, 会触发一个函数语法：router.beforeEach((to, from, next) => {})案例:在跳转路由前, 判断用户登陆了才能去<我的音乐>页面, 未登录弹窗提示回到发现音乐页面实现：● 在router/index.js 路由对象上使用固定方法beforeEach// 路由守卫// 每次页面跳转，都会执行这个回调router.beforeEach((to,

单页应用和多页应用、路由、 window.onhashchange、路由使用、vue-router、router-view、router-link、router-link-exact-active、页面跳转传参、vue路由传参的方式、路由-重定向、路由404、编程式导航、this.$router.push('/路由路径')、路由嵌套 children......

错误示范:mounted() { window.onhashchange = function(){ console.log(window.location.hash) const { hash } = window.location if (hash === '#/index') { this.comName = 'MyIndex' } else if (hash === '#/movie') { this.comN

找到代码的两种方法(1)在elements中找(2)用vue调试工具

生命周期函数父组件和子组件8个钩子函数执行顺序打开页面时如图所示,先执行父组件的beforeCreate ,created ,beforeMount ,再执行子组件的beforeCreate ,created ,beforeMount ,然后执行子组件的mounted ,最后执行父组件的mounted子组件里更新由父传子的数据时销毁子组件...

组件进阶-props校验props校验普通格式： props: [“propA”, “propB”]。没有类型检查高阶格式：props: { // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证) propA: Number, // 多个可能的类型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true

vue组件生命周期一个组件从 创建 到 销毁 的整个过程就是生命周期生命周期函数(钩子函数)vue 框架内置函数，随着组件的生命周期，自动按次序执行作用：特定的时间点，执行某些特定的操作场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据阶段!!!:● 初始化 → 创建组件 → beforeCreate 、created● 挂载 → 渲染显示组件 → beforeMount 、mouted● 更新 → 修改了变量 → 触发视图刷新 →

vue组件化开发组件是可复用的 Vue 实例, 封装标签, 样式和JS代码vue组件分类：页面组件页面下的功能组件组件化开发 ：一个页面(.vue)可能有一个或多个组件(.vue)组成完整的页面功能● 封装的思想，把页面上 可重用的部分 封装为 组件，从而方便项目的 开发 和 维护一个页面， 可以拆分成一个个组件，一个组件就是一个整体, 每个组件可以有自己独立的 结构（template） 样式(style) 和 行为(script) (html, css和js)小结● 现代前端开发

动态class目标用v-bind给标签class设置动态的值语法● 格式1：<标签 :class="变量" />● 格式2：<标签 :class="{类名1: 布尔值, 类名2: 布尔值}" />○ 如果布尔值为true，就添加对应的类名说明：可以和静态class共存<style> #app{width:500px;margin:50px auto;border:3px solid red;} .box{

报错:错误原因:price写成了字符串类型,字符串不能调用toFixed()

什么是重绘和回流重绘:当元素的一部分属性发生改变,如外观.背景.颜色等不会引起布局变化,只需要浏览器根据元素的新属性重新绘制,是元素呈现的外观叫做重绘.回流:当render树中的一部分或者全部因为大小边距等问题发生改变而需要DOM重新计算的过程重绘不一定回流(比如颜色的改变),回流必然导致重绘(比如改变网页位置)方法:1.需要对元素进行复杂的操作时,可以先隐藏(display:‘none’),操作完成后再现身2.需要创建多个DOM节点时,使用DocumentFragment创建完后一次性的加入d

[Vue warn]: Error in v-on handler: “TypeError: “name” is read-only”methods: { del(idx) { this.list.splice(idx, 1) }, add() { const { good, list } = this // 1.判断 const { name, price } = good if (name == '') return