框架
文章平均质量分 56
why_Because
yizhiweixiaojiuhaole!
展开
-
vue中自定义指令directive
一、 什么是自定义指令我们看到的v-开头的行内属性,都是指令,不同的指令可以完成或实现不同的功能,对普通 DOM元素进行底层操作,这时候就会用到自定义指令。除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令指令使用的几种方式://会实例化一个指令,但这个指令没有参数 `v-xxx` // -- 将值传到指令中`v-xxx="value"` // -- 将字符串传入到指令中,如`v-html="'<p>内容</p>'"`转载 2022-03-15 17:49:29 · 427 阅读 · 0 评论 -
vue基于file-saver处理二进制文件流,导出文件
1、安装npm install file-saver --save2、引入import { FileSaver} from ‘file-saver’;3、调用handleDownTemplate() { DownloadTemplate(this.searchForm.schoolCode).then((res) => { //取返回文件名 // const fileName = decodeURIComponent( // re原创 2021-08-10 09:37:35 · 1189 阅读 · 0 评论 -
vue中使用swiper6.0实现缩略图控制
实现效果如下:swiper6.0的样式引入路径变了!!!1、npm install swiper2、main.js 中引入import '../node_modules/swiper/swiper-bundle.css'; //swiper6.0样式路径import Swiper, { Navigation, Autoplay,Thumbs } from 'swiper'; //相关组件Swiper.use([ Navigation, Autoplay,Thumbs]);3、轮播图组件原创 2021-05-28 15:10:26 · 2508 阅读 · 3 评论 -
vue+vant移动端适配
方式一:使用 lib-flexible 和 px2rem-loader,遇到的坑,设计稿为750px,后引入vant,vantUI的根字体默认大小是37.5,看起来就是1/2,解决方法,删除main.js中vant样式的引入,在app.vue中引入vant样式<style>/* px2rem不能正常转换 */@import "vant/lib/index.css";</style>方式二:lib-flexible + postcss-pxtorem (postcss-px原创 2021-01-07 16:23:20 · 2274 阅读 · 0 评论 -
vue中网页图标favicon.ico不显示
1、通过服务器获取在index.html里,添加link,若href是引用服务器上的图片,在不跨域的情况下ok的<link rel="shortcut icon" type="image/x-icon" href="http://img.81lianpin.com/manage/favicon.ico" media="screen" />2、放在本地vue中,需要修改webpack.prod.conf.js配置,并把favicon.ico放在最外层根目录下new HtmlWebpac原创 2020-09-23 15:57:05 · 3618 阅读 · 4 评论 -
vue+element-ui,实现Excel导入导出
vue+element-ui,实现Excel导入导出:参考做excel表格导入时,处理导入数据//拿到的数据:let dataArray=[{'卡号':'123','手机号':'18374174400'}];//想要的数据:let newObjArray=[{'card':'123','mobile':'18374174400'}];数据处理方法://处理导入的数据 let dataArray=[{'卡号':'123','手机号':'18374174400'}]; initD原创 2020-08-25 18:41:04 · 3424 阅读 · 0 评论 -
vue组件传参示例
一、父组件给子组件传参方法一:父:引入子组件import contract from ‘./sonComponent’<contract v-if="showMask":showMask="showMask":companyId="companyId":isSign="isSign" />子:通过props:[‘showMask’,’companyId’,’isSign’] 接收,this.showMask 使用方法二:父组件upDate方法,触发子组件updatetabel原创 2020-08-24 16:57:37 · 447 阅读 · 0 评论 -
uni-app开发popup弹出层的二级嵌套使用和修改popup默认样式
一、popup的使用(可参考uni-app开发文档)<template> <view class="content"> <button @tap="startOpen">打开弹窗按钮</button> </view> <!-- 第一个弹窗 --> <uni-popup ref="...原创 2019-08-01 19:11:17 · 19501 阅读 · 2 评论 -
uni-app中的fieldset
使用uni-app开发小程序,设置fieldset,按照html中的语法设置不生效,于是在uni-app开发文档中,找到了~~于是借助uni-app中的富文本,进行实现<template> <view class="content"> <form report-submit="true" @submit="formSubmit"> &l...原创 2019-07-24 12:24:58 · 1023 阅读 · 0 评论 -
React之动态路由、编程是导航
简单模拟动态路由、编程是导航:登录页:根据路由传参路由页:采用路由嵌套,并通过props赋值给route将参数传入到Home页Home页,通过路由props中route获取参数...原创 2019-07-10 22:30:23 · 2347 阅读 · 0 评论 -
Vue-router、编程式导航、动态路由、命名路由、嵌套路由
一、Vue-router下载安装: npm install vue-router1、通过vue-router,根据hash变化,进行组件切换,从而实现页面切换。在自定义文件夹 router 里的 index.js 中,做以下配置:import Vue from 'vue'import VueRouter from 'vue-router' //引入vue-router插件//引入组件...原创 2019-07-10 22:28:34 · 439 阅读 · 0 评论 -
React之axios、跨域
React通过axios请求数据一、全局安装axios:npm install axios二、创建axios.js文件(配置了过滤器,请求响应)import Axios from 'axios'import {Component} from 'react'Component.prototype.$axios=Axios //将axios挂载到Component上,以供全局使用//配...原创 2019-06-19 23:00:52 · 14196 阅读 · 0 评论 -
React中模拟事件总线
什么是事件总线?EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念,就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件,所以组件都可以上下平行地通知其他组件,但也就是太方便所以若使用不慎,就会造成难以维护的灾难,因此才需要更完善的Vuex作为状态管理中心,将通知的概念上升到共享状态层次。但在React中没有EventBus的概念,可以...原创 2018-12-28 20:53:49 · 1687 阅读 · 0 评论 -
Vue数据双向绑定底层实现原理
简介:Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新。简单的说,就是数据变视图变。当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object...原创 2018-12-30 18:24:44 · 2018 阅读 · 0 评论 -
什么是虚拟dom
虚拟dom就是一个特殊的对象。Vue之所以运行高效,因为采用了虚拟dom,减少了对真实的dom操作。一、dom和虚拟dom对比//dom&lt;ul id='test'&gt; &lt;p class='hehe'&gt;这里是p标签&lt;/p&gt;&lt;/ul&gt;//对应的虚拟dom对象let vdom={ tag:'ul',原创 2019-01-02 21:07:04 · 10791 阅读 · 0 评论 -
使用React-redux实现小案例(todolist)的过程
使用React-redux实现,待办事项todolist案例。注:以下列出主要页面代码,为说明React-redux实现的过程,所以并没有将案例的完整代码展示!一、全局安装:rudux、react-reduxnpm install redux --savenpm install react-redux二、主要代码:1、项目的入口文件index.jsimport React from...原创 2019-01-02 21:31:41 · 1235 阅读 · 0 评论 -
Vue请求数据axios之跨域代理、数据拦截器
一、请求数据在Vue中进行ajax请求时,安装axios,执行npm install axios引入插件:import Axios from 'axios'Axios.post(url,data) //默认返回promise对象.then((res)=>{ console.log(res);}).catch((err)=>{ console.log(e...原创 2019-06-19 23:03:43 · 189 阅读 · 0 评论 -
vue传参,组件之间传参、路由传参、vuex
一、组件之间传参详见:添加链接描述二、路由传参两种情况:params 和 query都可以在目标组件的生命周期里,通过 this.$route 进行获取methods:{ goTheme(item){ //点击图片跳转主题界面 // this.$router.push({path:'/theme/123'}) ...原创 2019-06-29 01:38:45 · 952 阅读 · 0 评论 -
mint-ui框架使用简介(加载弹窗、无限加载)
1、查看 mint-ui 官方文档(中文Vue2.0)2、npm install mint-ui3、全局引入,在项目 main.js 中:import MintUI from 'mint-ui' // 引入插件import 'mint-ui/lib/style.css' // 样式Vue.use(MintUI) // 使用一、加载弹窗( Indicator )例如:...原创 2019-06-19 23:03:20 · 475 阅读 · 0 评论 -
浅谈Vue组件传参(常见的几种通信方式)
Vue的通信方式,也可以说是传参方式。主要分为四种:父子传参子父传参相邻兄弟传参(亲兄弟)远兄弟传参(表兄弟)一、父子传参原理:父控制子,通过子组件的props属性,抛出子组件自定义标签属性,来接收父组件的操作状态例子:父级里的一个按钮,控制子组件里的一个div的显示隐藏&amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;gt;&amp;amp;amp;原创 2018-12-13 22:22:24 · 13180 阅读 · 5 评论