大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

vue使用watch监听拿到props的传值

vue使用watch监听拿到props的传值 export default { data() { return { floorData0: {}, floorData1: {}, floorData2: {}, } }, props:['floorData'], watch:{ floorData:val = { console.log(this.floorData);在floorData传值成功的前提下,有时候会出现直接在 watch 里面通过 this.floorData 是无法拿到的,总是显示 undefined。然后需要通过 newVal和oldVal这么处理,才能拿到 floorData 的值: watch:{ floorData:(newVal,oldVal) = { console.log(newVal);

学会在组件中使用v-mode

学会在组件中使用v-mode 往往组件拆分需要负责数据的传递,通常会通过自定义事件来数据交互,但是如果使用v-module来做数据的交互,这样也许会简单很多。 子组件UserInfo.vue export default { props: { value: { type: String

关于element el-button使用$attrs的一个注意要点

关于element el-button使用$attrs的一个注意要点 之前需要对el-button做二次封装,所以就用到vue的$attrs和$listeners属性,这两个属性在这不细说,可以在 这里 查看详情。 二次封装代码(limit-button) import { mapGetters } from 'vuex'; export default { props: { // 按钮唯一标识 buttonId: { type: String, required: true, }, }, computed: { .mapGetters(['getUserBtns']), validButton: function() { return env.debug ?

心理测评 vue.js初体验

心理测评 vue.js初体验 源码: https://github.com/ZH4L/vue-psy vue文档:https://cn.vuejs.org/v2/guide/ vue-router文档:https://router.vuejs.org/zh-cn/essentials/getting-started.html vuex文档:https://vuex.vuejs.org/zh-cn/getting-started.html axios文档psyId=2的路径参数 链接跳转 使用 跳转 跳转内部链接,默认会被渲染成a标签 外部链接直接使用a标签跳转即可 组件 就是一个个小的模块,一个组件就是一个.

巧妙让localStorage也能设置过期

console.log(typeof test, test); console.log(localStorage['name']); JSON.parse(source[key]) : source[key]; } initRun(){ /* * set 存储方法 * @ param {String} key 键 * @ param {String} value 值,存储的值可能是数组/对象,不能直接存储,需要转换 JSON.stringify * @ param {String} expired 过期时间,以分钟为单位 * @ 由@IT·平头哥联盟-首席填坑官苏南 分享 */ const reg = new RegExp("__expires__"); let expires = data[`${key}__expires__`]||Date.now+1;

Ant Design Pro开发后台管理系统(权限)

yield put({ type: 'changeLoginStatus', payload: response, }); } }, }, reducers: { changeLoginStatus(state, {payload}) { let _status = "ok"; let _user = "admin"; }, } 我们看看setAuthority、reloadAuthorized这两个方法都做了什么事儿 //设置身份 export function setAuthority(authority) { return localStorage.setItem('antd-pro-authority', authority); let Authorized = RenderAuthorized(getAuthority());

深入浅出Vue 使用中的小技巧

default 而在设置路由的 router/index.js 文件中: const _import = require('./_import_' + process.env.NODE_ENV) export default new Router({ routes: [{ path: '/login', name: '登陆', component: _import('login/index') }] })//欢迎加入全栈开发交流圈一起吹水聊天学习交流:864305860 这样组件在开发环境下就是非懒加载,生产环境下就是懒加载的了 7 vue-loader小技巧 vue-loader 是处理 *./Xixi' import Haha from '.

精读《setState 做了什么》

context.Consumer = { $$typeof: Symbol.for("react.context"), _context: context }; 不同于 props, updater 无法被直接调用,因为这个 API 是由 react 引擎在 setState 时调用的: // A bit simplified setState(partialState, callback) { // Use the `updater` field to talk back to the renderer! ReactDOM 提供了 __currentDispatcher(简化的说法): // In React DOM const prevDispatcher = React.__currentDispatcher;

面试之加分项vue

面试之加分项vue 对大部分人来说,掌握Vue.js基本的几个API后就已经能够正常地开发前端网站。但如果你想更加高效地使用Vue来开发,成为Vue.js大师,那下面我要传授的这五招你一定得认真学习一下了。在面试过程很多HR会问到。 第一招:化繁为简的Watch 场景还原: 组件创建的时候我们获取一次列表,同时监听input框,每当发生变化的时候重新获取一次筛选后的列表这个场景很

React Native iOS混合开发

} @end 代码解析 在JSBridgeModule中,我们实现了一个RCT_EXPORT_METHOD(sendMessage:(NSDictionary*)params)方法,该方法主要用于暴露给JS调用,来传递数据params给Native; 当收到数据后,通过NSNotificationCenter以通知的形式将数据发送出去; JS调用JSBridgeModule发送数据给Native import {NativeModules} from 'react-native';

react组件的创建

this.state.liked}); return ( { this.handleClick() }} you {text} this.click to toggle ) } } 绑定this的方式:和createClass不同,React.Component是不会自动绑定this的,所以需要我们手动,一般有下面几种方式 constructor中绑定 constructor(props) { super(props); return(//注意不是props.handleClick() you {text} this.click to toggle ) } //父组件 constructor(props) { super(props) this.state = { like:false } } handleClick() { this.setState({ like: !

Tomcat启动分析(一) - Bootstrap类

Tomcat启动分析(一) - Bootstrap类 本系列以Tomcat 8.5.33为例分析Tomcat的启动过程。 Tomcat的启动脚本 与Tomcat有关的脚本都在Tomcat主目录的bin子目录中,其中与启动有关的脚本有startup.sh、catalina.sh和setclasspath.sh。启动Tomcat时只需执行startup.sh即可,其内容如下: # resolve links - $0 may be a softlink PRG="$0" while [ -h "$PRG" ] ; } daemon = bootstrap; } if (command.equals("startd")) { args[args.length - 1] = "start";

从 0 到 1 实现 react - onChange 事件以及受控组件

if (attr.match(/on\w+/)) { // 处理事件的属性: let eventName = attr.toLowerCase().substr(2) if (eventName === 'change') { eventName = 'input' } // 和现阶段的 react 统一 dom.addEventListener(eventName, value) } . if (vdom.attributes vdom.attributes.hasOwnProperty('onChange') vdom.attributes.hasOwnProperty('value')) { // 受控组件逻辑 . dom.addEventListener('input', (e) = { changeCb.call(this, e) dom.value = oldValue }) .

Kafka最新版的基本开发

public class MyProducer { public static void main(String[] args) { Properties props = new Properties(); props.put("bootstrap.servers", "192.168.31.122:9092"); props.put("acks", "all"); props.put("batch.size", 16384); props.put("linger.ms", 1); props.put("buffer.memory", 33554432); } //列出topic的相关信息 List partitions = new ArrayList () ; props.put("group.id", "test"); props.put("auto.commit.interval.ms", "1000"); props.put("session.timeout.ms", "30000");

React-Router v4.0 笔记

== 'component') { // rest[_key] = props[_key] // } // } return ( ( islogin()? console.log('test', this.props) return ( login home movie book ) } } export default withRouter(Nav); 效果如下图: step9.gif 以上就是一些react-router v4的一些基本使用。若有错误欢迎指出! Tips: 注意看文中的Route 和Router 就差一个字母 不要看花了眼哦 我的个人博客 https://eric-wh-007.github.io

redux 粗浅使用

redux 粗浅使用 redux是一个状态管理器 redux的三个部分: action reducer 用于生成各种state, state就是redux的数据载体,可以是数组,也可以是对象 store // store由createStore生成 const store = createStore(store); dispatch // dispatch需要派发属性为type的对象,这个对象一般都在action中存着 store.dispatch({ type:'aciton' }); // 结合上一个api进行使用 store.subscribe(() = { store.getState();

ReactJS - 监听Html组件的滚动事件

//保证被组件调用时,对象的唯一性 } this._onScrollEvent实现 /** * 滚动事务 * @private */ _onScrollEvent() { if (this._container.scrollTop + this._container.clientHeight === this._container.scrollHeight) { ///todo: do something } } 结束 大致就是这样的,希望对你们有帮助。当然 this._container 是支持scrollTo, scrollBy 这样的方法的。

react native 自定义导航栏随滚动渐变

react native 自定义导航栏随滚动渐变 效果图1 未滚动页面 image.png 效果图2 滚动页面 image.png 使用方式 import React, { Component } from 'react' import NavPage from './NavPage' import { View, ScrollView, Image, Dimensions, Platform } from 'react-native' let { width } = Dimensions.get('window') let navHeight = (Platform.OS === 'ios' ?

使用PropTypes进行类型检查

使用PropTypes进行类型检查 原文地址 1.组件特殊属性——propTypes 对Component设置propTypes属性,可以为Component的props属性进行类型检查。 import PropTypes from 'prop-types'; 3. 限制单个子元素 使用 PropTypes.element 你可以指定只有一个子元素可以被传递给组件。 //将children限制为单个子元素。 Greeting.propTypes = { name: PropTypes.string, children: PropTypes.element.isRequired };