- 博客(25)
- 收藏
- 关注
RSS订阅原创 react学习第三天（一）
react状态管理react中的 state 相当于vue中的 data ，但是使用方式和vue不一致。修改state的正确方式，调用setState,切勿重新修改数据例： 每隔1行输出当前时间import React from 'react';import ReactDOM from 'react-dom';import'./App.css';class Clock extends React.Component{ constructor(props){ super(pro
2020-07-31 22:12:51
106
原创 react学习第二天（三）
react组件：函数式组件、类组件1、函数式组件//函数式组件function Father(){ //组件名字要大写 return ( <div> <h1>函数式组件</h1> </div> )}ReactDOM.render( <Father/>, document.querySelector('#root'))//函数式组件function Father(){ //组件名字
2020-07-29 23:52:25
129
原创 react学习第二天（二）
jsx_style 样式let exampleStyle = { background: "pink", borderBottom: "1px solid blue" //注意要使用驼峰命名法}let element = ( <div> <h1 style={exampleStyle}>helloworld</h1> //jsx中不能在style中直接添加样式 //<h1 style="height: 200px;"&
2020-07-29 23:13:46
83
原创 react学习第二天（一）
1、react jsx语法优点jsx执行更快，编译为javascript代码时进行优化类型更安全，编译过程如果出错，就不能编译，及时发现错误jsx编写模板更加简单快速（不要跟vue比）2、react jsx语法注意：jsx必须要有根节点正常普通html 元素要小写，如果是大写，默认是组件3、jsx表达式//例一：let str = '当前的时间是：'let time = new Date().toLocaleTimeString()let element = ( <d
2020-07-29 22:29:28
108
原创 react学习第一天
react 构建用户界面的javascript库，主要用于构建ui界面，2013年开源。特点：声明式的设计高效，采用虚拟DOM来实现DOM的渲染，最大限度地减少DOM的操作灵活，跟其他库灵活搭配使用JSX，俗称JS里面写HTML，javascript语法的扩展组件化。模块化。代码容易复用，2016年之前大型项目非常喜欢react单向数据流，没有实现数据的双向绑定，数据->视图->事件->数据1、安装脚手架npm install -g create-react-app
2020-07-28 23:15:52
95
原创 sass入门（四）
一. 使用选择器继承来精简CSS选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现//通过选择器继承继承样式.error { border: 1px solid red; background-color: #fdd;}.seriousError { @extend .error; //.seriousError将会继承样式表中任何位置处为.error定义的所有样式 border-width: 3px;}.seriousError不仅
2020-07-18 17:09:15
123
原创 sass入门（三）
二. 混合器当样式变得越来越复杂，需要大段大段的重用样式的代码，独立的变量就没办法应付这种情况了，这时可以通过sass的混合器实现大段样式的重用。@mixin rounded-corners { /*定义混合器，目的是添加跨浏览器的圆角边框*/ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}/*在样式表中通过@include来使用这个混合器，放在你希望的任何地方*/notice {
2020-07-18 16:43:42
83
原创 sass入门（二）
一. 导入sass文件@import"sidebar";这条命令将把sidebar.scss文件中所有样式添加到当前样式表中1.导入局部文件：可省略文件名开头的下划线例如：你想导入themes/_night-sky.scss这个局部文件里的变量，你只需在样式表中写@import “themes/night-sky”;。2.默认变量值;一般情况下，你反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值。举例说明：$link-color: blue;$link-color: red;a {
2020-07-18 16:13:32
78
原创 sass入门（一）
一. $声明变量$nav-color: #F90;nav { $width: 100px; width: $width; color: $nav-color;}//编译后nav { width: 100px; color: #F90;}$highlight-color: #F90;.selected { border: 1px solid $highlight-color;}//编译后.selected { border: 1px solid #F
2020-07-17 18:28:19
242
原创 vue中使用typescript的迷惑
一. 第三方插件库：vue-class-componentvue-class-component 是官方维护的TypeScript装饰器，写法比较扁平化import { Component, Vue, Watch, Prop } from 'vue-class-component'import Header from '@/component/header.vue'import MyMixin from './mixin.js' Vue.mixin(MyMixin); @Compone
2020-07-16 18:09:00
323
原创 前端项目学习
下载并运行https://github.com/Armour/vue-typescript-admin-template模板项目，熟悉了前端项目的基本结构，了解了vue，vuex，typescript，element-ui怎么结合一块开发项目，并自由添加路由以及页面。以下是我添加的页面：test组件<template> <div> <el-button type="primary" size="mini" plain="true"> 提交
2020-07-15 18:43:54
195
原创 vue学习笔记（五）
节点，树<div> <h1>My title</h1> Some text content <!-- TODO: Add tagline --></div>上述 HTML 对应的 DOM 节点树如下图所示：每个元素都是一个节点。每段文字也是一个节点。甚至注释也都是节点。一个节点就是页面的一个部分。就像家谱树一样，每个节点都可以有孩子节点 (也就是说每个部分可以包含其它的一些部分)。虚拟DOM：Vue 通过建立一个虚拟 D
2020-07-14 11:05:46
586
4
原创 vue学习笔记（四）
混入：混入提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。// 定义一个混入对象var myMixin = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from mixin!') } }}
2020-07-14 10:32:00
204
原创 vue学习笔记（三）
处理边界情况：访问根实例：在每个 new Vue 实例的子组件中，其根实例可以通过 $root property 进行访问（适用于小型应用，大型应用使用vuex来管理状态）// Vue 根实例new Vue({ data: { foo: 1 }, computed: { bar: function () { /* ... */ } }, methods: { baz: function () { /* ... */ } }})//所有的子组件都可以
2020-07-14 09:59:04
209
原创 vue学习笔记（二）
组件：组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。全局注册：// 定义一个名为 button-counter 的新组件Vue.component('button-counter', { //全局注册一个组件，第一个参数为组件名称 d
2020-07-13 17:51:25
253
原创 vue学习笔记（一）
1. 插值表达式(也可以是简单的表达式或者三元表达式)<span>message: {{ msg }}</span>2. 插入原始HTML<p v-html="rawHtml"></p>3. 插入html属性<div v-bind:id="dynamic"></div>4. 指令：带有v-前缀（1）v-if：条件渲染，这块内容只会在指令的表达式返回 truthy 值的时候被渲染。<h1 v-if="aweso
2020-07-13 16:44:42
143
原创 vuex的学习笔记与总结
一. Vuex是什么vuex是实现组件全局状态管理的一种机制，可以方便的实现组件之间数据的共享。二. 使用vuex统一管理状态的好处能够在vuex中集中管理共享的数据，易于开发和后期维护；能够高效地实现组件之间的数据共享，提高开发效率；存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步；三. 什么样的数据适合存储到vuex中一般情况下，只有组件之间共享的数据，才有必要存储到vuex中，对于组件中的私有数据，依旧存储在组件自身的私有data中。四. vuex的基本使用安
2020-07-13 11:50:27
365
原创 es6学习（上）
一. 字符串的新增方法includes()：返回布尔值，表示是否找到了参数字符串。startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。et s = 'Hello world!';s.startsWith('Hello') // trues.endsWith('!') // trues.includes('o') // true这三个方法都支持第二个参数，表示开始搜索的位置。et s = 'Hell
2020-07-10 18:07:31
115
原创 typescript中的装饰器（笔记）
装饰器是一种特殊类型的申明，它能够被附加到类申明、方法、属性或参数上，可以修改类的行为通俗的讲，装饰器就是一个方法，可以注入到类、方法、属性或参数上来扩展类、属性、方法、参数的功能常见的装饰器： 类装饰器、属性装饰器、方法装饰器、参数装饰器装饰器的写法: 普通装饰器（无法传参）、装饰器工厂（可以传参）普通装饰器： 不能传参 // 定义一个装饰器function logClass(param:any){ console.log(param)//输出：ƒ HttpClient() {}.
2020-07-10 16:46:09
238
原创 typescript中的枚举（笔记）
使用枚举我们可以定义一些带名字的常量。 使用枚举可以清晰地表达意图或创建一组有区别的用例。 TypeScript支持数字的和基于字符串的枚举。数字枚举enum Direction { //定义了一个数字枚举 Up = 1, //Up使用初始化为 1， 其余的成员会从 1开始自动增长，Direction.Up的值为 1， Down为 2， Left为 3， Right为 4 Down, Left, Right}我们还可以完全不使用初始化器：enum
2020-07-10 15:00:49
382
原创 typescript中的泛型（笔记）
例：不用泛型的话，函数可能是下面这样：function identity(arg: number): number { return arg;}或者，我们使用any类型来定义函数：function identity(arg: any): any { return arg;}使用any类型会导致这个函数可以接收任何类型的arg参数，这样就丢失了一些信息：传入的类型与返回的类型应该是相同的。如果我们传入一个数字，我们只知道任何类型的值都有可能被返回。因此，我们需要一种方法使返回值
2020-07-10 14:10:41
330
原创 typescript中的类（笔记）
1.类：class Greeter { greeting: string; Constructor(message: string){ This.greeting = mesage; } greet(){ Return “hello”+this.greeting; }}Let greeter = new Greeter(“world”);2.继承：Class Animal { Move(distance: number = 0){ Console.log(`animal
2020-07-10 11:37:27
137
原创 typescript中的函数
1.函数类型：我们可以为每个参数添加类型后再为函数本身添加返回值类型，ts能够根据返回语句自动推断出返回值类型，因此我们通常省略它；Function add (x: number, y: number): number{Return x+y;}Let myAdd = function(x: number, y: number): number{ return x+y; }2.推断类型： 如果在赋值语句的一边指定了类型但是另一边没有类型的话，ts编译器会自动识别出类型；Let myAdd = f
2020-07-10 11:25:38
164
原创 TypeScript学习（上）
一．基础类型1.布尔型 let isDone: boolean = false;2.Number型 let a: number = 5; 支持十进制/十六进制/二进制/八进制3.String型 let name: string = “bob”; name = “Mary”;Let sentence: string = hello, my name is ${ name };4**.数组** let list: number[] = [1, 2, 3];Let lis
2020-07-09 18:23:00
709
原创 es6学习（下）
一.Promise对象Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。const p = Promise.all([p1, p2, p3]);上面代码中，Promise.all()方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例，如果不是，就会先调用下面讲到的Promise.resolve方法，将参数转为 Promise 实例，再进一步处理。另外，Promise.all()方法的参数可以不是数组，但必须具有 Iterator 接
2020-07-09 18:18:13
98
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人