于景波的技术博客

原创 手写vue-router

MyRouter.vueimport Home from "./views/Home";import About from "./views/About";import Vue from "vue";class VueRouter { constructor(options) { this.$options = options; this.routeMap = {...

原创 匿名插槽，具名插槽，作用域插槽

Vue 2.6.0之后采用全新v-slot语法取代之前的slot、slot-scopeSlot1.vue<template> <div> <slot>后备内容</slot> </div></template><script> export default {...

原创 封装一个树组件

Item.vue<template> <li> <div @click="toggle"> {{model.title}} <span v-if="isFolder">[{{open ? '-' : '+'}}]</span> </div> <ul v-show=...

原创 封装一个表单组件和通知组件

Input.vue<template> <div> <input :value="value" @input="onInput" v-bind="$attrs"> </div></template><script>export default { inheritAttrs: false, ...

原创 权限菜单（后端返回数据）

权限菜单后端准备数据：Server.jslet express = require('express');let app = express();app.use('*', function (req, res, next) {res.header('Access-Control-Allow-Origin', '*');//Access-Co...

原创 使用路由做权限验证

在local Storage中定义一个标识：在路由文件中配置元信息，如下：用户页也需要登录：只要一切换页面，就需要看一个有没有这个权限，那就在最大的路由下配置，如下：逻辑如下：测试：如果有标识了，如下：考虑一个问题，...

原创 vue路由及路由的生命周期(面试常问)

基础配置如下：效果：添加用户和用户列表：效果：使用名字进行跳转时，有点问题：修改：一个路由可以对应两个组件，也就是多视图：效果：添加用户：用户列表：带参数路由：...

原创 vue组件通信（组件同步数据）

创建一个小球组件：<template> <div class="ball" :style="style"> <slot></slot> </div></template><script>export default { data() { return {}; }, ...

原创 组件通信大总结

组件交互（传值，交互）分类：父组件 => 子组件： 属性props // child props: { msg: String } // parent <HelloWorld msg="Welcome to Your Vue.js App"/> 引用refs // parent <HelloW...

原创 vue递归组件

SubMenu.vue<template> <div> <div class="title" @click="change"> <slot name="title"></slot> </div> <div v-show="flag"...

原创 通过vue-cli创建的项目设置配置文件

配置文件是基于node的，node不支持import语法。publicPathpublicPath：之前叫baseURL，可以配置开发环境或生产环境的url环境有两种：process.env.NODE_ENV production developmentnpm run serve是开发环境 npm run build是生产环境 ---> 打包测试看效...

原创 vue自定义指令

默认的函数式：实现如下：默认函数形式 ＝ update ＋ bind内部绑定事件：传个数：封装一个focus指令：改进：...

原创 组件交互（$refs）

原创 组件交互（$parent,$children,provide，inject）

组件交互（$parent,$children,provide，inject）通过案例学习$parent和$children，如下：provide的使用：还有两种：$refs 获取实例envetBus 平级组件数据传递，这种情况下，可以使用中央事件总线的方法...

原创 组件交互（props,emit,$attrs,$listeners）

全局组件和局部组件开发的优点方便协作 方便维护 复用 （数据是根据传入的数据展示）全局组件和局部组件：注意：命名 需要使用双标签父传子传孙（父传子），只能一级一级的传，不能跨级传：传递时，进行属性校验：方法传递（子触发父中的方法）：请问，如下代码点击执行吗？答：不执行。它为它是组件上的属性，就不是我们常见的点...

原创 vue的生命周期

官网文档：https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA学习生命周期就是学习几个钩子函数：

原创 计算属性，方法，watch

方法没有缓存：计算属性有缓存：watch的使用：使用watch，第1次并不会触发。可以使用钩子函数，使它在第1次调用时，就被显示：watch的另外写法：computed 和 method的区别？答：computed有缓存，method没有缓存。computed 和 watch 区别？答：w...

原创 vm上的方法

vm.$el,$options,$nextTick,$watchVm.$options和vm.$el:数据更新是批量的：批量更新完再去操作：之前：$watch的使用：

原创 vue数据劫持

结果：数据也可能是对象，但如果是对象，上面的数据更新了就不会调用：结果：解决：给age新赋一个对象：新的对象并没有被拦截，如下：解决：数组调用push 是无效的 Object.defienProperty 不支持数组的：vue把这个数组上所有的方法都重写了，如下：...

原创 vue双向绑定

单向绑定：单向数据变化 视图更新双向绑定：视图更新也会影响数据变化不使用v-model:v-model 是 @input + :value 的一个语法糖:不只输入框有双向绑定，常见的表单项也可以进行双向绑定：...

原创 vue基础遗漏

外部模板和内部模板：放对象需要注意：什么样的数据可以被渲染到模板上？答：只要模板中使用了数据 必须在实例上声明 库和框架的区别？库：我们去调用库中的方法框架：我们在指定的位置写好代码，框架帮我们调用。框架是库的升级版。声明式和命令式的区别：for循环 命令式 reducer 声明式指令相关v-once：内部会进行缓存 ...