element 动态合并表格的步骤
前言 element 官方的例子太简单了，不满足实际的需求 数据肯定是动态的，合并的行数，列数都是动态的，该如何知道每一行的合并数呢需求 动态合并表格，数据来源于数据库正文...
2021-05-30
vue 动态生成拓扑图的示例
横向拓扑
在 index.html 文件中引入文件。 <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css" rel="external no...
2021-05-30
vue+vant 上传图片需要注意的地方
<van-uploader v-model="fileList" multiple :after-read="afterRead" :max-count="1" />1:上传文件流，提交的模式 肯定得 form-data模式2：上传的文件file 做出处理我这里做的...
2021-05-30
vue项目如何监听localStorage或sessionStorage的变化
出现这个问题的起因：在一个VUE页面中，引入两个组件，A组件实现基础信息展示，B组件展示列表，我要通过A组件的一个按钮触发状态，然后B组件根据A组件触发的状态来做业务处理，首先想到的...
2021-05-30
详解基于element的区间选择组件校验(交易金额)
需求：这里以项目的需求为例，基本的需求如下： 分为左右值，包含左右值，正整数 左侧必须大于等于1，右侧无限大，右侧值必须不小于左侧 左侧填写数据，右侧标为必填；右侧填写数据，左侧标...
2021-05-30
利用Vue实现简易播放器的完整代码
看b站某马学习，实现一个属于自己的播放器HTML+CSS+JS<section id="xwyy"> <!--主体区域--> <section class="box" style="margin-top: 30px;"> <div class="nav"> <div cl...
2021-05-30
vue中实现点击空白区域关闭弹窗的两种方法
1. 第一种做法
首页在外层容器里面取一个名字为main，即ref="main",当bankSwitch为true的时候，弹窗出现<div class="selectedBorder" ref="main"> <div class="bankItem" v-if=...
2021-05-30
vue中activated的用法
keep-alive
<keep-alive>包裹动态组件的时候，会缓存不活动的组件实例，而不是摧毁他们。其是一个抽象的组件，自身不会渲染一个DOM元素，也不会出现在父组件链中。
说白了被<keep-a...
2021-05-30
vue 递归组件的简单使用示例
前言递归 相信很多同学已经不陌生了，算法中我们经常用递归来解决问题。比如经典的：从一个全为数字的数组中找出其中相加能等于目标数的组合。思路也不难，循环数组取值，不断递归...
2021-05-30
vue动态设置路由权限的主要思路
之前看到网上有些动态设置路由的，但是跟目前的项目不是很匹配，就自己动手实现了一种。主要思路就是：1.配置路由的时候绑定好id，可后端开发完成后，与后端同步id就行，这id唯一不变，根...
2021-05-30
通过vue.extend实现消息提示弹框的方法记录
前提回顾在项目开发中我们经常使用的组件注册分为两种，一个是全局注册和另一个是局部注册，假设我们的业务场景是用户在浏览注册页面时，点击页面中的注册按钮后，前端根据用户的注...
2021-05-30
Vue项目中使用mock.js的完整步骤
在Vue项目中使用mock.js 开发工具选择：Vscode1. 使用命令行创建vue项目（手动选择Babel，Router，Vuex）2. 导入element-ui（为了显示效果好一点），命令行输入npm i element-ui -S3.在mai...
2021-05-30
vue编写简单的购物车功能
使用vue写出简单的购物车，供大家参考，具体内容如下
代码：// An highlighted block<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" cont...
2021-05-30
基于VUE实现简单的学生信息管理系统
一、主要功能本次任务主要是使用VUE来实现一个简单的学生信息管理系统，主要功能为：1.显示所有学生的信息（默认为10个)
2. 点击按钮，显示出学号尾号为单数(或双数）的学生信息
3....
2021-05-30
vue实现一个获取按键展示快捷键效果的Input组件
遇到一个需求，页面内要自定义快捷键，这就需要可以有地方设置和展示快捷键，找了一圈Element UI发现没有能稍微改改就能用的组件，所以自己动手写了一个。
这个只有快捷键展示功能，...
2021-05-30
vue二选一tab栏切换新做法实现
问题描述
在我们做项目的过程中，有时候会要做一些tab栏切换效果。有两个tab的，有三个tab的，甚至有五六七八个tab的。平常我们直接拿饿了么的tab组件用就行了，但是偶尔自己闲着没...
2021-05-30
如何在vue-cli中使用css-loader实现css module
【前言】
无论是vue还是react的css模块化解决方案都是依赖loader来实现的 在使用上，vue中用scoped属性实现样式的私有化，利用深度作用选择器/deep来实现样式的去私有化。例子：<...
2021-05-30
vue watch监控对象的简单方法示例
watch的作用：监听vue实例上数据的变动示例：
queryData: {name: '',creator: '',selectedStatus: '',time: [],},1、普通的watchdata() { return { frontPoints: 0 }},watch:...
2021-05-30
解决vue使用vant轮播组件swipe + flex时文字抖动问题
原抖动效果改后效果解决方法在外层容器的css里加上：transform: translateZ(0);部分页面代码<van-swipe-item v-for="(item,index) in meetingList" :key="index"> <div cla...
2021-05-30
vue-quill-editor插入图片路径太长问题解决方法
最近做项目的时候有一个发布新闻的需求，新闻编辑的时候要求能发布带格式的文本内容和能展示支持图片。
由于项目是用 Vue 开发的，所以找编辑器的时候选了 vue-quill-editor 。...
2021-05-30
vue自定义组件实现双向绑定
场景：
我们比较常用的父子组件之间的交互方式：
父组件通过props将数据流入到子组件；
子组件通过$emit将更新后的数组发送的父组件；今天，我们通过另一种方式实现交互，参考input框的...
2021-05-30
vue组件是如何解析及渲染的？
前言
本文将对vue组件如何解析以及渲染做一个讲解。我们可以通过Vue.component注册全局组件，之后可以在模板中进行使用<div id="app"> <my-button></my-button></div><scrip...
2021-05-30
vue+element table表格实现动态列筛选的示例代码
需求：在用列表展示数据时，出现了很多项信息需要展示导致表格横向特别长，展示就不够明晰，用户使用起来可能会觉得抓不住自己的重点。设想实现：用户手动选择表格的列隐藏还是展示，并...
2021-05-30
vue element el-transfer增加拖拽功能
芯资管项目要求el-transfer增加拖拽排序，左右上下互相拖拽功能；
原来的组件不支持拖拽，这里要用个第三方脱宅组件sortablejs首先安装 sudo npm i sortablejs --save-devhtml代...
2021-05-30
vue.js watch经常失效的场景与解决方案
使用过watch的，应该起码经历过一次失效。比如，我们监听对象的时候，在没有踩坑之前，很容易这样写：但是，❌，这里的watch是无效的!!!因为 obj 是引用类型！！！引用类型的指针是固定的...
2021-05-30
vue实现防抖的实例代码
防抖：防止重复点击触发事件
首先啥是抖？ 抖就是一哆嗦！原本点一下，现在点了3下！不知道老铁脑子是不是很有画面感！哈哈哈哈哈哈典型应用就是防止用户多次重复点击请求数据。vue实现...
2021-05-30
详解为什么Vue中的v-if和v-for不建议一起用
本文主要介绍了为什么v-if和v-for不建议一起用？分享给大家，具体如下：一、作用
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染v-for...
2021-05-30
vue element和nuxt的使用技巧分享
1.element的时间选择提交的格式转化
例如Fri Sep 07 2018 00:00:00 GMT+0800 (中国标准时间)转化为 2020-01-11的格式这记载datepicker中添加一句value-format=”yyyy-MM-dd...
2021-05-30
Vue中引入svg图标的两种方式
Vue中引入svg图标的方式Vue中引入svg图标的方式一安装yarn add svg-sprite-loader --devsvg组件index.vue<!-- svg组件 --><template> <svg class="svg-icon" :class="svgCl...
2021-05-30
从源码角度来回答keep-alive组件的缓存原理
今天开门见山地聊一下面试中被问到的一个问题：keep-alive组件的缓存原理。
官方API介绍和用法 <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 和 <t...
2021-05-30
vuex的使用和简易实现
这里记录一下vuex的使用和vuex的简易实现
首先创建对应的store目录和对应的入口index.jsimport Vue from 'vue'import Vuex from 'vuex'import products from './modules/pr...
2021-05-30
vue 页面跳转的实现方式
一、this.$router.push()1、vue<template> <div id='test'> <button @click='goTo()'>点击跳转4</button> </div></template> 2、script//跳转前页面传参数：goTo(item)...
2021-05-30
如何在vue中使用HTML 5 拖放API
拖放 API 将可拖动元素添加到 HTML，使我们可以构建包含可以拖动的具有丰富 UI 元素的 Web 应用。在本文中我们将用 Vue.js 构建一个简单的看板应用。看板是一种项目管理工具，...
2021-05-30
Vue 如何import服务器上的js配置文件
背景
项目中有一个本地配置文件：// src/image-position.jsexport default { label: '首页', value: 'home', data: [ { label: '轮播', value:...
2021-05-30
vue传值方式的十二种方法总结
一.父传子传递（1）在父组件的子组件标签上绑定一个属性，挂载要传输的变量
（2）在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props: [“属性...
2021-05-30
Vue Element前端应用开发之功能点管理及权限控制
概述本篇随笔介绍功能点管理及权限控制，功能点是作为一个业务对象数据进行管理，在角色范畴上进行分配，而在界面元素控制上，VUE+Element 前端引入Vue自定义指令Directives进行控...
2021-05-30
Vue项目优化的一些实战策略
Vue项目完成后就要从开发环境转成生产环境一些第三方的包体积过大，导致生成js文件过于庞大，这是时候可以生成打包报告来查看项目中的问题1.生成报告有两种方式，一种使用npm run...
2021-05-30
React Native实现简单的登录功能(推荐)
React Native 简介：React Native 结合了 Web 应用和 Native 应用的优势，可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的...
2021-05-30
ReactNative-JS 调用原生方法实例代码
第一步首先创建ReactNative 模块类继承ReactContextBaseJavaModulepackage com.mixture;import android.content.Context;import android.widget.Toast;import com.facebook...
2021-05-30
利用React-router+Webpack快速构建react程序
本文主要介绍的是使用React-router和Webpack如何快速构建一个react程序，下面话不多说，感兴趣的可以一起学习学习。初始化项目
我们先创建个空文件夹，然后初始化 package.json ,...
2021-05-30
深入浅析react native es6语法
react native是直接使用es6来编写代码，许多新语法能提高我们的工作效率解构赋值var { StyleSheet,Text,View} = React;这句代码是ES6 中新增的解构(Destructuring)赋值语句。...
2021-05-30
JavaScript的React Web库的理念剖析及基础上手指南
React Web的目的及意义非常明确: 让React Native代码跑在Web上 让一套代码运行在各个移动终端，对前端及业务来说，这是开发效率中一个质的提升。在项目初期，我们也曾向 React团...
2021-05-30
在React框架中实现一些AngularJS中ng指令的例子
首先设定一段Angularjs代码的ng-class：<i class="header-help-icon down" ng-class="{up:showMenu}"></i>
比较容易理解的Angularjs ng-class设置样式代码，那我们使用React...
2021-05-30
React.js入门学习第一篇
一、JSX介绍①定义JSX=JavaScript XML，是一种在React组件内部构建标签的类XML语法。React在不使用JSX的情况下一样可以工作，但是使用JSX可以提高组件的可读性，增强JS语义，结构清...
2021-05-30
ReactiveCocoa代码实践之-UI组件的RAC信号操作
相关阅读：ReactiveCocoa代码实践之-更多思考ReactiveCocoa代码实践之-RAC网络请求重构这一节是自己对网络层的一些重构，本节是自己一些代码小实践做出的一些demo程序，基本涵盖...
2021-05-30
React.js入门实例教程之创建hello world 的5种方式
一、ReactJS简介
React 是近期非常热门的一个前端开发框架。React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架...
2021-05-30
使用React实现轮播效果组件示例代码
前言我发现React和AngularJS思想完全不同，AngularJS是基于双向绑定，在Modal层中定制数据，然后双向改变。但是React是通过prop和state来改变view层的状态。下面是我写的一个轮播...
2021-05-30
React实现双向绑定示例代码
前言React.js现在已经很流行了，不会React.js都不好意思说自己会前端了。那么下面就来看看关于React双向绑定的实现。
双向绑定的使用:组件需要mixins:引用LinkedStateMixin。...
2021-05-30
React-Native TextInput组件详解及实例代码
同时适配Android和IOS代码注释比较详细/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, {Component} from 'react';im...
2021-05-30
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
ReactJS是Facebook推出的产品。在2013年的Qcon大会(上海)上面，当时Facebook的前端工程师做过一次讲座，就专门介绍了ReactJS。ReactJS可以看做就是用来Render的。ReactJS是可以...
2021-05-30
