10 2022 档案
摘要：编程式路由导航：不借助router-link实现路由跳转，使路由跳转更灵活。 ① 使用$router上的push和replace方法进行跳转： methods: { test1() { // push可以使得浏览器记住操作 this.$router.push({ name:..., path:...
阅读全文
摘要：路由传参params： ① 配置路由，声明接收params参数：在path路径以占位符：形式声明参数！ export default new VueRouter({ routes: [{ path: '/father', component: Father, children: [{ name: '
阅读全文
摘要：Vue路由：vue-router(实现SPA应用) vue-router3 => vue2 vue-router4 => vue3 SPA应用： ① 单页web应用。 ② 整个应用只有一个完整的页面。 ③ 点击页面中的导航链接不会刷新页面，只会做页面的局部更新。 ④ 数据需要通过ajax请求获取。
阅读全文
摘要：getters配置项：加工state中的数据进行使用。（类似于computed） getters和state的关系类似于computed和data的关系 配置： const getters = { demo() { return ... } }, export default new vuex.St
阅读全文
摘要：Vuex：在Vue中实现集中式状态(数据)管理的插件，对vue中多个组件的共享状态进行集中式的管理(读/写)。是专为Vue.js应用开发的状态管理模式+库。可实现任意组件间通信。 多组件共享数据：多组件共享数据，使用全局事件总线，重复方法过多来回读写数据造成冗余。 使用Vuex的时机： ① 多个组件
阅读全文
摘要：处理跨域：① cors ② JSONP ③ 配置代理服务器 配置代理： 均需要在vue.config.js中进行配置 方法一：直接定义代理服务器转发地址proxy，客户端请求url为代理服务器地址 devServer: { proxy: 'http://localhost:5000' }, 优点：配
阅读全文
摘要：消息订阅与发布pubsub：实现任意组件间通信 使用步骤： ① 安装pubsub-js：npm i pubsub-js ② 引入：import pubsub from 'pubsub-js' ③ 订阅消息：使用pubsub自带的subscribe方法 methods: { // subscribe的
阅读全文
摘要：组件自定义事件：组件间通信方式（适用于子组件传值给父组件） 使用场景：A为父组件，B为子组件。若B想给A传值，则需在A中给B绑定事件。事件的回调要在父组件A中！ 绑定：均在父组件中进行绑定，methods进行定义方法 ① v-on/@xxx：直接进行绑定，名称为methods中方法名 <Demo v
阅读全文
摘要：ToDoList案例： 组件间通信： 父组件给子组件传参：父组件绑定值至子标签，子组件利用props接收。 子组件给父组件传参：父组件绑定函数至子标签，子组件props接收函数，并设置methods进行进一步调用。 进行勾选操作时，由于此时数据在App组件内，故在App内定义方法修改勾选值，且改变选
阅读全文
摘要：修改默认配置：使用vue > output.js 可以查看到Vue脚手架的默认配置。在vue.config.js中进行修改。 eg：lintOnSave：false //关闭语法检查 脚手架文件结构： ref属性：被用来给元素或子组件注册引用信息（id的替代者） ref属性应用在html标签上，获取
阅读全文
摘要：Vue组件化编程： 非单文件组件：一个文件包含n个组件 ① 定义组件：Vue.extend(options)创建，在options内部不能写el(组件都需要经过vm统一管理和分配)，data必须写成函数模式，避免组件复用时数据存在引用关系。 ② 注册组件：局部注册：new Vue时创建的compon
阅读全文
摘要：自定义指令： 函数式/对象式： // 函数式 directives: { // 指令与元素成功绑定时执行。 // 指令所在模板被重新解析时也执行， big(element, binding) { element.innerText = binding.value * 10 } } // 对象式 di
阅读全文
摘要：Vue内置指令： v-bind：单向绑定解析表达式，可简写为：xxx。 v-model：双向数据绑定。 v-for：遍历对象、数组、字符串。 v-if：条件渲染（动态控制节点是否存在） v-else：条件渲染（动态控制节点是否存在） v-show：条件渲染（动态控制节点是否展示） v-on：绑定事件
阅读全文
摘要：Vue.set方法和vm.$set方法：参数（实例对象的某一属性名，属性名，属性值） 用于给实例化Vue对象的某一个属性对象动态添加子属性。 不允许直接给实例化对象添加属性。即参数第一项不能为vm实例对象本身或是vm的根数据对象（即data/vm._data） <script> const vm =
阅读全文
摘要：计算属性:（computed属性）要使用的数据不存在，须通过已有属性计算得出。 原理：使用了Object.defineproperty方法提供的getter和setter。 get函数的执行时机：1.在初次获取元素时调用（产生缓存防止重复调用）2.修改数据时调用 优势：相较于methods，内部存在
阅读全文
摘要：事件处理：使用v-on:事件名 或 @事件名绑定事件。 1. 事件的回调需要配置在methods对象内，最终在vm上。 2. methods中的配置函数，this指向为组件实例对象或vm。不使用箭头函数，否则this指向改变。 3. @click="demo" 和 @click="demo($eve
阅读全文
摘要：Vue的特点： 1.采用组件化模式，提高代码复用率，使代码易于维护。 2.声明式编码，编码人员无需直接操作DOM，提高开发效率。 3.使用虚拟DOM和diff算法，尽量复用DOM节点。 Vue.config.productionTip = false; // 阻止Vue在启动时生成生产提示 初识Vu
阅读全文
摘要：Axios源码分析： ① 模拟Axios对象的创建过程： 1. Axios构造函数本身应具有defaults(默认配置参数)和intercepters(拦截器参数) 2. 在Axios原型上添加request、get、post等方法。 3. 创建实例化函数：实例化axios对象，创建instance
阅读全文
摘要：拦截器：axios.interceptors.request/response.use // 设置请求拦截器 axios.interceptors.request.use(config => { console.log('请求拦截器 成功'); config.params = { a: 100 }
阅读全文
摘要：JSON Server：模拟服务器环境插件 1.进行全局安装：npm i -g json-server 2.创建db.json文件并写入相关数据： { "posts": [ { "id": 1, "title": "json-server", "author": "typicode" } ], "c
阅读全文
摘要：前端模块化： 发展史： ① 全局函数模式：将不同的函数功能封装成不同的全局函数。（调用时会导致修改覆盖） // 全局函数模式:将不同的功能封装成不同的全局函数 let msg = 'module1' function foo() { console.log('foo()', msg); } func
阅读全文
摘要：async函数：函数的返回值为promise对象，promise对象的状态由async函数执行的返回值决定。（与then方法的返回结果规则一致） async function main() { // 如果返回值为非Promise类型的数据，则返回为成功的对象 return 521 // 如果返回Pr
阅读全文
摘要：Promise的API： Promise构造函数：Promise(executor{}) executor函数：执行器（resolve，reject)=>{} resolve函数：内部定义成功时执行的函数 reject函数：内部定义失败时执行的函数 executor函数会在Promise内部立即同步
阅读全文
