- 博客(63)
- 收藏
- 关注
RSS订阅原创 vue自定义指令
受AngularJS的启发，Vue内置了一些非常有用的指令，比如v-html和v-once等，每个指令都有自身的用途。除了系统内部的指令，Vue也允许注册自定义指令。一、自定义指令的注册全局引入创建一个directive.js，代码如下，然后在main.js中引入即可。// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被...
2020-03-14 21:11:01
567
原创 vue中的slot——作用域插槽
作用域插槽的作用是可以访问子组件的数据，相当于父组件可以直接在slot范围内使用子组件的数据。如果对插槽的基本知识不熟悉，可以参考vue中的slot——单个插槽和具名插槽。一、作用域插槽中单个组件的写法作用域插槽允许我们将插槽转换为可复用的模板，这些模板可以基于子组件传来的数据渲染出不同的内容。这在设计封装数据逻辑同时允许父级组件自定义部分布局的可复用组件时是最有用的。举个使用的例子。在...
2020-03-14 21:09:49
540
原创 vue中的slot——单个插槽和具名插槽
v-slot顾名思义，中文意思是插槽。如果你平时常用组件化开发，那相信你对插槽肯定不陌生，它的主要作用就是可以在父组件中将自定义内容插入到子组件中，这句话比较拗口，可以先看个基础的插槽示例。一、单个插槽单个插槽也叫默认插槽，或者匿名插槽。父组件<Card> <p>我是父组件中自定义的内容</p></Card>子组件<...
2020-03-14 21:08:38
596
原创 props改变子组件不更新
今天在开发的时候，碰到一个bug。就是修改了父组件传递给子组件的值，但是子组件接收父组件的props值的时候竟然没有更新视图。举例代码如下：组件代码<template> <h1>{{ showData }}</h1></template><script>export default { name: "Son", prop...
2020-03-14 21:07:32
5376
原创 H5单页面应用设置标题——vue-wechat-title
安装npm install vue-wechat-title --save-devmain.js引入Vue.use(require('vue-wechat-title'));App.vue中<router-view v-wechat-title="$route.meta.title"></router-view>router.js配置export def...
2020-03-14 21:06:57
802
原创 .sync实现父子组件的双向绑定数据
.sync 修饰符所提供的功能。当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。父组件<wordInput :wordVal.sync='inputVal'/>他会扩展成：<wordInput :wordVal='inputVal' @update:wordVal="val => inputVal= val"/>子组件<...
2020-03-14 21:06:04
94
原创 子组件绑定v-model
子组件<template> <div> <el-dialog v-show="value" :show-close="false"> ... </el-dialog> </div></template><script>export d...
2020-03-14 21:05:16
233
原创 vue的mixin的使用
混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。以上是官网的定义，mixin的作用是多个组件可以共享数据和方法，在使用mixin的组件中引入后，mixin中的方法和属性也就并入到该组件中，可以直接使用，在已有的组件数据和方法进行了扩充。引入mixin分全局引用和局部引...
2020-03-14 21:04:35
168
原创 Vue.use注册插件
在搞清楚如何用Vue.use注册插件之前，首先需要理清楚一个问题，就是插件和组件的区别。组件比较简单，比如弹框组件，轮播组件等。但是当一个组件被各个页面都可能用到，这时候如果每个页面还要依次去引用，这样就会显得十分累赘。所以，可以将这样的组件进行全局注册，然后各个页面直接可以使用，这就是插件。插件的功能范围插件通常用来为Vue添加全局功能。插件的功能范围没有严格的限制，一般有下面几种：...
2020-03-14 20:53:55
1281
原创 webpack的externals优化项目
用webpack打包项目的时候，如果项目体量比较大，往往打出来的包vender.js会很大，导致首屏加载慢，这时候用webpack提供的externals属性，像vue.js 、vuex.js 、vue-router.js 这些外部库，基本不会变的，如果将它们独立出来单独加载就能利于浏览器的缓存机制，不用每次都重新加载这些库js，并且大大的减少了打包的vendor.js文件优化的步骤有两步，...
2020-03-10 14:18:30
617
原创 为SPA单页应用加loading效果
在开发SPA单页应用的时候，经常会碰到的问题就是首页白屏时间过长，影响用户体验，这个根本原因在于webpack打包出来的vender.js文件太大，首页必须加载完才可以显示出页面。当然这个解决方法有很多，比如externals分离静态资源，路由懒加载，或者开启gzip压缩等等。为了更好的体验，我们还可以给首屏加loading动画。方案其实很简单，就是在index.html里面设置一个load...
2020-03-10 14:15:48
470
原创 Vue.extend的理解
在使用element-ui的过程中，我相信你在使用到类似this.$message功能的时候，会觉得这个功能真的非常方便，不用import入组件，全局都可以调用。它就是通过Vue.extend + $mount实现。扩展实例构造器Vue.extend返回的是一个“扩展实例构造器”，也就是一个预设了部分选项的 Vue 实例构造器。刚学的时候对“扩展实例构造器”这一名词感觉很疑惑，其实它就像构...
2020-03-10 14:14:50
171
原创 Vue路由守卫
一、全局路由守卫全局路由前置守卫当用Vue开发的时候，如果项目涉及登录的话，一般都要做登录验证。用户必须先登录，拿到token才可以访问页面。因为路由是暴露的，用户可以通过修改URL来修改路由直接跳过登录验证。路由守卫就是解决以上问题的。看下以下代码：import Vue from 'vue'import Router from 'vue-router'import Home from ...
2020-03-10 14:11:37
169
原创 调用豆瓣API加载图片报403
参考文章<React.Fragment> <img src="http://img3.doubanio.com/view/photo/s_ratio_poster/public/p511146807.jpg" alt="poster"/></React.Fragment>以上的链接是豆瓣API接口返回的一个图片地址，如果在浏览器地址中直接访问，那...
2020-03-10 09:35:21
1049
原创 H5在ios中使用iframe滚动失效问题
iframe设置了高度（例如500px）。倘若iframe的内容超出了iframe设定的高度时。iframe内部html的滚动条不出现。并且活生生的从500px处截断，（类似overflow：hidden的效果）下面的内容不再显示。这时候我们只要给iframe外层加个div，给外层div加上两个属性即可。<div style="-webkit-overflow-scrolling:to...
2020-03-10 09:29:17
995
原创 H5如何去除图片缓存
这两天做到一个更换头像的bug，在pc后台系统更新完头像，在个别手机的H5上无法及时更新头像，于是给图片路径后面加了参数即可解决。<img :src="'https://www.xxx.com/'+imgSrc+'.jpg?version='+Date.now()"...
2020-03-10 09:27:52
722
原创 小程序父子组件传值
1.父传子父组件组件传递子组件通过属性传值，例如tranBool="{{Bool}}"的形式将变量Bool传递给子组件，如果不传变量的话可以不用加花括号。父组件//wxml<view> <childComponent tranBool="{{Bool}}" tranString="hello world"/>...
2020-03-10 09:25:23
376
原创 小程序wx:if和hidden的区别
因为wx:if之中也可能包含数据绑定，所以当wx:if的条件值切换时，框架有一个局部渲染的过程，他会确保条件在切换是销毁或者重新渲染。同时wx:if也是有惰性的，如果初始渲染条件为false,框架什么也不会做，只有在条件第一次变为真的时候才会开始渲染。相比之下hidden就简单的多，组件始终都会被渲染，只是简单的控制显示和隐藏，一般来说，wx:if 有更高的切换消耗，而hidden有更高的初始渲...
2020-03-10 09:23:57
265
原创 小程序上拉加载
全局上拉加载在H5中，上拉加载的实现是需要监听window.onscroll事件，通过判断滚动距离和浏览器高度来判断是否用户已经拉到页面底部。在微信小程序中，官方提供了一个触底事件onReachBottom，它会在页面滚动到底部的时候自动触发。onReachBottom()可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。在触发...
2020-03-10 09:22:22
1421
原创 小程序组件——组件样式隔离
在小程序组件中，自定义组件的样式只受到自定义组件 wxss 的影响，不会收到全局的影响，除非有以下几种情况：app.wxss 或页面的 wxss 中使用了标签名选择器（或一些其他特殊选择器）来直接指定样式，这些选择器会影响到页面和全部组件。通常情况下这是不推荐的做法。类似以下写法：//app.wxsstext{ color:red;}指定特殊的样式隔离选项 styleIs...
2020-03-10 09:20:29
3063
原创 小程序组件——引用外部样式类
在使用小程序组件的时候，希望直接引用父类组件的样式，可以用externalClasses定义。(这个特性从小程序基础库版本1.9.90基础库开始支持)。注意：在同一个节点上使用普通样式类和外部样式类时，两个类的优先级是未定义的，因此最好避免这种情况。父组件中，希望将两个样式类star和star-active传入子组件<view> <star star="star...
2020-03-10 09:18:16
1093
原创 小程序获取/设置数据
获取值Page({ data: { userName:'don' }, onLoad:function(){ console.log(this.data.userName); }})设置值Page({ data: { userName:'don' }, onLoad:function(...
2020-03-10 09:17:10
163
原创 微信小程序访问豆瓣API报403
在微信小程序中，调用豆瓣API会报403，原因是豆瓣设置了小程序的访问权限。解决方法是使用代理，将豆瓣API地址换成 https://douban.uieee.com，但是，悲催的是又报了400（bad request）错误，如下：接下来，设置请求头，header默认为： "ontent-type": "application/json"; 但是仍然会报400错误，将请求头中json设置改...
2020-03-09 17:24:09
121
原创 小程序设置image的src为空报错
今天在开发小程序的时候，遇到了一个小坑，在此记录下，代码如下。wxml<image mode="widthFix" src="{{link}}"></image>jsconst app = getApp();Page({ data: { link:'../../statics/images/loading.png' }, ...
2020-03-09 17:20:40
1051
原创 浅析React有状态组件和无状态组件
在适合的情况下，我们都应该且必须使用无状态组件。无状态组件不像其他两种方法在调用时会创建新实例，它创建时始终保持了一个实例，避免了不必要的检查和内存分配，做到了内部优化。——摘自《深入 React 技术栈》无状态组件无状态组件又称变现性组件或者木偶组件，为何叫木偶组件？因为它只关心数据传递props，只能访问输入的 props，同样的 props 会得到同样的渲染结果，不会有副作用。无状...
2020-03-09 15:51:35
334
原创 react路由中的Switch和exact的使用
Switch为了解决route的唯一渲染，它是为了保证路由只渲染一个路径。如果配置了<Switch><Router history={history}> <Switch> <Route path='/home' render={()=>(<div>首页</div>)}/> ...
2020-03-09 15:49:18
663
原创 React路由配置
目前前端项目都是SPA项目，而单页应用就少不了路由配置，因为单页应用的页面不会刷新页面，而是根据路由的切换来更换页面组件内容的显示。参考网址1.引入路由包npm install --save react-router react-router-domreact-router：是基本的router包，里边函的内容较多，但是在网页开发中有很多用不到，现在的市面上的课程讲的基本都是这个包的教...
2020-03-09 15:47:53
206
原创 react打包页面打开空白
当第一次使用create-react-app开发项目的时候，遇到了一个小坑，就是npm run start开发环境运行项目的时候一切正常，但是在npm run build的时候会发现打包后打开index.html显示空白，这个问题其实vue也有。解决办法在package.json中增加配置"homepage": "."目前如果能正常打开的话那很好，但是可能会出现说就算配置了homepag...
2020-03-09 15:46:49
925
原创 react配置全局scss变量
当在create-react-app中引入scss之后，就可以使用scss的基本功能了。但是，目前无法做到在全局范围内引用scss的变量/extends/函数，目前要实现的就是，就是在入口文件引入后，可以在全局使用。换句话说，如果你不想配置的话也是可以，只要每个scss文件都@import，那我真的敬你是条汉子！好了，废话不多说，以下就是配置的步骤：1.安装sass-resources-...
2020-03-09 14:52:43
2671
原创 create-react-app执行npm run eject报错
在使用react的脚手架create-react-app的时候，我们发现目录中是没有webpack的配置文件的，当然你可以在node_modules/react-scripts/config下找到 webpack.config.dev.js 文件进行修改，但是修改起来非常不便。react官方也提供一种方式来暴露配置文件，执行以下语句：npm run eject但是这时候会发现终端有报错...
2020-03-09 14:51:45
279
原创 在create-react-app中引入scss
这里开发是基于create-react-app的，如果尚未安装，请按以下命令进行安装：npm install -g create-react-appcreate-react-app my-appcd my-appnpm start安装完create-react-app后，我们可以按照接下来的步骤配置sass：1.安装sass-loader和node-sass依赖npm insta...
2020-03-09 14:47:23
949
原创 React使用公共文件夹public
参考文章在刚学React/Vue的时候，配合webpack脚手架学习的过程中，碰到一个问题会非常疑惑，比如在React中有个Public文件夹可以放静态资源，但是在src目录中同样有个assets文件夹，这个同样也是放静态资源的，这个就很困惑了，为何放置静态资源的地方会有两个？两者区别其实放在两个文件夹区别就在于是否会被webpack所处理，如果您将文件放入该public文件夹，webp...
2020-03-09 14:46:11
5028
1
原创 React点击事件的两种写法
1.bind绑定（推荐）第一个参数指向this，第二个参数开始才是事件函数接收到的参数，事件对象event默认是最后一个参数。...clicked(param,event){ console.log(param) //hello world console.log(event.target.value) //按钮}render(){ return ( ...
2020-03-09 14:18:40
9297
原创 React父子组件通信
1.父组件传数据给子组件父组件传数据给子组件是用props来实现的，子组件内部调用this.props.xx来获取传递的值，这个值在子组件内部一般只用作展示用，最好不要在子组件中进行修改。父组件<ChildComponent ChildName="don"/>子组件import React from 'react';class ChildComponent extend...
2020-03-09 14:17:23
83
原创 React引入css的三种方法
<div style="color:red">测试数据</div> //报错在React中，如果直接按上面的方式写内联样式会直接报错，因为JSX语法不支持，React支持以下三种写css的方法：1.行内样式...<div style={{ width:'200px', height:'80px', backgroundColor:'y...
2020-03-09 14:10:13
2682
原创 React引用本地图片
最近在学React，遇到了个比较神奇的坑，就是引入本地图片的问题。图片文件是放在public/assets文件夹中，然后在js文件中引用这个图片，发现竟然报错！const RenderImage = ()=>{ return ( <React.Fragment> <img src='../public/assets/Wech...
2020-03-09 14:08:31
1535
原创 React控制元素显示隐藏的三种方法
React控制元素显示和隐藏的方法目前我知道的有三种方法：第一种是通过state变量来控制是否渲染元素，类似vue中的v-if。第二种是通过style控制display属性，类似vue 中的v-show。第三种是通过动态切换className。方法一：第一种方法是通过此例中showElem变量来控制是否加载元素的，如果showElem为false，内容是直接不会渲染的。class ...
2020-03-09 14:07:09
5044
1
原创 React中受控与非受控组件
参考链接受控组件<input type="text" value={this.state.value} onChange={(e) => { this.setState({ value: e.target.value }); }}/><input>或<select&...
2020-03-09 14:06:05
91
原创 React如何动态更改html标签
比如有这样的一个需求，子组件通过父组件传递过来的props，来动态显示<h1>到<h6>标签，可以先不管react，考虑下vue如何实现呢？Vue的实现方式父组件<template> <div> <Son :tagSize="1"/> </div></template><script&...
2020-03-09 14:04:18
1940
原创 React修改数组对象的注意事项
react开发主张使用函数式编程，函数式编程有个重要的特性就是不可变性。 你无法更改数据，也不能更改。 如果要改变或更改数据，则必须复制数据副本来更改。看个例子，就是Vue和React两个框架实现给数组添加一个元素。vueexport default { name: "home", data() { return { testArr: ['苹果','香蕉'] }; ...
2020-03-09 14:03:02
3658
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人