- 博客(180)
- 收藏
- 关注
RSS订阅原创 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关注的人