- 博客(14)
- 收藏
- 关注
RSS订阅原创 7.优化工程结构
一、测试组件现象：在工程里面有很多组件需要开发，这就会导致components文件夹下的文件越来越多，并且公司中项目非常庞大，组件不断深层次嵌套子组件的情况是常态。测试方法：之前在项目中测试组件的时候，我们往往是在父组件中直接使用测试组件，然后运行项目，找到应用组件到区域观察组件效果，在复杂项目中这种测试方式麻烦、复杂且容易出现问题。改进方法：所以我们用vue提供的快速原型开发的方式在一个新的标签页中，单独运行测试组件。使用上述方式测试组件首先应该优化工程结构。二、优化工程结构三、运行测
2021-07-29 15:29:23
132
2
原创 5.Vue计算属性
一、计算属性和方法的区别1.1 计算属性计算属性本质上是包含getter和setter的方法，当获取计算属性时，实际上是在调用计算属性的getter方法。vue会收集计算属性的依赖，并缓存计算属性的返回结果。只有当依赖变化后才会重新进行计算。计算属性的getter和setter参数固定，getter没有参数，setter只有一个参数。1.2 方法方法没有缓存，每次调用方法都会导致重新执行。方法的参数不限。1.3 总结由于有以上的这些区别，因此计算属性通常是根据已有数据得到其他数据，
2021-07-27 20:49:18
118
原创 4.vue-cli搭建工程
文章目录一、vue-cli二、SFC三、预编译一、vue-clivue-cli是一个脚手架工具，用于搭建vue工程。它内部使用了webpack，并预置了诸多插件（plugin）和加载器（loader），以达到开箱即用的效果。除了基本的插件和加载器外，vue-cli还预置了：babelwebpack-dev-servereslintpostcssless-loader二、SFC单文件组件，Single File Component，即一个文件就包含了一个组件所需的全部代码&
2021-07-27 19:52:21
74
原创 3.Vue组件
文章目录一、创建组件二、注册组件2.1 全局注册2.2 局部注册三、应用组件四、组件树五、向组件传递数据一、创建组件组件是根据一个普通的配置对象创建的，所以开发一个组件只需要写一个配置对象即可。该配置对象和vue实例的配置对象几乎是一样的，只有以下几点差异。组件的配置对象data是一个函数，返回值作为数据。组件的配置对象没有el，所以组件的虚拟dom树必须定义在render或者template中。let com = { data(){ return { ... } },
2021-07-27 19:45:17
108
原创 1.第一个Vue应用
实现一个简易的商品管理功能<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
2021-07-27 16:44:09
86
原创 7.React组件状态
文章目录一、组件状态二、状态初始化三、状态的变化四、组件的数据来源五、案例解析一、组件状态什么是组件状态？组件状态是指组件可以自行维护的数据。组件状态仅在类组件中有效。状态本质上是类组件的一个属性，一个对象。二、状态初始化在类组件的构造函数中添加state，状态是必须要初始化的，否则为undefined。constructor(props){ super(props); this.state = { n:this.props
2021-07-24 00:17:44
217
原创 6.显示学生列表[demo]
显示学生列表[demo]这篇博客主要是对React组件相关知识的一个总结。思路：先考虑Student组件怎么写，再考虑一个StudentList组件应该如何用Student组件完成，其中关键之处是组件属性的使用。一、需求通过接口拿到学生列表数据，并将其渲染到页面上。// src/components/Student.jsimport React from "react";export default function Student(props) { // 传入一个学生的相关信息，
2021-07-23 00:42:46
315
2
原创 5.React组件和组件属性
一、组件1.1 函数式组件特点必须返回react元素1.2 类组件1.3 特别注意组件首字母要大写，为什么？首字母大写，系统会认为这是一个组件，首字母小写，系统会认为你要创建一个html元素。// 正常组件的使用方式function MyFuncComp(){ return <h1>组件内容</h1>}React.render(<div> <MyFuncComp/></div>,docu,document.
2021-07-21 23:09:37
303
1
原创 4.图片切换[demo]
这篇博客是对前面学过的知识的一个总结和运用。一、需求让图片每隔两秒钟切换一次。鼠标悬浮，图片停止切换。#root { width: 520px; height: 280px; border: 2px solid; margin: 0 auto;}#root img { width: 100%; height: 100%; display: block;}// react无侵入性 所以我们可以用原生js的方式注册事件impo.
2021-07-09 13:19:37
141
原创 3.JSX
一、什么是JSXJSX是由Facebook公司起草的JS扩展语法。JSX会被babel编译，最终会被转化成React.createElement，所以JSX本质上是一个JS对象（React对象）。二、JSX特点每个JSX表达式有且仅有一个根节点，如果jsx表达式有多个子元素，那么必须要添加一个根节点，此时有两种添加方式。...
2021-07-08 22:46:50
133
原创 1.React 简介
一、什么是reactFacebook研发 解决UI复杂度的 JavaScript库React不是框架框架显著特点 侵入性 改变开发代码的方式二、React特点轻量：React开发版所有源码（包含注释）仅300多行原生：所有React代码都是用原生JS书写而成，不依赖其他任何库易扩展：React对代码封装程度较低，也没有过多的使用魔法，所以React中的很多功能都可以扩展不依赖宿主环境：渐进式：单向数据流：用JS代码声明界面组件化三、学习路径整体原则：熟悉API --&g
2021-07-03 16:19:52
292
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人