- 博客(20)
- 收藏
- 关注
原创 Vue 生命周期
vue 生命周期 是从创建、运行到销毁的一系列过程。也就是 new Vue() 就是生命周期的开始。Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程,称这是Vue的⽣命周期。vue 有8个钩子函数数据管理和DOM渲染。...
2022-08-08 10:29:53 281 1
原创 vue 中 methods、computed、watch
是 vue 的计算属性,是根据依赖关系进行缓存的计算,只有在它的相关依赖发生改变时才会进行更新,一般情况下,computed 默认使用的是 getter 属性。大部分下 watch 和 computed 是没有区别的,但是如果在数据变化的同时进行异步操作的情况下,watch 则是最好的选择。计算属性,属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。侦听属性,可以看作是 methods 和 computed 的结合。watch 在监听的时候,可以有二次参数,第一次参数为。属性给 Vue 定义方法。.
2022-08-05 20:36:40 578
原创 vue 修饰符
防止执行预设的行为(如果事件可取消,则取消该事件,而不停止事件的进一步传播),:只会触发自己范围内的事件,不包含子元素(事件目标对象是自己,才会触发)vue 中 number 修饰符的作用是将输入框内的字符串转换成数字。vue 中 trim 修饰符的作用是将输入框内中前后的空格去掉。在 change 而非 input 时更新。:与事件冒泡的方向相反,:等同于 js 中的。...
2022-08-05 17:21:37 2194
原创 深拷贝和浅拷贝
方法,当该对象被表示为一个文本值时,或者一个对象以预期的字符串方式引用时自动调用。如果此方法在自定义对象中未被覆盖,toString() 返回。如果对象的value是基本类型的话,也可以用Object.assign来实现深拷贝,但是要把它赋值给一个空对象。内存分为四个区域:栈区(堆栈),堆区,全局静态区,只读区(常量区和代码区)在JS中,数据类型分为基本数据类型和引用数据类型两种,对于。缺点:只能拷贝一层,如果属性值是对象,无法拷贝。的形式来调用,传递要检查的对象作为第一个参数。将对象转为字符串,使用。..
2022-08-05 11:56:46 57
原创 Vue 安装、使用 json Script 代码操作内容,元素,属性,事件
通过 v-html 创建的 DOM 内容不受作用域内的样式影响,用来解析并正确显示带有html标签的文本。设置指定元素上的某个属性值。否则,使用指定的名称和值添加一个新的属性。Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。的区别:v-html 支持解析,v-text 不支持解析,以文本样式显示。:插值表达式输出含html代码的文本,和 {{msg}} 作用类似。:可以给元素添加属性,也可以修改元素已有的属性。:可以获得自定义的属性,也可以获得标准的属性;......
2022-08-04 17:52:18 277
原创 React redux -- Cookie、redux-persist持久化数据存储、Ant Design 表单Form常用方法
是一个简单的,轻量级的处理 cookie 的js API ,用来处理 cookie 相关的插件安装引入js-cookie 的保存、获取和删除react-cookiereact-cookie 的使用与 一样,使用方法略有不同安装引入react-cookie 的保存、获取和删除redux-persist 持久化数据存储在 React 项目中,我们通常会通过 redux 以及 react-persist 来存储和管理全局数据。redux 和 react-persist 存储 存储数据时,如果
2022-07-14 09:48:24 744
原创 React Redux 框架
Redux 是一个专为 React.js 应用程序开发的状态管理模式 持久化数据存储Redux– 集中式存储管理应用的所有组件的状态– 保证状态以一种可预测的方式发生变化– 简化 Redux 组件间通讯 对象包含所有数据 保存数据的地方,整个应用只能有一个 Store 要想更新 state 中的数据,你需要发起一个 action。action 就是一个普通 JavaScript 对象(注意到没,这儿没有任何魔法?)用来描述发生了什么。其中,type 属性是必须的,表示 Action 的名称。其他属性
2022-07-12 09:22:18 366
原创 React 生命周期、Hooks
react 生命周期是组件实例从创建运行到销毁的一系列过程componentDidMount (挂载时)componentDidUpdate (更新时)componentWillUnmount (卸载时)Hook 是一些可以让你在函数组件里"钩入" React state 及生命周期等特性的函数,Hook 不能在class 组件中使用,常用Hook: useState()、useEffect()、useRef()、useContext()……Hook 的特点– 在组件之间复用状态逻辑,无需修改组
2022-07-07 09:10:19 1588
原创 React 之脚手架和组件传参
ES7 React/Redux/GraphQL/React-Native snippets方法①方法②降版本清理目录结构appdome– publicindex.html– srcindex.js 入口文件app.js 根组件运行组件传参父传子在父组件使用子组件的地方,定义属性传参– 子组件中通过 props 接收参数,类组件需要 this.props.属性名,函数组件 props.属性名– 传参类型:字符串… 基本数据类型、对象{}、函数 ()=>{}、jsxApp.js
2022-07-05 20:01:19 246
原创 React介绍
React 起源于Facebook,于2013年5月开源。是一个构建用户界面的JavaScript 库,与vue,angular 并称前端三大框架。学习资源:React英文官网 React中文官网 官网文档特点:数据驱动、组件化、虚拟DOM安装引入(按顺序引入)React 程序第一个 react 程序ReactDOM.render(react 元素, 节点)– ReactDOM.render:将 React 元素渲染到指定的节点显示– react 元素:元素描述了你在屏幕上想看到的内容注
2022-07-05 10:29:17 390
原创 插槽的使用
在子组件中,提供给父组件使用的一个占位符作用在父组件使用子组件时,动态更新子组件内容具名插槽在子组件中给插槽取个名字,父组件使用 v-slot 指令子组件父组件默认插槽不取名字子组件父组件作用域插槽带数据的插槽子组件父组件虚拟DOM虚拟 DOM 本质上是一个普通的 JS 对象,用于描述试图的界面结构虚拟DOM 改变的值映射到 真实DOM 上按照一定算法(diff算法)将虚拟DOM 和 真实DOM 进行比较存在目的:解决性能问题vue 渲染时,使用虚拟dom代替真实dom
2022-06-27 17:04:53 198
原创 Router 之嵌套路由、路由模式、重定向与懒加载
定义在children中的路由路由模式Vue spa应用(单页应用,只有一个 index.html ,在 public文件夹下Vue默认路由模式Hash 模式 “#” , 页面不会重新加载Router History模式重定向重定向:redirect 自动跳转错误处理路由懒加载路由懒加载......
2022-06-27 14:43:42 324
原创 VUEX介绍
在vue之后引入vuex会自动安装npm安装安装 Vuex 之后,让我们来创建一个 storeVuex 的核心概念State获取状态对象更改 Vuex 的 store 中的状态Actions提供给外部组件调用,actions内使用commit触发执行mutations中的方法Getter 接受 state 作为其第一个参数Vuex辅助函数 map系列在组件中使用mapGetters 辅助函数---- mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算
2022-06-27 11:58:14 132
原创 Router 导航守卫之全局导航守卫
路由跳转过程中,在跳转前、跳转中、跳转后定义的对应点的处理函数统一登陆身份认证统一在 beforEach 判断身份每次跳转都会触发from: 即将离开的路由to: 即将跳转到的路由next: 函数 next(),是否继续向下执行单个路由独享导航守卫组件内导航守卫...
2022-06-27 11:31:31 400
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人