2020年07月_fiona_0427

原创 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 488

原创 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 513

原创 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 221

原创 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 195

原创 Vuex

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

2020-07-14 18:16:38 93

原创 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 358

原创 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 118

原创 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 247

原创 Vue组件插槽

组件插槽组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力匿名插槽 <div id="app">  <alert-box>有bug发生</alert-box> <alert-box>有一个警告</alert-box> <aler

2020-07-05 21:39:20 215

原创 Vue基础组件入门

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

2020-07-05 21:21:28 125

原创 Vue自定义指令

自定义指令内置指令不能满足我们特殊的需求Vue允许我们自定义指令Vue.directive 注册全局指令<input type="text" v-focus><script>// 注意点： // 1、在自定义指令中如果以驼峰命名的方式定义如 Vue.directive('focusA',function

2020-07-05 21:15:07 88

原创 Vue生命周期函数

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

2020-07-05 12:36:36 746

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

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

2020-07-05 09:23:51 210

原创 Vue监听器属性watch

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

2020-07-05 08:48:34 716

原创 Vue计算属性 computed

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

2020-07-05 08:35:41 1073

原创 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 184

原创 Vue循环渲染&key的原理

v-for用于循环的数组里面的值可以是对象，也可以是普通元素 <ul id="example-1">  <li v-for="item in items"> {{ item.message }} </li> </

2020-07-02 08:36:42 506

原创 Vue条件渲染

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

2020-07-02 08:20:10 95

原创 vue常用事件绑定

v-on用来绑定事件的形式如：v-on:click 缩写为 @click;v-on事件函数中传入参数<body> <div id="app"> <div>{{num}}</div> <div>  <button v-on:click='h

2020-07-01 10:29:33 1028

fiona_0427的博客