随笔分类 - vue基础
摘要：1、直接引入axios发送 一般为了方便或者是刚学习vue时，我们都喜欢这样做。比如，在组件里引入axios再发送。 组件里引入：import axios from 'axios'; 直接放在方法里发送： axios.get('https://autumnfish.cn/api/joke/').th
阅读全文
摘要：设置端口号和关闭语法检查 const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, //关闭语法检查 lintOnSave:fal
阅读全文
摘要：为什么要在Vue的原型对象里添加属性和方法 有时候为了方便组件使用同一个数据或者方法，可以定义在Vue的原型对象上，这样就是全局的了，所有组件都能够访问到。经常封装发送axios请求的方法为一个js文件。然后引入添加到Vue的原型对象上。这样发送请求很方便。而且维护方便。 在Vue的原型对象里添加属
阅读全文
摘要：引入路由配置文件index.js报如下错： Error in beforeCreate hook: "TypeError: this._router.init is not a function" Error in beforeCreate hook: "TypeError: this._route
阅读全文
摘要：1、子级路由加斜杠 这样子级路由和父级路由就处于同一级了。从路由上就无法看出是子级路由。 至于为啥父子容器也会被显示，而不是单独显示子级组件的内容？ 子组件内容 我们去父组件里看看 原来是因为父组件里有<router-view/>标签。 虽然从路由配置上看，子组件是和父组件处于同一级路由，但是，子组
阅读全文
摘要：npm 安装scss，项目文件根目录下安装 因为有些版本兼容问题，我选择了低版本。高版本webpack不兼容 npm i --save-dev sass-loader@8 sass-loader依赖于node-sass。所以还要安装sass npm install node-sass --save
阅读全文
摘要：安装依赖包的两种方式 --save 是在package.json的【dependencies】里面 --save-dev 是在package.json的【devDependencies】里面 依赖安装在package.json的【dependencies】的三种方式 npm i element-ui
阅读全文
摘要：1.移动端常用 UI 组件库 Vant https://youzan.github.io/vant Cube UI https://didi.github.io/cube-ui Mint UI http://mint-ui.github.io 2.PC 端常用 UI 组件库 Element UI h
阅读全文
摘要：①将vue项目里的代码打包。 打包目的：浏览器不认识vue文件和vue里的template标签和引入模块的js代码。所以要打包，将vue项目转为纯粹的html、js、css文件。 如果用脚手架写的项目，即可不用安装webpac包进行打包，和 用bable进行js代码的转换。直接用npm run bu
阅读全文
摘要：1.两个新的生命周期钩子 作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。 具体名字： activated路由组件被激活时触发。 deactivated路由组件失活时触发。 如，在一个路由里的某个数据，在切换到另一个路由对应的组件后，里面的数据还保留，也就是不销毁原来的组件，但是需要关闭
阅读全文
摘要：1.replace属性 <router-link>的replace属性 作用：控制路由跳转时操作浏览器历史记录的模式 浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push 如何开启replace模式：<rou
阅读全文
摘要：1.路由的query参数 传递参数 <!-- 跳转并携带query参数，to的字符串写法 --> <router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link> <!-- 跳转并携带query参数，to的对象写法 --
阅读全文
摘要：1、相关理解 1.1、vue-router的理解 vue的一个插件库，专门用来实现SPA单页面网站应用 1.2、对SPA应用的理解 1、单页 Web 应用（single page web application，SPA）。 2、整个应用只有一个完整的页面。 3、点击页面中的导航链接不会刷新页面，只会
阅读全文
摘要：1、理解Vuex 1.1、Vuex是什么？ 在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。 1.2.何时使用？ 多个组件需要共享数据时 1.3.Vuex工作原理 1，具体流程： 插件
阅读全文
摘要：1、vue脚手架配置代理 是用代理服务器可以解决跨域问题。 解决跨域： 方式1：后端使用cors服务器里返回一些相应头回来解决。 方式2：jsonp 方式3：代理服务器。因为代理服务器也是服务器。和后端服务器一样。服务器之间通信是用的http请求。 ajax是前端技术。前端和服务器通信才会有跨域问题
阅读全文
摘要：1、nextTick vue里特殊的生命周期钩子。 语法：this.$nextTick(回调函数) 作用：在下一次 DOM 更新结束后执行其指定的回调。 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。 比如：修改了vm的data中的数据要
阅读全文
摘要：1、全局事件总线（GlobalEventBus） 一种组件间通信的方式，适用于任意组件间通信。 安装全局事件总线： new Vue({ ...... beforeCreate() { Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm }, ....
阅读全文
摘要：1、webStorage(js在浏览器的本地存储) 存储内容大小一般支持5MB左右（不同浏览器可能还不一样） 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。 相关API： ①. xxxxxStorage.setItem(
阅读全文
摘要：src\App.vue <template> <div id="root"> <div class="todo-container"> <div class="todo-wrap"> <MyHeader :addTodo="addTodo"/><!-- 父组件向子组件传递一个函数，然后子组件调用这个
阅读全文
摘要：1、ref属性 被用来给元素或子组件注册引用信息（id的替代者） 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc） 使用方式： a. 打标识：<h1 ref="xxx">.....</h1> 或 <School ref="xxx"></School> b. 获取：t
阅读全文
