vue
我们一起学前端
这个作者很懒,什么都没留下…
展开
-
switch控件的实现[编程小技巧]
视频学习入口:点击进入前言:工作中对于switch标签,你是不是第一反应是引用第三方库,对于一个系统而言,引入ui库无可厚非;但是对于一个简单的页面为了一个switch而引入一个ui库是得不偿失的;今天就给大家分享一个自己实现switch组件的方法代码实现:<div class="wrapper" @click="signAlert = !signAlert"> <input type="checkbox" :checked="signAlert" /&g原创 2021-07-24 06:09:28 · 313 阅读 · 0 评论 -
手把手教你怎么搭建一个低代码系统
对应的视频教程:点击进入前言都2021年了,作为前端如果还不了解可视化布局的话,赶紧上车吧。下面就是我这次要分享的系统的效果图:代码实现一、初始化项目1、创建文件夹、然后终端进入文件夹,并执行vue create my-app2、启动项目二、修改目录和搭建系统框架1、去掉页面的默认内容2、新建目录:view/components/templates3、创建四个视图组件:headView.vue / leftView.vue /centerView.vue / rightView.vue原创 2021-07-21 22:59:27 · 2165 阅读 · 0 评论 -
你不知道的 npm link
视频教程:点击进入起因看react源码的时候,为了调试源码,我另外创建了一个react项目,然后在这个项目中直接引用本地react源码中的react 和 react-dom;使用线上的包很简单,这里相当于使用本地的包,所有就会用到npm link作用1、调试源码2、在本地开发npm模块的时候,我们可以使用npm link命令,将npm 模块链接到对应的运行项目中去,方便对模块进行调试和测试核心命令1、npm link:创建软链接2、npm unlink:去掉软链接3、npm link原创 2021-07-21 12:56:30 · 1865 阅读 · 0 评论 -
纯前端滑块验证
效果:实现:<template> <div> <Vcode :show="isShow" @success="success" @close="close" /> <button @click="submit">登录</button> </div></template><script>import Vcode from "vue-puzzle-vcode";export d原创 2021-02-23 14:52:18 · 502 阅读 · 0 评论 -
v-viwer组件指定预览的图片
一、v-viwer的基本使用方法:引入v-viewer及必需的css样式,并使用Vue.use()注册插件,之后即可使用。<template> <div id="app"> <!-- directive --> <div class="images" v-viewer> <img src="1.jpg"> <img src="2.jpg"> ... </div&原创 2021-02-23 11:58:13 · 812 阅读 · 0 评论 -
render函数手册篇
render函数是什么简单的说,在vue中我们使用模板HTML语法组建页面的,使用render函数我们可以用js语言来构建DOM因为vue是虚拟DOM,所以在拿到template模板时也要转译成VNode的函数,而用render函数构建DOM,vue就免去了转译的过程。当使用render函数描述虚拟DOM时,vue提供一个函数,这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫...原创 2020-03-16 20:18:17 · 242 阅读 · 0 评论 -
npm发布组件库流程
1、创建项目在指定目录中使用命令创建一个默认的项目,或者根据自己需要自己选择。vue create2、调整目录我们需要一个目录存放组件,一个目录存放示例,按照以下方式对目录进行改造3、配置项目以支持新的目录结构const path = require('path')function resolve (dir) { return path.join(__dirname, di...转载 2019-12-05 08:45:19 · 2244 阅读 · 0 评论 -
父子组件传值语法糖vue
父组件: <editorSee :modelShow.sync="modelShow" :operation="operation" :title="title" :formData='curItem' @getList="getList"></editorS...原创 2019-09-10 12:44:25 · 628 阅读 · 0 评论 -
vue中bus的使用
一、新建bus.jsimport Vue from 'vue'export const bus = new Vue()二、引用bus.js,发送消息import {bus} from './bus'bus.$emit('test', 11)三、引入bus.js,接受消息import {bus} from './bus'bus.$on('test', function (msg)...原创 2019-07-25 09:43:34 · 3608 阅读 · 0 评论 -
iview使用小技巧
重置表单清除校验有另一种更为简便的方法:<Modal v-model="showDialog" :title="modalTitle" :mask-closable="false"> <Form v-if="showDialog" ref="formData" :model="formData" :rules="ruleValidate" label-position=...原创 2019-07-20 15:50:00 · 498 阅读 · 0 评论 -
webpack 打包css z-index值被重新计算
加上这句代码就可以: new OptimizeCSSPlugin({ cssProcessorOptions: { safe: true } }),转载 2019-07-09 09:34:21 · 307 阅读 · 0 评论