m0_56195392的博客

原创 React 父向子传值

import React from 'react'/* 实现父子通信中的父传子，把父组件中的数据传给子组件 实现步骤： 1.父组件提供要传递的数据 state 2.给子组件标签添加属性值为satate中的数据 3.子组件中通过props获取数据 1.类组件中通过this.props获取 2.函数组件中通过props获取（需要传参props）注意事项：1.props是只读对象，不能进行修改2.props可以传递任何数据数字、字符串、布尔值、对象、数组、函数、jsx元..

原创 React 受控组件

//受控组件//React组件状态的地方实在state中,input表单元素也有自己的状态实在value中,//React将state与表单元素的值(value)绑定在一起,由state的值控制表单元素的值,从而保证单一数据源特性。/** * 实现步骤 * 1.在组件的state中声明一个组件的状态数据 * 2.将state状态数据设置为input标签元素的value属性的值 * 3.为input标签元素绑定onChange事件 * 4.在事件处理程序中，通过事件对象e获取到当前文本框的..

原创 React 修改数据

import React from "react"class Test extends React.Component { state = { count: 0, list: [1, 2, 3, 4, 5], person: { name: '张三', age: 18 } } //修改数据(不要直接修改状态的值，而是基于当前状态值创建新的状态值) //添加数据 changeState = () => { this.setState({..

原创 React jsx-counter组件实例

import React from "react"class Test extends React.Component { state = { count: 0 } render () { return ( <div> <button onClick={() => { this.setState({ count: this.state.count + 1 }) }}>{this.state.count}<..

原创 React jsx-修改事件状态

import React from "react"class Test extends React.Component { state = { name: 'zhangsan' } ChangeState = () => { this.setState({ name: 'lisi' }) } render () { return ( <div> this is test 当前name为：..

原创 React 函数创建和渲染

import React from "react"//函数组建的创建和渲染//创建// 1.组件名称必须首字母大写，react内部会根据这个来判断是否是组件还是普通的HTML标签//2.函数组件必须有返回值，表示UI结构，如果不需要渲染的话，可以返回null//3.组件就像HTML标签，可以被渲染到页面上，对于函数组件来说，渲染的内容是返回的值//4.使用函数名称作为组件标签名称，在页面上使用时，就是使用函数名称//如何获取事件对象e?//只需要在函数组件中传入参数e就可以获取事件对象..

原创 React jsx样式控制

//jsx样式控制//1.行内控制 -在元素身上绑定一个style属性//2.类名控制 -在元素身上绑定一个className属性import './app.css'const name='zhangsan'const style = { color: 'red', fontSize: '30px'}//动态控制一下这个active类名。const isActive = truefunction App () { return ( <div classN..

原创 React精简模板

//有一个type状态 1 2 3//1 -> h1//2 -> h2//3 -> h3//原则：模板中的逻辑尽量保持精简//复杂的多分枝的逻辑，收敛为一个函数 通过专门的函数来写分支逻辑 模板中只负责调用即可const getHtag = (type) => { if (type === 1) { return <h1> this is h1 </h1> } if (type === 2) { retur..

原创 React条件渲染

//条件渲染//技术方案：三元表达式（常用）逻辑&&运算//1.三元表达式 -满足条件才渲染一个span标签//2.&&const flag=truefunction App() { return ( <div className="App"> {flag ? ( <div> <span> this is span</span> </div&g..

原创 react如何完成列表渲染

//识别常规变量const name = '张三'//react如何完成列表渲染//技术方案：map 重复渲染的是那个模板，就return谁//注意事项：在遍历列表时同样需要一个类型为number/string不可重复的key，提高diff性能//key仅仅在内部使用，不会出现在真实的dom结构中const songs = [ { id: 1, name: '说散就散' }, { id: 2, name: '稻香' }, { id: 3, name: '龙拳' }, { i..

原创 自定义指令

自定义指令当指令第一次被绑定到元素上的时候，会立即触发发bind函数形参中的el表示当前指令绑定到的那个DOM对象。我们还可以在data中自定义一个color:blue ,然后在将值传给v-color="color"。如果我们想修改为红色，可data数据中没有red属性，我们不能只写为v-color:"red"。原因是vue在data中找不到red，但我们可以写为v-color:"‘red’"！那我们如何拿到data中color的值呢？我们可以在bind中传递一个bindi.

原创 插槽slot

插槽（slot）是vue组件的封装者提供的能力。允许开发者在组装组件时，把不确定、希望由用户指定的部分定义为插槽。slot的name属性vue官方规定每一个slot插槽，都要有一个name名称，如果省略了slot的那么属性，则会有一个默认名称叫做default。默认情况下，在使用组件的时候，提供的内容会被填充到名字为default的插槽中。1.如果要把内容填充到指定名称的插槽中，，要使用v-slot指令2.v-slot指令后面要跟上插槽的名字3.v-slot指令不能直接.

原创 keep-alive组件

keep-alive基本用法作用：防止组件被隐藏的时候被销毁了使用方法：直接在想要作用的组件上添加标签<keep-alive></keep-alive>keep-alive 可以把内部的组件进行缓存，而不是销毁组件keep-alive对应的生命周期当组件第一次被创建的时候，会执行created生命周期，也会执行activeted生命周期，当组件被激活的时候，只会触发activated生命周期，不在触发created。因为组件没有被重新...

原创 如何实现动态组件渲染

1.component标签是vue内置的，作用：组件的占位符2.is属性值，表示要渲染的组件名字3.is属性值，应该是组件在components节点下注册的名称

原创 如何在vue的项目中，安装node_moules包

只需要在自己项目里打开终端，输入npm i 即可

原创 兄弟组件中数据共享

tip：注意created与data平级

原创 子组件向父组件传递共享数据

$emit中第一个参数是自定义事件的名称，类似click，第二个参数是要传递的值在父组件中要调用自定义事件（方法和调用click事件一样 @click=“ ”）,再通过val接受子组件传递过来的值

原创 vue父组件向子组件传值

父组件向子组件传递共享数据：父组件中，通过子组件的标签进行传值，通过v-bind去绑定这些属性值，在子组件中通过props去声明这些自定义属性。（或者可以理解为通过props进行接收数据）tips:一定要在父组件中注意导入vue的包，否则无法渲染插值表达式如何修改props中的值不建议修改props中的值如果非要修改props中的值可以通过图示进行修改...

原创 props组件

props是自定义属性，允许使用者通过自定义属性，为当前组件指定初始值自定义属性的名字，是封装者自定义的只要合法就可以。props可以结合v-bind一起使用:props给属性传递的是一个字符串，如若想传递一个数字可在属性名称前添加v-bind或者添加:props中的数据可以直接在模板结构中渲染使用，但是props是只读的（功能上可以实现修改，但直接修改容易造成props中的数据被覆盖，所以不建议修改props中的数据，造成终端报错）如果想实现props中数据修改的功能，可.

原创 设置vue全局组件

原创 使用vue组件的三大步骤