- 博客(15)
- 收藏
- 关注
RSS订阅原创 React的组件通信和状态提升
React的组件通信：父===>子通信 : 父组件将属性(props)传递给子组件子===>父通信 ：调用父组件传递过来的方法去实现。传递的数据放在参数里面(父组件将一个改变自身状态的方法传递给子组件，子组件去调用的同时将一些参数传给它)下面通过一个案例的两种方式讲解组件之间的通信和状态提升问题。状态提升也就是将state写在父组件里，方便进行管理使用。这是将状态放在父组件...
2020-04-17 10:42:42
375
原创 React的ref属性
ref给组件或者DOM进行标记React提供的这个ref属性，表示为对组件真正实例的引用，其实就是ReactDOM.render()返回的组件实例。ref可以挂载到组件上也可以是dom元素上。ref设置的方式：1.ref字符串方式 componentDidMount(){ this.refs.input.focus() } <i...
2020-04-17 10:23:40
232
原创 React的数据与状态
组件的数据承载 （props属性 | state状态）props属性一般是从外部传入的，组件内部是不能对外部传入进来的属性进行更改，自己只是拿来用的。state状态是组件自身定义的，后续组件可以对于自身定义的状态进行更改。更改state的值更改state值，不能直接更改，因为直接更改的话视图不会同步的渲染对于状态的改变我们可以使用setState的方法去改变组件自身的状态。this...
2020-04-17 10:18:51
283
原创 React事件
React添加事件在react中，我们想要给组件的dom添加事件的话，也是需要在行内添加的方式，事件名字需要写成小驼峰的方式，值利用表达式传入一个函数即可。（原生的事件全是小写onclick, React里的事件是驼峰onClick）注意，在没有渲染的时候，页面中没有真实dom，所以是获取不到dom的给虚拟dom结构中的节点添加样式。在行内添加,写成驼峰形式，值是一个函数名，需要用 { } ...
2020-04-17 10:11:08
173
原创 React声明组件
react声明组件有两种方式：函数式组件和类组件函数式组件函数式组件也是无状态组件，无状态组件是属于一个函数没有继承功能;也没有生命周期,它的动态数据都是通过父组件传值子组件通过props接收渲染,针对一些简单的逻辑判断等等,选 用无状态组件。组件名首字母必须大写。import React from 'react'import ReactDOM from 'react-dom'/*c...
2020-04-17 10:03:21
666
原创 React基础知识
Reach的产生：React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开发模式；React 构建页面 UI ...
2020-04-17 09:39:43
259
原创 vue的生命周期理解
什么是生命周期？从Vue实例创建，运行，到销毁间，总伴随着各种各样的事件，这些事件，统称为生命周期。什么是生命周期钩子？就是生命周期事件的别名。主要的生命周期函数分类创建期间的生命周期函数：beforeCreate:实例刚在内存中被创建出来，此时，还没有初始化好data和methods属性。created：实例已经在内存中创建好，此时data和methods已经创建，此时还没有开始...
2020-03-24 23:14:55
184
原创 vue之v-model
表单控件在实际开发中是非常常见的，特别是对用户信息的提交，需要大量的表单。vue中使用v-model指令来实现表单元素和数据的双向绑定。当我们在输入框输入内容是，因为input中的v-model绑定了message，所有会实时将输入的内容传递给message，message发生改变，当message发生改变时，因为使用了mustache语法，将message的值插入到DOM中，所以DOM发生...
2020-03-23 22:44:47
216
原创 vue之v-for的使用
v-for遍历数组如果在遍历的过程中不需要使用索引值，v-for=“movie in movies”，一次从movies中取出movie，并且在元素内容中，我们可以使用插值已发，来使用movie。如果在遍历的过程中，我们需要拿到元素在数组中的索引值，v-for=“（movie，index）in movies”，其中index就代表了取出的movie在原数组的索引值。v-for遍历对象组...
2020-03-23 22:33:03
631
原创 vue之v-if，v-else-if，v-else，v-show
v-if的原理：v-if后面的条件为false时，对应的元素以及子元素不会渲染，也就是根本没有对应的标签出现在DOM中。v-show：决定一个元素是否渲染，改变的是元素的display属性。v-if与v-show的对比：v-if当条件为false时，压根不会有对应的元素在DOM中。v-show当条件为false时，仅仅是将元素的display属性设置为none。开发中如何选择：当...
2020-03-23 22:08:58
228
原创 vue里面v-on的使用
首先我们看看v-on的简单使用：按钮1是将事件写在表达式里，按钮2是将事件添加到methods中定义的函数。v-on的语法糖写法：v-on的参数：当通过methods中定义的方法，以供@cilck调用时，需要注意参数问题。情况一：如果该方法不需要额外参数，那么方法后的()可以不加，如果方法本身有一个参数没那么会默认将原生事件event参数传递进去。情况二：如果需要同时掺入某个参数...
2020-03-23 22:01:20
5647
原创 vue里的计算属性
我们知道，在模板中可以通过插值语法显示一些data中的数据，但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来显示，我们就可以使用计算属性，computed。这是插值语法拼接:这是计算属性：计算属性也可以进行一些复杂的操作,比如下面这个例子：计算属性的set和get：每个计算属性都包含一个setter和getter，我们不常用setter方法....
2020-03-23 21:51:33
504
原创 对于vue虚拟dom的理解
为什么需要虚拟dom？虚拟DOM就是为了解决浏览器性能问题而被设计出来的。例如，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。简单来说，可以把Virtual DOM 理解为一个简单的JS对象，并且最少包含标签名( tag)、属性(a...
2020-03-23 21:41:45
1913
原创 初学VUE（如何创建vue实例和vue的基本语法）
什么是vue？Vue 是一套用于构建用户界面的渐进式框架，是一种自底向上逐层应用。Vue的核心库只关心视图层，能够与其它第三方库或已有项目结合。如何引入使用vue？script标签引入NPM安装使用vue的基本语法Mustache语法{{}} ： 通过mustache语法插入 数据是响应式的mustache对数据类型的支持；数据类型：基础数据类型：number、strin...
2020-03-18 21:25:49
212
原创 关于设计模式的一些想法
最近，学习了几种设计模式，由此来作出点总结。设计模式在我们的开发中是必不可缺的，它代表着最佳的实践，通常被有经验的面向对象的软件开发人员所采用，是软件开发人员在软件开发过程中面临的一般问题的解决方案，是由众多软件人员经过长时间的实验和错误总结出来的，所以我们使用设计模式会给我们带来极大的方便。设计模式只能在特定的情况，特定的时期，针对特定的问题使用。单例模式单例模式是最简单的设计模式之一，这种...
2020-02-24 20:25:50
156
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人