记录点滴

2021，17个 最流行的 Vue 插件 - 掘金

vue-cli中配置：以下只适用于开发环境。1/ 在devserver中配置如下： devServer: { host: '0.0.0.0', port: port, open: true, proxy: { // http代理 [process.env.VUE_APP_BASE_API]: { target: `http://localhost:8080`, // secure: false, // 如

后台设计一张分类表的时候，如果有多级分类，通常会这样设计，使用parentId来标注它的父级是哪条数据，而且这种分类往往是不确定多少级：这种数据，对于后端来说只是一条条数据，而对于前端来说，必须把这样的数据转化为树形数据，此时可以使用递归方法类解决此类问题：后端传过来的数据：最终的转化的数据格式如下：递归算法：function toArrayTree(array, parentId) { if(!Array.isArray(array)) { return [];

以notice提醒组件为例，调用组件，如下，实现了两个方法：show方法时显示组件remove方法销毁组件// 加载组件let noticeCom = vm.$create({ title: '提醒标题', content: '提醒内容', duration: 2000 // 组件的显示时长}).show()// 销毁noticeCom.remove()实现思路：（1）首先创建组件（2）使用render函数加载组件（3）$mount挂载组件

vu递归组件的实现：<!--递归组件--><template> <div class="contain"> <ul> <li v-for="(item, i) in data" :key="i"> <p>{{item.name}}</p> <digui :data="item.cList" />

下边只是对vue文档的记录，加深印象。程序化的事件侦听器假如一个页面开启计时器时，当且患页面时，需要清楚它，因为setInterval时全局的，之前做法是：data() { return { timer:null }},mounted() { this.setTime()},beforeDestroy() { clearInterval(this.timer)},methods: { setTime() { this.timer = setI

今天又看了一遍vue文档中的渲染函数，理解的差不多了，这里记录下，方便查阅，平时写的template组件vue内部通过正则匹配还是会编译成一棵虚拟节点树，最后放到渲染函数中去执行。我们先用一个slot插槽的例子引出渲染函数：很简单，Hello组件根据父组件传递的level值来判断渲染h1还是h2。// Hello.vue<template> <div class="hello"> <h1 v-if="level===1"><slot&gt

默认情况下，一个 Vue CLI 项目有三个模式：development 模式用于 vue-cli-service servetest 模式用于 vue-cli-service test:unitproduction 模式用于 vue-cli-service build 和 vue-cli-service test:e2e环境文件：当运行vue-cli-service 命令时，所有的环境变量都从对应的环境文件中载入。环境文件：.env #...

这里只是记录下：require-context(directory, true/false, reg) 功能类似于 body-parser。有三个参数：要搜索的目录、一个标记表示是否搜索其子目录、创建一个匹配文件的正则表达式，webpack 会在构建中解析代码中的require.context()。语法如下：const moduleContext = require.context(directory, true, /\.*$/)一个常用的属性：moduleConte...

git commit -m "+" --no-verify

vue 实现仿屏幕切换效果，很简单：<template> <div> <transition name="fade-transform" mode="out-in"> <slot></slot> </transition> </div></template><script> export defau.

平时在使用element开发时，难免需要修改其样式，有时修改不起作用，在vue-loader文档中中给出了解决方法：深度作用选择器（其实就是样式穿透）>>><style scoped> .a >>> .b{/*···*/}</style>最后会被编译成：.a[data-v-f3f3eg9] .b {/*···*/}有些像Sass之类的预处理器无法正确的解析 >>>，这种情况下，可以使用/deep

效果图如下：代码刚开始想贴出来，后来一看有点多，在csdn上看不太方便，而且大部分是样式，逻辑其实很简单。vue 和 koa（后端koa这未连数据库，数据只是实时的，关闭、后退、刷新浏览器都会重新登录！）代码都放到github上了，有需要的自行下载。有什么问题欢迎留言。...

在开发后台管理系统中，按钮权限判断是必须的！以下是一个简易的权限判断指令，实际还需要结合自己业务来：全局权限指令：// permission/index.jsimport store from 'store'export default { inserted(el, binding) { const { value } = binding co...

前端在做路由验证时，使用router.Routes动态添加路由非常方便。以下是后台返回的一组路由表，根据路由中的name字段判断此路由对应的组件是否显示：import Vue from 'vue'import VueRouter from 'vue-router'import First from './components/first'Vue.use(VueRouter)con...

官方文档概念：混入： 提供了一种非常灵活的方式，来分发Vue组件中可复用的功能，一个混入对象可以包含任意组件选项（相当于一个对象）。 当组件使用 混入对象（mixin）时，所有混入对象的选项将被 " 混合"( 下边会解释)进该组件本身的选项。eg:// 混合对象const mixin = { created() { this.hello() ...

splice方法在实际开发中，非常常用，记录下几个应用小例子：1、添加、删除，类似todolist：效果：核心代码：arr数组是一个以为数字数组，双层for循环，外层循环是一行的数据（有几层），里边循环为数组的元素（数字），决定这一层中红色小方块的数量，计数器控制小方框数量，右边 加 或 减 控制该层是否被删除：<template> <div s...

只暴露了button的样式，其他的如：倒计时秒数、倒计时前和倒计时中的文字可在源码中直接修改：效果如下：<template><div> <button :style="style" @click="click" :disabled="init.status"> {{ init.time }} <sp...

安装npm i --save async-validator使用需要创建一个描述符对象import Schema from 'async-validator'// 创建描述对象const descriptor = { name: { type: 'string', requried: true, validator...

最终效果：<!--引入表单组件--><template> <div> <lv-form> <lv-form-item label="输入框" prop="inp"> <lv-input v-model="row.inp"></lv-input> ...

在使用echart组件时，渲染数据多数情况下会是动态添加，也就是前台获取数据，通过props传递给echart组件。对于vue生命周期函数执行顺序不熟悉的小伙伴儿，会碰到数据渲染失败的问题，原因如下：下边是父组件father, 引入了子组件son, 来看下执行顺序：<!-- father --><template> <div class="f">...

最近项目中使用打印功能，使用vue-print-nb最后打印没有样式，刚开始以为是不支持css预处理（scss、stylus），结果发现不是这个问题，真正原因是：下边是需要打印的div，在写css样式的时候，这个div不可以让父级给包裹（也就是不可以有别的父级包裹这个div），且父级不可以有样式！！！、打印时候没样式多数是这个问题！！！...

什么是指令：指令只一种可以附加到DOM元素的微命令(tiny commands). 它们通常以"v-"作为前缀, 以方便Vue知道你在使用一种特殊的标记, 从而确保语法的一致性. 如果你需要对HTML元素的低级别(low-level)访问来控制一些行为, 它们通常很有用.创建自定义指令：Vue.directive( 'directiveName' )在html中使用：&lt...

以input框为例，在input组件上绑定v-model指令，实现双向绑定：实现思路：为input 框动态绑定父级传过来的值getedValue（是value的引用），因为遵循单向数据流的规则，接下来需要修改父级传过来的值，所以下边是把父级传过来的值赋值给data中的变量getedValue。@input="handleInput" 事件触发的时候，改变父级传过来值，间接的修改了inp...

v-text ：更新文本内容_____________________________________________________________________________________________________<div id="ele"> <p v-text="mes"></p></div> <scri...

checked单个复选框：最终绑定的是布尔值（ true 或者 false ）；（ 常用于单选题 ）<div id="ele"> <input id="box" type="checkbox" v-model= "mes"> <label for="box">{{mes}}</label></div><scri...

computed计算属性先解读下官方文档，conputed的设计的初衷用于简答的运算，模板内不宜放入太多的逻辑，否则维护艰难。 <div id="app">{{message.split("").reverse().join("")}}</div><script> var vm = new Vue({ el:"#app...

常用动态绑定样式：class先看下官方文档：对象语法 :class="{ property : truth }"动态绑定class，我们可以传给v-bind一个对象，动态切换class<div id="app" class="active" :class="{show:isShow,hidden:isHidden}"></div><sc...

在官方文档中，是这样说明的：可被用于一些常见的文本格式化，vue中过滤器的作用可被用于一些常见的文本格式化。（也就是修饰文本，但是文本内容不会改变）补充：过滤器分全局过滤器和局部过滤器，下边我着重说下全局过滤器，因为全局过滤器在项目中使用频率非常高！局部过滤器：过滤器可以用在两个地方：双花括号插值 或 v-bind表达式。eg：先来看看第一个小例子：<div id=...

来一个小应用，考察对vue中的输入框、复选框数据的双向绑定、filter过滤器、数组灵活运用及computed应用的小例子：商品列表：全选功能，总价根据复选框和商品数量而定，删除商品等等。。。大家可以复制代码运行下，在编辑器里看比较合适！！！直接上代码：<style> .wra { width: 100%; position: absolute; top: ...

先看下官方文档怎么解释：vue2.0中，代码的复用和抽象主要形式是组件，然而有些情况需要对普通对象进行dom操作时，可用自定义指令：局部指令： <div id="app"> <input type="text" v-focus> </div><script>// 页面加载输入框自动获取焦点let vm...

在讲h函数之前，我们先来了解下虚拟dom：虚拟dom简单来说就是一个普通的JavaScript对象，包含tag，props，children三个属性。。。<div id="app"> <p className="text">lxc</p></div>上边的HTML代码转为虚拟DOM如下：{ tag:"div", ...

先来看下官方文档的解释：每个vue实例在被创建时都要经过一系列的初始化过程。例如：数据、事件的监听、编译模板，同时在这个过程中，vue会在其中添加一些函数、运行，这些函数叫做生命周期钩子函数。这里我分了三个阶段说下都有哪一些钩子函数：阶段一：Vue实例创建阶段的生命周期函数 beforeCreate：Vue实例在内存中刚被创建，数据对象（data）和方法（method...

vue中组件化十分重要知识点，这里不过多赘述，相信大家已经掌握。这几天又看了几遍官方文档，有些重点在这记录下，日后方便查阅。组件是一个个可复用的独立的ui模块，它是一个Vue实例，所以它们与new Vue接受相同的选项，data、computed、watch、methods、生命周期钩子都有。但是除el之外，因为最终所有组件都会被插入到根实例中去。全局组件：Vue.component(na...

关于props，老套路，看下官网的解释：props可以是数组或对象，用于接收父组件的数据。。。之所以父组件的数据需要通过props传到子组件中，因为组件实例的作用域是孤立的，子组件模板不可能直接引用父组件数据。。。（也就是说子组件不能在模板中渲染父组件中的数据）<div id="app"> <son-component :alias="name">&lt...

家住南京的李先生，最近看上了一套房子，到了售楼处才发现，该楼盘放在早已售罄。好在售楼处工作人员王女士出于好心告知李先生，不久之后还会有一些尾盘推出，开发商在办理相关手续，手续办理好之后便可购买。但到底什么时候能办理好，目前无人知道。于是李先生记下了售楼处电话，每天都会打电话询问是否到了购买时间。除了李先生，还有它的朋友、七大姑八大姨也会每天定点咨询这个问题。一周之后，售楼处王女士决定辞职，...

vue在2.6.0中，为具名插槽和作用域插槽引入了新的语法（v-slot指令），之前的slot和slot-scope这两个已经被废弃，但未移除文档。最近搜了搜百度上边关于插槽相关知识点，内容有点老旧，大多都是2.6.0之前版本的slot，有一些新版的要不就是全篇一堆代码，要不就是跟官方文档一模一样！！！闲来之余，结合官方文档，详细解读下新版插槽slot：以下我从8个方面介绍插槽的用法：...

在vue中父组件操作子组件通常会用ref这个特性，结合文档我们来看下ref有哪些用法：官方定义：ref被用来给元素或者子组件注册引用信息。换句话讲就是vue留了一个操作原生dom元素或操作子组件实例的接口；当ref定义在元素或组件上，元素或组件信息会被注册在实例中的$refs对象上。用在元素上：（1）操作单个dom元素 <div id="app"&gt...

component是vue的一个内置组件，作用是：配合is动态渲染组件。<component :is='组件'></component>不同组件之间进行动态的切换//两个子组件var son1 = { template: ` <div> <h1>子组件-1</h1> ...

在大型项目中，使用vue进行开发，非父组件传值通常会使用vuex状态管理。今天将要聊的是eventBus（事件总线/发布订阅者模式），它也可以进行非父组件通信，通常会用在一些非常简单的小demo中。关于发布订阅者模式之前的一篇文章有详细介绍到：https://blog.csdn.net/qq_42778001/article/details/96692000原理就是：通过实例化一个空的...