- 博客(180)
- 收藏
- 关注
原创 Vue3 - setup语法糖
与setup函数不同的是,在script标签中添加setup1、变量、方法不需要 return 出来属性和方法也不用返回,也不用写setup函数,也不用写export default ,甚至是自定义指令也可以在我们的template中自动获得<script setup> import { ref } from 'vue'; <!-- flag变量不需要在 return出去了 --> let flag = ref("ABCD")...
2022-04-02 16:48:26
2703
原创 Vue3 - 监听(watch函数、watchEffect函数)
1、watch函数(既要指明监视的属性,也要指明监视的回调)坑:1)监视reactive定义的响应式数据时:oldValue无法正确获取、强制开启了深度监视(deep配置失效)2)监视reactive定义的响应式数据中某个属性时:deep配置有效setup(){ let sum = ref(0) let msg = ref('ABCD') let person = reactive({ name:'张三', age:18, j...
2022-04-02 16:12:33
4177
原创 Vue3 - setup函数
Vue3.0中一个新的配置项,值为一个函数组件中所用到的:数据、方法等等,均要配置在setup中setup执行的时机:在beforeCreate之前执行一次,this是undefinedsetup有两个参数:props、context 1、props 值为对象,包含:组件外部传递过来,且组件内部声明接收了的属性 props是响应式的,不能使用 ES6 解构,它会消除 prop 的响应性,如果需要解构 prop,可以在 setup函数中使用 toR...
2022-04-02 15:54:51
1469
原创 Vue3 - 响应式原理(Proxy、Reflect)
实现原理: 通过Proxy(代理): 拦截对象中任意属性的变化, 包括:属性值的读写、属性的添加、属性的删除等,语法: new Proxy(target, handler) 。 通过Reflect(反射): 对源对象的属性进行操作。 new Proxy(data, { // 拦截读取属性值 get (target, prop) { return Reflect.get(target, prop) }, // 拦截设置属性值或添加新属性 set
2022-04-02 15:43:07
370
原创 Lodash - 集合方法 _.sortBy 返回排序后的数组
返回排序后的数组。创建一个元素数组。 以 iteratee 处理的结果升序排序。 这个方法执行稳定排序,也就是说相同元素会保持原始排序。 iteratees 调用1个参数: (value)。参数:参数1:Arrar | Object参数2:...(Array|Array[]|Function|Function[]|Object|Object[]|string|string[])示例数组排序:let users = [ { user: "aaa", age: 18 }
2022-01-17 22:19:27
2372
原创 Lodash - 对象方法 _.pick 从对象选择你想要的值
创建一个从 object 中选中的属性的对象(从对象选择你想要的值)参数:参数1:Object参数2:String/Array(属性值数组)示例:let obj = { a: 1, b: "2", c: 3, d: 4, e: 5 }console.log(_.pick(obj, "c"));console.log(_.pick(obj, ["a", "b"])) 输出结果: ...
2022-01-17 21:54:59
1784
原创 Lodash - 数组方法 _.uniqBy 返回新的去重后的数组
返回新的去重后的数组它接受一个 iteratee (迭代函数),调用每一个数组(array)的每个元素以产生唯一性计算的标准。iteratee 调用时会传入一个参数:(value)。参数:参数1:Array参数2:迭代函数,调用每一个元素示例:let arr1 = [2.1, 1.2, 2.3, 2.5, 3.1, 3.2];let arr2 = [{ x: 1 }, { x: 2 }, { x: 1 }];console.log(_.uniqBy(arr1, Math.flo
2022-01-17 21:45:43
3185
原创 Lodash - 对象方法 _.assign 浅拷贝
分配来源对象的可枚举属性到目标对象上。 来源对象的应用规则是从左到右,随后的下一个对象的属性会覆盖上一个对象的属性。示例:let obj1 = { a: 1, b: 2, desc: { age: 18, name: "某人" }, arr: [1, 2],};let obj2 = { c: 3 };let obj3 = _.assign({ a: 0 }, obj1, obj2); //a:0会被覆盖为a:1obj3.b
2022-01-16 22:34:30
626
原创 Lodash - 集合方法 _.groupBy 分组
对数据进行分组,返回一个对象参数:参数1:collection(Array|Object)参数2:iteratee示例1:let arr1 = [6.1, 4.2, 6.3];console.log(_.groupBy(arr1, Math.floor)); // 向下取整后分组=> { '4': [4.2], '6': [6.1, 6.3] }示例2:let arr2 = ["one", "two", "thre...
2022-01-16 21:31:56
4321
原创 Lodash - 集合方法 _.each/_.forEach 遍历数组/对象
_.forEach():别名 _.each,可用于遍历集合(Array|Object)1、参数:参数1:collection参数2:function,可传入三个参数(value,index|key,collection)2、写法:写法一:_(collection).forEach((value, key, collection) => { ...});写法二:...
2022-01-16 21:09:08
3602
原创 Lodash - 数组方法 _.chunk、_.compact、_.concat、_.difference、_.differenceBy、_.drop
1、安装 Lodashnpm i --save lodash2、引入const _ = require("lodash");3、使用//_.方法名()_.chunk(["a", "b", "c", "d"], 2)_.compact([0, "1", 1, 2, 3, null])4、示例4.1 _.chunk将数组拆分成多个长度的区块,并将这些区块组成一个新数组。 如果array 无法被分割成全部等长的区块,那么最后剩余的元素将组成一个区块。参数(array,
2022-01-16 15:53:59
409
原创 Vue组件封装 ——input 输入框组件
一、基础准备工作1、创建一个基础的vue项目包2、创建components文件夹,用于存放组件,新建input.vue组件,可以自己取个名字<script>export default { name: "CatInput",};</script>3、在main.js中引入组件import CatInput from "./components/input.vue";Vue.component(CatInput.name, CatInput)..
2021-12-31 11:36:50
18388
原创 Vue组件封装 ——dialog对话框组件
一、基础准备工作1、创建一个基础的vue项目包2、创建components文件夹,用于存放组件,新建dialog.vue组件,可以自己取个名字<script>export default { name: "CatDialog",};</script>3、在main.js中引入组件import CatDialog from "./components/dialog.vue";Vue.component(CatDialog.name, CatDial.
2021-12-30 13:40:16
13460
4
原创 Vue组件封装 ——button组件
一、基础准备工作1、创建一个基础的vue项目包2、创建components文件夹,用于存放组件,新建button.vue组件,可以自己取个名字<script>export default { name: "CatButton",};</script>3、在main.js中引入组件import CatButton from "./components/button.vue";Vue.component(CatButton.name, CatButto
2021-12-29 15:23:23
4615
原创 自定义Vue指令,设置每个页面的title
定义指令 v-title:directive{ title:{ inserted: (el) { document.title = el.dataset.title } }}调用:<div v-title data-title="首页"></div>
2021-12-25 22:54:08
966
原创 CSS中水平垂直居中的几种常用方法
效果: <div class="outer"> <div class="inner">oooo.oooo</div> </div>1、flex弹性布局外层容器设置flex弹性布局,设置主轴和交叉轴center <style> .outer{ width: 200px; height: 200px; ...
2021-12-25 22:41:28
113
原创 JS对象 - 拷贝对象的常用方法(浅拷贝与深拷贝)
1、JSON.parse(JSON.stringify(obj)) 先将目标对象转为字符串,再转为对象,可实现对象的深拷贝var obj1 = {name:'明明',scores:[88,76,91]}var obj2 = JSON.parse(JSON.stringify(obj1))console.log(obj1 === obj2) //false 适用于绝大部分的对象,支持的数据类型有:String /Number / Boolean / Objec...
2021-12-20 22:59:03
313
原创 ReactNative 基础 - 14 (路由、跳转、传参)
react提供了router路由react-router-dom,ReactNative为了能够在移动端有更多的路由使用体验,专门开发了路由系统.官方网址:https://reactnavigation.org/使用RN的路由,需要在项目包安装并且编译成apk才能使用1、安装:npm install @react-navigation/native2、使用:NavigationContainer:路由容器Stack.Navigator:栈式导航 一个匹...
2021-12-20 19:03:28
3136
1
原创 ReactNative 基础 - 13 (FlatList横向滚动,实现轮播)
horizontal:横向排列pagingEnabled:按页滚动export default class App extends Component { banners = [ 'http://www...1.png', 'http://www...2.png', 'http://www...3.png', 'http://www...4.png', ]; current = 0; componentDidMount() { //利用定时器
2021-12-20 18:59:56
1157
原创 页面上有多个按钮,点击按钮,输出当前是第几个按钮
通过for循环,内部采购匿名函数自调用的方式,将每一次循环的i保存出来,那么,在点击按钮时,就能得到当前的按钮序号(不采用闭包方式的话,点击按钮时,当前案例中i已经是5了,是无法得到按钮序号的)<body> <button>点我</button> <button>点我</button> <button>点我</button> <button>点我</button&g
2021-12-17 23:14:52
662
原创 ReactNative 基础 - 12 (网络请求 + FlatList,实现触底加载、下拉刷新、回到顶部,多列布局)
onEndReached:触底加载onEndReachedThreshold={0.1} :触底加载的位置, 默认是未显示区域 可见高度为50%(0.5)onRefresh:下拉刷新(触发事件时,需要将refreshing设为true,返回数据后修改为false)refreshing:刷新动画的状态,搭配下拉刷新使用onScroll:监听滚动,传入参数event, event.nativeEvent.contentOffset.y注意:RN处理事件的方式,经过特殊处理,特...
2021-12-16 19:38:54
1281
原创 ReactNative 基础 - 11 (FlatList组件,核心属性data、renderItem、keyExtractor,分割组件,头部组件,尾部组件)
FlatList组件支持下拉刷新、触底加载、回到顶部、头部、尾部组件、行分割组件等待1、核心属性:data:需要显示的数组数据renderItem:数组每个元素对应的界面ui标签的样式(标签)keyExtractor:每个ui的唯一标识export default class App extends Component { skills = ['vue','react','angluar','jquery','uni-app']; ...
2021-12-16 19:28:20
657
原创 ReactNative 基础 - 10 (fetch发送网络请求)
App不存在跨域问题网络请求:默认打印的数据,默认显示在cmd命令行中,可以通过开发中模式进行调试查看数据调试模式:有缺陷,会报错,某些功能会异常(输入框无法获取焦点、错误警告、定时器不准确),不用的时候就关闭开发中模式的打开方式:1、在cmd服务端 敲d2、在模拟器客户端,可以看到弹出的菜单3、选择debug开发中模式的关闭方式:同上ScrollView:滚动,可以让显示的数据滚动显示,View只能显示一屏fetch 发送...
2021-12-16 19:22:41
312
原创 ReactNative 基础 - 09 (活动提示器ActivityIndicator)
加载时转动的小圆圈:ActivityIndicator,可以通过size、color设置尺寸大小export default class App extends Component { render() { return ( <View> <ActivityIndicator size="large" color="orange" /> <View style={{alignItems: 'center', back
2021-12-16 19:15:39
100
原创 ReactNative 基础 - 08 (开关Switch、文本输入框TextInput)
开关和输入框:受控组件,通过状态修改值和对应的操作1、开关:Switchvalue:开启状态onValueChange:值发生改变触发2、文本框:TextInputsecureTextEntry:密文显示onChangeText:值发生改变触发(实现数据的双向绑定)export default class App extends Component { state = {open: true, uname: '...
2021-12-16 19:14:28
443
原创 ReactNative 基础 - 07 (背景图ImageBackground、状态栏statusBar)
1、状态栏:statusBarStatusBar.currentHeight:状态栏的高度沉浸式: backgroundColor="transparent":透明 translucent:可穿透2、背景图:ImageBackground背景图必须给宽高,背景图覆盖整个屏幕,需要动态获取屏幕大小3、解决主体内容和状态栏重合的问题:写一个高度和状态栏一样高的容器,状态栏高度:St...
2021-12-16 19:11:06
1298
原创 ReactNative 基础 - 06 (按钮:Button、TouchableOpacity)
1、系统按钮 <Button> </Button>2、自定义按钮 <TouchableOpacity> </TouchableOpacity> 内部的文本,写在<Text>中activeOpacity:点击激活时的透明度 onPress:点击事件<Button title="按钮" onPress={() => alert('点到我了,痛o(╥﹏╥)o')}>&l...
2021-12-16 19:08:34
487
原创 ReactNative 基础 - 05 (Text文本)
文本必须写在Text标签中numberOfLines:显示几行,其他的...隐藏Text作为容器时,关于文本的相关属性设置可以继承letterSpacing:文字间隔<View style={{color: 'red', fontSize: 30}}> <Text style={{fontSize: 30}} numberOfLines={5}> {/* 无法继承View的样式 */} Lorem ipsum, dolor sit ame
2021-12-16 19:06:24
207
原创 ReactNative 基础 - 04 (自定义rpx)
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。ReactNative中没有rpx单位,使用公式计算出来,封装为一个函数使用,例如:rpx(20) = 20rpx1、获取屏幕宽度:通过Dimensions获取Dimensions.get(...
2021-12-16 19:04:24
527
原创 ReactNative 基础 - 03 (图片 Image)
1、远程图片使用:远程的图片,默认引入后,宽高都为0,需要设置宽高2、本地图片,require语法,但是不需要加.default后缀blurRadius:图片模糊,值为数字<Image source={{uri: 'http://www…..png'}} style={{height: 180}} /><Image source={require('./assets/1.jpg')} style={{width: 400, height: 200}}/&...
2021-12-16 19:02:19
204
原创 ReactNative 基础 - 02 (View弹性布局)
View组件容器中,默认是弹性盒子布局,默认排列方向是竖向的相关属性:flexDirection:主轴排列方式justifyContent :主轴对齐方式alignItems:对称轴对齐、效果const ss = StyleSheet.create({ body: { flexDirection: 'column', //竖向,默认 flexDirection: 'row', //横向 justifyConte...
2021-12-15 20:32:51
523
原创 ReactNative 基础 - 01 (介绍、样式使用)
1、项目包基础结构: 2、组件必须是RN提供的,否则手机端APP取法编译通过,使用组件需要先引入(按需引入)文本必须写在<Text></Text>中3、样式使用:在RN中样式写法: 3.1、在组件标签的style属性进行书写,对象格式 3.2、RN没有css文件,使用官方提供的API:StyleSheet 实现样式的抽象写法,写在JSX范围之外,样式不层叠im...
2021-12-15 20:31:24
1576
原创 React 基础 - 16 (组件中使用redux)
1、创建store文件 /src/store/index.jsimport { createStore } from "redux";//1、初始化const initState = { num: 1,};//2、定义修改方法const reducer = (state = initState, action) => { switch (action.type) { case "doAdd": return { ...state, num: stat..
2021-12-15 20:23:13
355
原创 React 基础 - 15 (redux)
Flux思想:把所有的组件使用到状态[数据]都保存同一个地方,进行统一的管理,修改入口统一,是一种数据共享的思想。Vuex和Redux都是Flux具体体现.react中使用Redux需要安装:npm i react-redux对比 Vuex Redux 初始化值 state state 读取 this.$store.state.xxx store.getState() 定义修改方法 mutations reducer 修改/调用
2021-12-15 20:17:25
284
原创 React 基础 - 14 (路由系统 v6)
已安装v5版本,先卸载:npm uninstall react-router-dom安装: npm i react-router-dom1、引入路由组件import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";Routes: v6版本替代Switch2、导入页面组件import Home from "./pages/HomePage";...
2021-12-15 20:10:12
365
原创 React 基础 - 13 (路由系统 v5)
React中使用路由系统,需要单独安装,默认没有安装安装v5:npm i react-router-dom@51、引入路由组件import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";BrowserRouter:管理整个路由Route:路径与组件对应关系Link:点击切换路由Switch: 切换之后展...
2021-12-15 20:04:57
369
原创 React 基础 - 12 (函数组件hook的使用:state状态、生命周期)
rfc 函数组件 16.8版本 Hook特性,其中就包含了state、生命周期.......rcc 类组件功能更完善 state 组件生命周期state状态:1、引入:import { useState } from "react";2、声明、使用:const [num, setNum] = useState(1)useState拥有了state、setState方法 参数1:状态的名称key,rcc中的state={key:value}...
2021-12-15 19:57:52
368
原创 React 基础 - 11 (子元素绑定 ref)
能够通过绑定的变量操作子元素的方法和属性,vue中ref的概念方式一:绑定的变量,需要提前声明,调用时需要取一层currentson1 = React.createRef();useSon() { console.log(this.son1.current.num); this.son1.current.show(); }<Son ref={th...
2021-12-15 19:52:32
799
原创 React 基础 - 10 (发送网络请求fetch、跨域代理)
跨域代理:在React中需要自行安装插件实现跨域代理 http-proxy-middleware1、安装代理插件:npm i http-proxy-middleware2、建立配置文件:src/setupProxy.js 文件路径和名称要严格一致const { createProxyMiddleware } = require("http-proxy-middleware");module.exports = function (app) { app.u...
2021-12-15 19:48:02
1152
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人