hx_programmer的博客

听到很多这个问题,想了一下,自己也不是很清楚,写了一个demo,打印结果如下1.父组件的beforeCreate2.父组件的created3.父组件的beforeMount4.子组件的beforeCreate5.子组件的created6.子组件的beforeMount7.子组件的mounted8.父组件的mounted...

一 .安装json-server包npm install -g json-server二 . 创建一个文件夹,在里面创建一个json文件,名字随意,在json文件中把你需要的数据按json合适的要求定义一个对象例如:{ "assets": [ { "id": 1, "name": "外套", "price": 99 }, { "id": 2, "name": "裤子", "price": 34 }, { "id": 3, "name": "鞋", ".

文档学习类1.MDNMDN是一个完整的学习平台，你可以在这里深入学习Web技术以及能够驱动Web的软件，包括：网络标准（例如：CSS、HTML 和 JavaScript）、开发开放网络应用、开发 Firefox 附加组件。2.菜鸟教程菜鸟教程提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识，可以看做是前端开发字典，可在上边查漏补缺。3.W3CSchoolw3cschool是一个专业

1.在项目中安装eslintnpm i eslint typescript -D2.在项目根目录，运行npx eslint --initnpx eslint --init (1)按交互提示安装相关插件 (2)它会自动生成eslint的配置文件3.设置vscode的自动保存格式化在项目根目录下，补充配置文件：.vscode\settings.json代码:{ "eslint.run": "onType", ...

区别1.手段：v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏； 2.编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换； 3.编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件

现在页面上显示的都是大数据学科下的标签列表,需求时点击左侧导航标签按钮页面显示所有学科的标签列表点击之前:点击之后:上面的图可以看出点击之后调试工具里面的数据和URL都发生了变化,所以我们可以侦听$route里面的数据,代码如下: watch: { $route (to, from) { if (to.fullPath === to.path) { this.form.subjectID = null ...

题目:20个div有一个div里面没有内容,如何用css选择器快速找出这个盒子? <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <di

1.英文key转化为中文key formatData(list) { const map = { 'id': '编号', 'password': '密码', 'mobile': '手机号', 'username': '姓名', 'timeOfEntry': '入职日期', 'formOfEmployment': '聘用形式', 'correctionTime': '转正日期',

为什么需要自定义指令?除了核心功能默认内置的指令 (v-model和v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个例子有一个输入框,当页面加载时，该元素将获得焦点 (注意：autofocus在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：...

在我们使用addRoutes方法配置动态路由时,经常会出现两个bug,以下我们就来说说这两个bug和解决办法1.刷新页面出现的白屏bug// 解决刷新出现的白屏bug next({ ...to, // next({ ...to })的目的,是保证路由添加完了再进入页面 (可以理解为重进一次) replace: true // 重进一次, 不保留重复历史 })2.退出后，再次登陆，发现菜单异常 （控制台有输出说路由重复）原因:路由设置是通过rout...

介绍： Excel 的导入导出都是依赖于js-xlsx来实现的。 在 js-xlsx的基础上又封装了upload-excel.vue来方便导入数据。1.下载js-xlsx插件Excel 的导入导出都是依赖于js-xlsx来实现的 js-xlsx是必须插件npm install xlsx -S2. 下载或复制 Excel 的导入 组件下载地址:vue-admin-elementvue-element-admin/src/component...

题目:// btnCount: 最多能看到几个按钮// total: 总条数// size: 每页几条// page: 当前第几页function f(total, size, page，btnCount=5) { // show me your code const arr = [] // 能看到的页码集合 return arr}// 在可能的情况下，让page处于正中间f(100, 10, 1, 5) // ==> [1, 2, 3, 4, 5]f(10...

当我们做excel导入的时候例如导入上图所示的excel表格,你会发现excel会对时间进行特殊的编码,我们获取的值如下图但是后端通常需要的是标准的时间格式,这是我们需要进行还原解决办法:function formatExcelDate(numb, format = '/') { const time = new Date((numb - 25567) * 24 * 3600000 - 5 * 60 * 1000 - 43 * 1000 - 24 * 3600000 - 8 .

如上图所示两个按钮用的同一个弹出框,这里表单我是单独封装的一个组件问题: 例如要验证用户名不能重复,当你在表单验证时,编辑和添加是共用一套表单验证规则，而在添加时: 约定所有的已有的用户名是不能使用的, 但是当你做编辑功能时,你只是改了别的数据,没改用户名,这种情况应该是允许的,但是你会发现用户名那一栏就会提示你的用户名必须唯一下面我们说说解决方案:1.定义一个用来接收你验证表单需要用到的数据 data() { return { // 用来接收验证表单数据...

这里我们从基础用法一点点说一,基础用法二,带斑马纹表格三,带边框表格边框和斑马纹基本一样,在Table标签上加一个border属性就可以四,带状态表格这里row-class-name的值为一个函数函数里可以给任意行加上状态类名,这里的状态类名可以去Element-ui中Alert 警告组件中查看,只需要在警告类名后加"-row"就行这里就说这么多,详情可以参考Element-ui...

一, 为什么要用侦听器虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过watch选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。二,watch是什么watch是一个对象，对象就有键跟值，　　键就是我们要监听的数据，　　值可以是函数：当我们监听的数据发生变化时，需要执行的函数，这个函数有两个形参，第一个是当前的值，第二个是变化后的值；　　值也可以是method中的函数名：函数..

一,怎样使用svg-icon组件1,安装依赖npm i svg-sprite-loader@4.1.32,配置 vue.config.jsconst path = require('path')function resolve (dir) { return path.join(__dirname, dir)}补充一个配置{ }chainWebpack (config){ // set svg-sprite-loader config.module

我们先来说说他们两的原理 v-model: :sync:小结.sync与v-model区别是 相同点：都是语法糖，都可以实现父子组件中的数据的双向通信。 区别点： 格式不同。 v-model="num", :num.sync="num" v-model： @input + value :num.sync: @update:num v-model只能用一次；.sync可以有多个...

const arr = ["b", "c","b", "c","a", "b", "c"]const obj = {}// 你的代码 ...console.log(obj) // ==> {a：1， b: 3, c: 3}这里我写出了两种方法 第一种方法:forEach代码如下// 第一种方法(forEach) var arr = ['a', 'b', 'c', 'b', 'a', 'f', 'b'] var obj = ...

因为是用第三方组件写的,所以我们可以先用浏览器调试工具看一看我们分别点击他们的时候有没有什么变化上面的两张图可以看出当我们分别点击的时候,被点击的选项会多一个类名(is-active)所以我们可以直接给这个类名添加高亮的样式就可以,代码如下:...

vue-router中经常会操作的两个对象route和router两个。1、$route对象 $route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。 1. $route.path 字符串，对应当前路由的路径，总是解析为绝对路径，如"/foo/bar"。 2. $route.params 一个 key/value 对象，包含了 动态片段 和 全匹配片段， 如果...

git常用命令一, 新建代码库 1.git init (在当前目录新建一个Git代码库) 2.git init [project-name] (新建一个目录，将其初始化为Git代码库) 3.gitclone [url] (下载一个项目和它的整个代码历史)二,配置 1.git config --list (显示当前的Git配置) 2.git config -e [--global] (编...

首先我们可以看到根组件是App.vue然后可以看到App.vue里面只有一个路由出口,所以我们再去看路由配置文件(router/index.js)因为进的是主页所以我们直接看"/"根路径就可以了,可以看到挂载了layout组件(layout/index.vue)如图在index.vue挂载了三个子组件分别是Navbar,Sidebar,AppMain然后可以看到在AppMain.vue里面可以看到有一个二级路由出口,所以再回到router/index....

Web前端开发最常见的编程软件有以下几种: 1.Visual Studio Code(VS Code) 简介: Visual Studio Code(VS Code)是微软2015年推出的一个轻量但功能强大的源代码编辑器，基于 Electron 开发，支持 Windows、Linux 和 macOS 操作系统。它内置了对JavaScript，TypeScript和Node.js的支持并且具有丰富的其它语言和扩展的支持，功能超级强大。Visual Studi...

目标：转换格式const arr = [{label: '男', value: 0},{label: '女', value: 1}]function f(arr) { // 写代码 // reduce}const obj = f(arr) // obj ===> {0: '男', 1:'女'}代码： 感觉遍历数组的方法差不多都可以做 以下我总结了几种1.reduce方法 const arr = [{label: '男', value: 0},{la...

先来看效果目标 通过vuex发送请求 渲染页面 代码：

新手vue中练习v-module与计算属性computed的小demo这里也可以在插值表达式中直接运算结果 但是个人提倡通过计算属性来对数据进行计算v-module.后面的是修饰符 有三个属性.lazy并不是实时改变，而是在失去焦点或者按回车时才会更新.number将输入转换成Number类型.trim可以自动过滤输入首尾的空格代码：<template> <div id="app"> <nav> <h...

1. Ctrl+C复制选中的文本,如果空选,则复制这一行2.Ctrl+X剪切选中的文本,如果空选,则剪切这一行3. Ctrl+V粘贴文本4. Ctrl+A全选5.Ctrl+Z返回上一步6.Ctrl+/单行注释7.Ctrl+S保存8.Crl+F查找9.Crl+P查找文件10. Crl+ ` (Tab上面的按键)打开终端11. A|t+Z自动换行12.Crl+↑ / ↓上下滚动13.A|t+↑ / ↓当前所在文本行上下移动14.Cr.

常用的遍历数组方法1. forEach 说明: forEach是最简单、最常用的数组遍历方法，它提供一个回调函数，可用于处理数组的每一个元素，默认没有返回值。回调函数的参数,第一个参数是数组的每一项,第二个参数是数组中每一项的索引,第三个参数是该数组本身,后两个参数可选 示例:var arr = [1, 2, 3, 4, 5]arr.forEach((item, index) => { c...

五大核心1.state： 统一定义公共数据（类似于data） (1) 如何使用全局state 1.直接使用: $store.state.属性名 (this.$store.state.属性名) 2.map辅助函数:在组件中按需导入mapStateimport{mapState}from"vuex"在计算属性中添加你要使用的state属性computed: { ...mapState(['xxx']), ...mapStat...