1. 生命周期 1. 声命周期的三个阶段（旧） 初始化阶段：由ReactDOM.render()触发---初次渲染 1. constructor() 2. componentWillMount() 3. render() 4. componentDidMount() ==> 常用 一般在这个钩子中做一些初始化的事情，例如：开启定时器，订阅消息，发起网络请求 更新阶段：由组件
1. 收集表单数据 包含表单的组件分类 受控组件——页面中所有输入类的DOM,随着输入，把值存维护在状态里，需要用的时候去状态里取值（推荐，避免了过渡使用ref） 非受控组件——页面中所有输入类的DOM，现用现取 受控组件示例： 非受控组件示例： 2. 高阶函数 高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数 若A函数，接收的参数是一个函数，那么A就可以称之为
1. 组件 函数式组件（适用于【简单组件】的定义） 示例： 执行了ReactDOM.render(<MyComponent/>, ...)之后执行了什么？ React解析组件标签，找到了MyComponent组件 发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中 类组件（适用于【复杂组件】的定义） 示例： 执行了Reac
1. 初识虚拟DOM 描述 什么是虚拟DOM呢？本质是Object类型的对象（一般对象） 我们为什么要了解虚拟DOM呢?很简单，因为React要用 我们第三点会使用React分别使用js和jsx创建虚拟DOM，在此呢，我们先要了解两大js库： react.js：react的核心库 react-dom.js：用于支持react操作DOM 注意：加development表示开发模式的库
1. 介绍 理解： 一个路由（route）就是一组映射关系（key-value）, 多个路由需要路由器（router）进行管理 前端路由： key是路径,value是组件，通俗的将就是通过一个路径key，可以访问vue的组件，实现组件的访问与跳转以及传参 2. 基本使用 安装vue-router, 命令npm i vue-router 应用插件：Vue.use(vueRouter) 编写ro
1. vuex是什么 概念：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。这个怎么理解呢？可以暂时理解成全局事件总线、消息订阅与发布一样的道理，把vuex当成是外部的一个储存空间，内部储存着方法和状态。看一下图： 其中呢： state：是一个对象，目的是保存具体的数据 ac
1. nextTick下一次更新结束后执行指定的操作 语法： this.$nextTick(回调函数) 作用：在下一次DOM更新结束后执行其指定的回调 什么时候用： 当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行 举个栗子：例子中有updated生命周期和nextTick同时输出，都是触发组件更新的函数，两者有和异同呢？ 首先我们看App.vue
写在最前：父组件引用子组件，如何能在应用子组件内容的同时，还能在自定义内容呢？ 1. 插槽 作用： 让父组件可以向子组件指定位置插入html结构，也是一种组件通信的方式，适用于父组件===>子组件 分类： 默认插槽，具名插槽，作用域插槽 使用方式： 默认插槽 父组件中： <MyContainer> <div>html结构</div> </
抛出问题:我们多级组件，或者任意不想关的子组件如何传递数据呢？ 1. 全局事件总线（$bus） 一种组件间通信的方式，适用于任意组件间通信 全局事件总线示意图： 安装全局事件总线： new Vue({ .... beforeCreate(){ Vue.prototype.$bus = this // 安装全局事件总线，$bus就相当于vm
1. 组件传值 组件化编码流程： 拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突 实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用： 一个组件在用，放在组件自身即可 一些组件在用，放在他们共同的父组件上（状态提示） 实现交互：从绑定事件开始 props适用于： 父组件 ===> 子组件 通信 子组件 ===> 父组件 通信（要求父
1. ref属性 被用来给元素或子组件注册引用信息（id的替代者） 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（VC（VueComponent）） 使用方式： 打标识<h1 ref="xxx">.....</h1>或者<School ref="xxx"></School> 获
1. 文件分析 1. 补充： 什么叫单文件组件？ 一个文件中只有一个组件 vue-cli创建的项目中，.vue的文件都是单文件组件，例如App.vue 2. 进入分析 1. package.json: 项目依赖配置文件： 如图，我们说主要的属性： name: 项目的名称 version: 项目版本 scripts: 脚本入口 serve: 启动项目命令 build: 打包项目命令
1. 安装node 网址：https://nodejs.org/en 下载LTS版本表示长期支持版本 说明： node是一个基于Chrome V8引擎的javascript运行环境,让JavaScript 运行在服务端的开发平台 vuecli创建的项目必须运行在node环境中， npm为node自带包管理工具，用于下载三方依赖包和运行项目打包等操作 npm官网https://www.npmj
1 多文件组件：一个文件中包含多个组件 组件步骤 第一步：定义 const school = Vue.extend({ template:`<div>{{schoolName}}</div>`, data(){ return { schoolName: '美丽的学校' } } }) // extend可以省略 const st
1.0 引入组件 传统方式编写应用 使用组件方式编写应用 1.1 模块 理解：向外提供特定的js程序，一般就是一个js文件 为什么：js文件很多很复杂 作用：复用js,简化js的编写，提高js运行效率 1.2 组件认识 理解： 用来实现应用中局部（特定）功能代码和资源集合（html/css/js/image...） 为什么： 一个界面的功能很复杂 作用：复用编码，简化项目编码，提
抛出问题：一进入页面就开启一个定时器，每隔1秒count就加1，如何实现 示例： <body> <div id="app"> {{ n }} <button @click="add">执行</button> </div> <script> let vm = ne
1. 过滤器 定义：对要显示的数据进行特定格式转换再显示（适用于一些简单逻辑的处理） 语法： 注册过滤器：Vue.filter(name, callback) 或 new Vue{filters:{}} 使用过滤器：{{ xx | 过滤器名 }} 或 v-bind:属性 = "xxx | 过滤器名" 备注： 过滤器也可以接受额外参数、多个过滤器也可以串联 并没有改变原
1. 条件渲染 v-if v-if="表达式" v-else-if = "表达式" v-else = "表达式" 适用于：切换频率较低的场景 特点：不显示dom元素，直接被删除 注意：v-if和v-else-if、v-else一起使用，但要求结构不能被打断 v-if和template一起使用, v-show不可以 v-show
Vue 监听(watch): 监听一个属性的变化 监事属性watch: 当监视的属性变化时，回调函数自动调用，进行相关操作 监视的属性必须存在，才能进入监视 监视的两种写法： new Vue 时传入watch配置 通过 vm.$watch()监视 immediate初始化时让handler调用一下 深度监视： Vue中的watch默认不监视对象内部值的变化（只监视一层） 配
Vue 1. 事件 v-on @ 基础 使用 v-on:xxx或者@xxx绑定事件，其中xxx是事件名 事件的回调需要配置在methods对象中，最终会在vm上 methods中配置函数，不要用箭头函数，否则this就不是vm了 methods中配置函数，都是被Vue管理的函数，this指向 vm 或者 组件实例对象 @click="demo"和@cli
Vue data中的两种方式 对象式 data:{ } 函数式 data(){ return { } } 示例： <body> <div id="app"> {{ name }} {{ age}} {{$options}} <input type="text&quo
Vue2的终止支持时间为2023年12月31日。 在这个矛盾的时间点，还是决定先把vue2的笔记放出来，在Vue2完结后再把Vue3的笔记补上。这样呢，2和3都不落下，也算是来一个启承的作用吧。在工作中呢，旧的项目可以维护，新的项目也可以上手。后续呢会有react16和react18、node、webpack、vite、以及实战项目，期间会包含umijs,nextjs, nuxtjs等等更多的更前
win+r调出命令框gpedit.msc-----组策略sndrec32-------录音机Nslookup-------IP地址侦测器explorer-------打开资源管理器logoff---------注销命令tsshutdn-------60秒倒计时关机命令lusrmgr.msc----本机用户和组services.msc---本地服务设置oobe/msoobe /a----检查XP是否
微软常用运行库合集，也叫做Microsoft Visual C++ Redistributable Package，是微软推出的一款运行库合集软件，用于支持运行使用C++开发的应用程序。在Windows操作系统中，很多应用程序都会依赖这个运行库合集。蓝奏云下载地址：（微软常用运行库合集 2023.08.09） https://wwbt.lanzoum.com/ildap1g74laf 密码:h9u
分享两个git程序，网络不好的朋友们可以自己下载一下哈 Git-2.21.0-64-bit.exe Git-2.37.3-64-bit.exe 还有一点就是现在很多都用工具提交代码了，所以很大的可能会遇到设置邮箱和用户名，所以命令也在此log一下：git config --global user.name "xxx" git config --global user.email "xxx"
1. nvm是什么nvm全英文也叫node.js version management，是一个nodejs的版本管理工具。nvm和npm都是node.js版本管理工具，为了解决node.js各种版本存在不兼容现象可以通过它可以安装和切换不同版本的node.js。2. nvm下载可在github上下载最新版本,本次下载安装的是windows版本。下面提供两个版本：nvm 1.1.12-setup.
之前在网上找的开发指南，结合自己公司项目做了些整理
1.全局安装create-react-appyarn global add create-react-app2.创建项目yarn create react-app my-demo
默认情况下，el-tabs下划线长度根据标签内容自动调整。那么如何自定义e-tabs的样式呢？1.el-tabs标签设置自定义class名<el-tabs v-model="" class='custom-tabs'> <el-tab-pane v-for="(item, index) in list" :key="index" :label="item.value">&
很多时候input设置了type="number"还是能输入字母e,那么如何禁止呢？1.例如input框为<el-input type="number" v-model="" @keydown.native="keyInput" placeholder="请输入数字"></el-input>2.写方法// 去除number输入框内e keyInput(e) { let
Copyright © 2005-2024 51CTO.COM 版权所有 京ICP证060544号
