2 fiona_0427

尚未进行身份认证

我要认证

暂无相关简介

等级
TA的排名 14w+

React图片引入的两种方式

一、使用到图片标签的src属性上时1.分离引入方式在文件头部引入:import logo from '../img/logo.svg';在reder函数中使用<img src={logo} alt="图标"/>2.通过require懒加载引入在reder函数中使用<img src={require("../img/logo2.jpg")} alt="图标"/>二、作为背景图片使用时1.分离引入方式在文件头部引入:import

2020-07-20 18:31:55

React列表渲染的三种常见方式

1.循环数组采用map方法render(){letimgarr=["https://t7.baidu.com/it/u=656449836,1405112256&fm=193", "https://t7.baidu.com/it/u=4203437985,3172522485&fm=193", "https://t9.baidu.com/it/u=2200618372,2799649385&fm=193"]} r...

2020-07-20 18:22:50

React的3种条件渲染方法(持续更新中....)

1.If/Elseclass App extends React.Component { state = { text: '', inputText: '', mode: 'view', } handleChange = (e) => { this.setState({ inputText: e.target.value }); } handleSave = () => { this.setState({text: thi

2020-07-20 18:11:26

React创建组件的两种常见方式

1.函数式定义(无状态组件)import React from 'react';function MyComponent(props){  return( <h1>mycomponent</h1> )}export default MyComponent;2.es6中class类的方式(有状态组件)import React, { Component } from 'react';class MyConponent extends Com

2020-07-20 17:59:33

Vuex

1.Vuex概述Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据共享使用Vuex管理数据的好处:A.能够在vuex中集中管理共享的数据,便于开发和后期进行维护B.能够高效的实现组件之间的数据共享,提高开发效率C.存储在vuex中的数据是响应式的,当数据发生改变时,页面中的数据也会同步更新Vuex中的核心特性A.StateState提供唯一的公共数据源,所有共享的数据都要统一放到Store中的State中存储例如,打开项目中的store.js文件,在State对

2020-07-14 18:16:38

github的使用

github开源代码托管网站github是基于git做版本控制的一、git的使用方法1.下载和安装git到官网去下载,下载成功后,点击鼠标右键,会出下如下两个新选项,Git GUI Here和Git Bash Here在任意文件夹下点击右键,选择Git Bash Here,来到当前文件夹路径的命令行在“新建文件夹”下操作,就会把“新建文件夹”当作一个工作区,来和仓库关联2.常用的git指令克隆–http地址–git clone http://github.com/Gitgit地址—gi

2020-07-11 00:11:39

Vue路由1

Vue Router的使用步骤(★★★)A.导入下载 npm i vue-router --save或者 npm i vue-router --S在main.js入口文件中引入 import Vue from "vue" import VueRouter from "vue-router"//引入路由工具 import App from "./App.vue"在main.js入口文件中注入路由Vue.use(VueRouter)//就是运行路由的相关函数和给vue绑定东西:

2020-07-08 20:35:35

Vue组件之间传值

父组件向子组件传值父组件发送的形式是以属性的形式绑定值到子组件身上。然后子组件用属性props接收子组件的mounted函数先于父组件的mounted函数调用若:1.父组件在mounted函数中将原data定义的arr:[ ],新赋值为arr:[1,2,3],2.父组件给子组件传值,子组件获得arr3.子组件在mounted函数中打印arr,打印的结果为[ ]空原因:子组件的mounted函数先于父组件的mounted函数调用,因为子组件调用mounted时,父组件还没有调用mounted

2020-07-06 20:14:41

Vue组件插槽

组件插槽组件的最大特性就是复用性,而用好插槽能大大提高组件的可复用能力匿名插槽 <div id="app"> <!-- 这里的所有组件标签中嵌套的内容会替换掉slot 如果不传值 则使用 slot 中的默认值 --> <alert-box>有bug发生</alert-box> <alert-box>有一个警告</alert-box> <aler

2020-07-05 21:39:20

Vue基础组件入门

什么是组件?组件 (Component) 是 Vue.js 最强大的功能之一组件可以扩展 HTML 元素,封装可重用的代码组件注册全局注册Vue.component(‘组件名称’, { }) 第1个参数是标签名称,第2个参数是一个选项对象全局组件注册后,任何vue实例都可以用组件的基础用法 <div id="example"> <!-- 2、 组件使用 组件名称 是以HTML标签的形式使用 --> <my-co

2020-07-05 21:21:28

Vue自定义指令

自定义指令内置指令不能满足我们特殊的需求Vue允许我们自定义指令Vue.directive 注册全局指令<!-- 使用自定义的指令,只需在对用的元素中,加上'v-'的前缀形成类似于内部指令'v-if','v-text'的形式。 --><input type="text" v-focus><script>// 注意点: // 1、 在自定义指令中 如果以驼峰命名的方式定义 如 Vue.directive('focusA',function

2020-07-05 21:15:07

Vue生命周期函数

生命周期事物从出生到死亡的过程Vue实例从创建 到销毁的过程 ,这些过程中会伴随着一些函数的自调用。我们称这些函数为钩子函数常用的 钩子函数beforeCreate在实例初始化之后,数据观测和事件配置之前被调用 此时data 和 methods 以及页面的DOM结构都没有初始化 什么都做不了created在实例创建完成后被立即调用此时data 和 methods已经可以使用 但是页面还没有渲染出来beforeMount在挂载开始之前被调用 此时页面上还看不

2020-07-05 12:36:36

计算属性和监视器、过滤器的区别

计算属性和监视器的区别计算属性 compued监视器 watch一个数据受多个数据影响一个数据影响多个数据不支持异步支持异步首次会运行首次不会运行有返回值无返回值计算属性和过滤器的区别计算属性 compued过滤器 filters依赖于固定的实列,在某个实列中使用不依赖实列,可以定义全局的过滤器,在多个实列中使用不接受额外参数,依赖于data属性中的变量过滤器不依赖于data属性中的变量,可以接受额外参数,可以是临时变量

2020-07-05 09:23:51

Vue监听器属性watch

监听器属性使用watch来响应数据的变化一般用于异步或者开销较大的操作watch 中的属性 一定是data 中 已经存在的数据当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听 <div id="app"> <div> <span>名:</span> <span>

2020-07-05 08:48:34

Vue计算属性 computed

计算属性 computed模板中放入太多的逻辑会让模板过重且难以维护 使用计算属性可以让模板更加的简洁计算属性是基于它们的响应式依赖进行缓存的computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化 <div id="app"> <!-- 当多次调用 reverseString 的时候 只要里面的 num 值不改变 他会把第一次计算的结果直接返回

2020-07-05 08:35:41

Vue过滤器filter

过滤器Vue.js允许自定义过滤器,可被用于一些常见的文本格式化。过滤器只能用在两个地方:双花括号插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部,由“管道”符号指示支持级联操作过滤器不改变真正的data,而只是改变渲染的结果,并返回过滤后的版本全局注册时是filter,没有s的。直接通过Vue对象调用而局部过滤器是filters,是有s的,与el,data,methods同级1.全局下使用//在全局下使用过滤器 <div id="app">

2020-07-02 08:51:20

Vue循环渲染&key的原理

v-for用于循环的数组里面的值可以是对象,也可以是普通元素 <ul id="example-1"> <!-- 循环结构-遍历数组 item 是我们自己定义的一个名字 代表数组里面的每一项 items对应的是 data中的数组--> <li v-for="item in items"> {{ item.message }} </li> </

2020-07-02 08:36:42

Vue条件渲染

1.v-if使用场景1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素2- 进行两个视图之间的切换 <div id="app"> <!-- 判断是否加载,如果为真,就加载,否则不加载--> <span v-if="flag"> 如果flag为true则显示,false不显示! </span> </div>

2020-07-02 08:20:10

vue常用事件绑定

v-on用来绑定事件的形式如:v-on:click 缩写为 @click;v-on事件函数中传入参数<body> <div id="app"> <div>{{num}}</div> <div> <!-- 1、如果事件直接绑定函数名称,那么默认会传递事件对象作为事件函数的第一个参数 --> <button v-on:click='h

2020-07-01 10:29:33

vue数据绑定指令

指令1.什么是指令本质就是自定义属性(data-xxx)Vue中指定都是以 v- 开头2.v-cloak防止页面加载时出现闪烁问题–vue是先显示插值表达式,然后迅速替换。v-cloak指令的用法1、在style中提供样式 [v-cloak]{ display: none; }2、在插值表达式所在的标签中添加v-cloak指令v-cloak背后的原理:先通过样式隐藏内容,然后在内存中进行值的替换,替换好之后再显示最终的结果 <

2020-06-30 19:52:03

查看更多

勋章 我的勋章
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 勤写标兵Lv4
    勤写标兵Lv4
    授予每个自然周发布9篇以上(包括9篇)原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。
  • 学习力
    学习力
    《原力计划【第二季】》第一期主题勋章 ,第一期活动已经结束啦,小伙伴们可以去参加第二期打卡挑战活动获取更多勋章哦。
  • 原力新人
    原力新人
    在《原力计划【第二季】》打卡挑战活动中,成功参与本活动并发布一篇原创文章的博主,即可获得此勋章。
  • 原力探索 · S
    原力探索 · S
    在《原力计划【第二季】》打卡挑战活动中,发布 12 篇原创文章参与活动的博主,即可获得此勋章。(本次活动结束后统一统计发放)