2020年07月_咩有猫腻.

原创 react----脚手架搭建项目 + 进度条插件使用（nprogress）

脚手架搭建项目npx create-react-app movie-app # 使用react脚手架搭建项目npm start # 启动项目,先进入文件夹组件中react中function和class两种快速创建的快捷键， function是页面中输入： rfce 回车 class是页面中输入： rcc 回车组件的后缀名既可以是js也可以是jsx因为用到了axios，所以先安装在引入 npm i axios import axios from 'axios' App

2020-07-31 20:53:11 1402

原创全屏切换---demo

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <tit.

2020-07-31 10:12:54 164

原创 react----全选、反选--demo

<title>全选/反选</title> </head> <body> <div id="app"></div> <script src="./libs/babel.min.js"></script> <script src="./libs/react.js"></script> <script src="./libs/react-d...

2020-07-30 21:47:03 933

原创 react---context上下文（跨组件之间传参）

context在react—function中的用法重点代码： const mainContext = React.createContext(); const { Provider } = mainContext; const c = React.useContext(mainContext); // 写在组件内部 <title>context-2</title> </head> <body>

2020-07-30 19:40:44 747

原创 react-----待办事项demo（map循环套循环-点击完成）

<title>待办事项</title> </head> <body> <div id="app"></div> <script src="./libs/babel.min.js"></script> <script src="./libs/react.js"></script> <script src="./libs/react-dom.js.

2020-07-30 18:34:41 231

原创 react--获取react中组件的dom元素内容-ref操作--this.refs+ref（分别为 function 和class中的ref使用）

从两者的使用情况来看，function明显比class使用起来更方便简单react—class中this.refs + ref的使用 <title>ref操作</title> </head> <body> <div id="app"></div> <script src="./libs/babel.min.js"></script> <script src="./li

2020-07-30 16:22:44 1373

原创 react---获取react中组件的dom元素内容-----(自定义属性 data-xxx +e.target.dataset.xxx )

this.refs + ref的使用 <title>ref操作</title> </head> <body> <div id="app"></div> <script src="./libs/babel.min.js"></script> <script src="./libs/react.js"></script> <script src

2020-07-30 15:45:38 1503

原创 react---组件生命周期（componentDidMount、shouldComponentUpdate等）---点击按钮小球隐藏显示--demo

React组件生命周期初始化阶段挂载阶段更新阶段当状态或者属性发生改变之后会触发更新阶段的钩子函数在更新阶段不能修改状态数据卸载阶段 <title>生命周期</title> <style> .ball { width: 100px; height: 100px; border-radius: 50%; background-color: ora

2020-07-30 13:06:53 3873

原创 react----useEffect副作用(加载更多按钮、购物车全选单选就会用到这个）

hooksuseState 可以定义一个局部状态数据useEffect 副作用,当一个数据或者属性发生改变之后会引起的一些变化

2020-07-30 11:08:04 658

原创 react---子组件向父组件传参

<title>子组件向父组件传参</title> </head> <body> <div id="app"></div> <script src="./libs/babel.min.js"></script> <script src="./libs/react.js"></script> <script src="./libs/react-d.

2020-07-29 21:26:44 208

原创 react---父组件向子组件传参---fetch调接口父传子--demo

<title>Document</title>   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" /> </head.

2020-07-29 20:26:31 180

原创 react--动态传递数据到子组件（点击颜色按钮让小球变色--demo）

<title>父组件动态向子组件传参</title> <style> .ball { width: 200px; height: 200px; border-radius: 50%; display: block; margin: 1rem auto; /* background-color: deeppink; */ transi...

2020-07-29 19:07:30 461

原创 react----掉接口取数据

如果不想用this.state.list 想要直接用list的时候，就需要解构一进页面，render（）会先执行两次，一次是初始化的时候，一次是加载成功的时候 <title>获取数据</title> </head> <body> <div id="app"></div> <script src="./libs/babel.min.js"></script> <sc.

2020-07-29 18:20:01 467

原创 react-class定义的组件和状态+class中使用setState

<title>组件定义-class定义的组件</title> </head> <body> <div id="app"></div> <script src="./libs/babel.min.js"></script> <script src="./libs/react.js"></script> <script src="./li...

2020-07-29 17:02:51 1345

原创 react--function定义组件和状态

<title>react组件定义</title> </head> <body> <div id="app"></div> <script src="./libs/babel.min.js"></script> <script src="./libs/react.js"></script> <script src="./libs/rea...

2020-07-29 11:53:23 2479

原创 react--jsx语法中的循环展示（className，js{}的用法、fetch调用接口循环）

<title>第一个循环数据</title> <style> .person { background-color: #999; } </style> </head> <body> <div id="app"></div> <script src="./libs/react.js"></script>

2020-07-28 19:07:15 980

原创 react---入门页面结构搭建2--react的两种使用基础方法（function+class）、（json和js之间的相互转换）

json和js之间的相互转换如果是在框架里用import引入，也可以，但是如果在页面中写个js，也是非常简单的方式将json文件修改为js 文件后，在页面中用script引入，然后就可以直接使用使用起来相对非常简便基础使用方法先引入三个js文件，上一张有写怎么使用引入连接的步骤<title>第一个react组件</title> </head> <body> <div id="app"></div> &

2020-07-28 17:26:14 350

原创 react---入门页面结构搭建1---三个连接的引入（react、react-dom、babel)--jsx语法

在bootcdn.cn中引入三个网络文件，在是由于在bootcdn.cn中搜索到的babel文件加载很慢还容易使用不了，同时又试了babel网站文件链接的引入也很慢无法正常执行，就将其文件下载了下来，放入文件目录下来引入使用此处代码不是最终使用的方法，仅仅此时展示过程,连接最终用法在文章最后面<body>  <div id="app"></div> <script sr

2020-07-28 16:55:23 986

原创 vue项目使用hbuilder进行云打包

1.将写好的目录，比如头像项目，将自己新创建的vue.config.js文件内填写内容module.exports={ publicPath:'./' // 表示我们打包生成之后，我们资源目录的生成路径}2.如果不写的话，你直接 npm run build 之后，打开dist文件双击index.html将会得到下图所示效果3.vue.config.js文件内容填写完之后，再次npm run build4.还有一点就是你的路由一定要是哈西路由，不能是浏览器历史记录路由，因为我

2020-07-28 13:08:23 906

原创 vue + ElementUI（饿了么UI） ---增删改查（用localStorage存储数据+过滤搜索）--demo

新增和修改写到了一个文件上该目录会上传到gitee上.eslintrc.js最后一行是自己添加的，其余内容是脚手架自动生成的module.exports = { root: true, env: { node: true }, extends: ['plugin:vue/essential', '@vue/standard'], parserOptions: { parser: 'babel-eslint' }, rules: { 'no-co.

2020-07-25 15:03:10 1072 2

原创抓包+存储数据库

新建文件然后打开其终端输入命令npm init -ynpm i cheerio axiosnpm i mongoosenpm i express如果有上传文件需npm i multer然后在该文件下直接开始创建一个文件写文件即可例如：photo-shop.jsconst axios = require("axios").default;const mongoose = require("mongoose");const productSchema = new mongoose.Sch

2020-07-22 19:03:40 799

原创状态码问题及解决方法（403）

1.解决网络图片加载出现403错误在<head></head>里面加一个<meta name="referrer" content="no-referrer"/>

2020-07-21 19:05:46 2709

原创 vue--父组件使用子组件里的方法和属性--$refs-ref、$el、$root三种属性+console.group

将组件的标签添加一个ref=“xxx” ，然后父组件使用子组件直接this.refs.xxx.xxx<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>vue中的ref&.

2020-07-18 21:13:23 359

原创 vue--注册登录、请求封装（axios，基地址，本地存储的封装）（vue脚手架的目录详解）---demo

随便写几个文件,详细的去7.14号的文件里文件看有底部导航切换，有登录，注册，config.js、auth.js、request.js文件App.vue<template> <div id="app" class="container"> <div class="header">小乖-shopping</div> <router-view class="content"></router-view>

2020-07-18 20:53:01 418

转载 FormData使用方法详解

FormData的主要用途有两个：1、将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。2、异步上传文件一、创建formData对象1、创建一个空对象：//通过FormData构造函数创建一个空对象var formdata=new FormData();//可以通过append()方法来追加数据formdata.append("name","laotie");//通过get方法对值进行读取console.log(formdata

2020-07-18 15:34:12 226

原创 Promise与async、await

在之前我们使用各种回调的时候，嵌套一层一层又一层的，不知道的以为是千层饼，你以为你写的代码在第二层，其实是在第五层的情况也数不胜数了。后来，针对回调的问题有了我们的Promise，它的出现让我们的代码变的更加的优雅且更容易维护。异步执行，无论对于我们日常生活还是代码工作都是必不可免的。而且对于Javascript中作为单线程的处理方式，必然的需要异步操作来提升自身。Promiseconst promise =function(value) { return new Promise(funct

2020-07-16 16:30:50 150 2

原创 vuex--vuex安装使用state和mutations、vuex中的action、组件之间使用vuex传递数据、store文件拆分----获取加载数据demo

vuexvuex是vue中的状态管理插件，可以实现全局统一的状态管理。在一个项目中只有一棵状态树，所有的数据都存储在上面单向数据流数据是单向流动的，view视图通过dispatch派发一个action(行为)，改变state(数据)，数据改变之后视图重新渲染如何使用vuexnpm i vuex # 安装插件import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)...

2020-07-15 13:39:46 518

原创 vue-路由钩子函数create、路由登录判断demo、商城页面布局demo---（图片的插入使用、地址栏logo的修改）

新建一个文件" .prettierrc " 目的是防止js文件出现双引号和分号，它会使文件变成单引号并去掉分号{ "singleQuote":true, "semi":false,}在.eslintrc.js文件中的rules里加入一条规则，目的是让函数（）前不空格，防止报错"space-before-function-paren":"off" 这个单引号双引号都可以 "off"还可以替换成0main.js文件不变App.vue<template> <d..

2020-07-14 21:20:04 266

原创 vue---路由嵌套3（1 2 3的综合）--demo（首页、列表页、用户中心）

main.jsimport Vue from 'vue'import VueRouter from 'vue-router'import App from './App.vue'import Home from './pages/Home'Vue.config.productionTip = falseVue.use(VueRouter) // 使用路由// 定义一个路由实例const router = new VueRouter({ routes: [ { ..

2020-07-14 17:15:45 360 2

原创 vue-路由传参和编程式跳转3--（params传参和query传参的区别、编程式跳转this.$router.push）

params传参和query传参是路由传参的两种常见形式。区别在于query传参，参数在url中可见，是标准的url传参形式。使用?分割参数和url地址params传参，参数在url默认是不可见的。除非设置了占位符query传参不怕刷新，刷新之后参数还在params传参除非设置了占位符，否则参数不能再刷新之后保存编程式跳转使用this.$router.push(路由对象)实现跳转List.vue<template> <div class="home">

2020-07-14 11:24:15 173

原创 vue--路由安装使用2---（$route和$router）

先安装命令 npm i vue-router然后在main.js文件中进行添加

2020-07-13 21:39:22 355

原创 vue----项目目录介绍1

终端输入命令行创建一个vue项目：vue create 目录名生成的目录orange-shop-app及其文件vue项目发布npm run build # 把vue项目进行打包发布，生成可以在web服务器中进行访问的网页# 我们写的.vue文件是源代码，是不能被浏览器解析的# 我们在开发的时候使用了cli脚手架生成项目,当执行npm run server的时候# cli搭建的项目会自动启动内置的开发服务器,是临时的一个服务器# 会把把我们写的vue文件进行编译运行# .vue文件

2020-07-13 15:58:12 206

原创 vue-cli脚手架生成目录-----大致讲解使用

packageindex.htmlmainApp.vue截图的li可替换成下面这个代码，这样点击title时，可进入对应的视频链接 <ul> <li v-for="item in list" :key="item._id"> <a :href="item.link">{{item.title}}</a> </li> </ul>list.vue 这个是自己创建的..

2020-07-11 16:12:53 320

原创 vue-cli脚手架的安装

vue-cli脚手架# 使用官网的说明，进行安装就好步骤：npm i @vue/cli -g # 全局安装vue脚手架 vue -V # 查看vue脚手架的版本号vue create xxx # 创建一个vue项目# 创建项目是，第一步选择第二项 Manually。。。表示自定义的模式# 第二步只选择第一个Babel，因为其他的暂时用不到.使用空格加方向键进行选择# 第三步选择第一项，意思是把所有插件的配置文件放置在单独的文件中# 第四步输入n，意思是以后

2020-07-11 15:09:02 157

原创 vue---slot插槽的使用

<title>slot插槽</title> </head> <body>  <div id="app"> <h1>这是一个如何使用插槽的文档</h1> <movie> <template v-slot:before> <p>这是故事的开始</p> ..

2020-07-10 21:26:15 322

原创 vue---移动端-获取爱奇艺movies数据展示列表demo

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>练习内容</title> <link href="https://cdn.bootc

2020-07-10 18:57:43 401

原创 vue----动态组件（将component放在app容器内）

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>component</title> </head> <body> &.

2020-07-10 13:05:26 735

原创 vue---组件生命周期钩子函数（共11个，此处举例八个）

vue生命周期图示详情链接组件生命周期钩子函数有十一个，暂时学了八个，其中有六个是执行一次的，有两个是循环执行的如果在更新阶段，改变了data，会触发什么样的结果：内存溢出，死循环<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-

2020-07-10 12:55:05 739

原创 vue---component2---组件传参3 之非相关组件之间传参/跨组件传参--eventBus事件总线（父组件向子组件传、子组件向父组件传、非相关组件之间传参）

sadfh

2020-07-09 22:35:58 257

原创 vue---component2---组件传参2 之子传父-事件派发emit和自定义事件（父组件向子组件传、子组件向父组件传、非相关组件之间传参）

一、自定义事件<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>自定义事件</title> </head> <body>

2020-07-09 22:32:26 455

空空如也

空空如也