Y2730415540-CSDN博客

原创 Recat PureComponent

PureComponentPureComponent 提供了一个具有浅比较的 shouldComponentUpdate 方法,其他和 Component 完全一致浅比较：新修改的数据与原本的数据如果一样则不予更新，否则更新1) 字符串正常2) 对象的话，存的是地址，比较的也是地址，按照地址再去找具体的值，所以没更换新地址的话，那么原本去赋值就不太行，需要解构赋值，this.setState({list:[…list]})Component 不管与原数据是否一样都重新全部更新–App.js

2020-12-07 19:58:58 101

原创 react组件生命周期

跨组件通信 context - 扩展React.createContext(defaultValue); { Consumer, Provider } = createContext(defaultValue)Context.Provider 在父组件调用 Provider 传递数据value 要传递的数据接收数据class.contextType = Context;static contextType = Context;this.context;Context.Consumer &lt

2020-12-07 19:49:27 92

原创 React的事件

事件什么是事件React 的事件处理和 DOM 元素类似。但是语法上是不同的:1.React 事件绑定属性时采用驼峰命名法，而不是小写。2. 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)事件的写法HTML中的写法<button onClick="fn()">点我啊</button>JSX中的写法<button onClick={this.fn}>点我啊</button>我们在处理一些简

2020-12-06 20:29:28 99

原创 React

什么是React？React 是一个用于构建用户界面的 JavaScript 库如何使用 React基于浏览器模式（一）引入react.js : react.js提供react的核心功能代码如：虚拟dom 组件React.createElement(type,props,children);type ：类型（也就是标签）props：属性（id、class、style…）chidren: 可以写标签也可以写内容//第一种方法 <script> Re

2020-12-06 20:25:50 81

原创 vue-router 路由组件传参

vue-router文章目录vue-router路由组件传参案例默认处理对象模式的回调函数模式路由组件传参我们通常把路由直接映射（绑定）的组件称为路由组件，也只有路由组件才能直接调用路由有关对象：$router、$route当我们一个组件即希望作为路由组件使用，又可能作为功能组件（某个页面中的一部分）去使用，这个时候路由组件传参的方式来做到这点案例我们对 item.vue 组件进行改造，当我们在 home.vue 的商品列表上移入移出，出现商品信息提示层// Home.vue<te

2020-10-05 08:20:07 305

原创 vue-router 重定向

vue-router文章目录vue-router重定向案例组件路由配置别名404重定向有的时候，我们会根据某种需求对用户请求的页面进行重新定位案例现有一小说网站，提供了男生频道和女生频道的两个入口，用户首次进入页面的时候，会出现选择，并记住用户的选择，以后该用户进入网站直接根据记录的选择进入对应的频道组件// BookChoose.vue<template> <div> <router-link :to="{name: 'book

2020-10-05 08:18:23 1075

原创 vue-router 嵌套路由

vue-router文章目录vue-router嵌套路由添加路由与子路由children 属性子路由视图嵌套路由一些比较复杂的应用会有多层嵌套的路由和组件组成在应用增加一个用户个人中心，用户中心又是由多个页面组成，如：添加路由与子路由...import User from './views/User.vue'import Profile from './views/User/Profile'import Cart from './views/User/Cart.vue'......

2020-10-05 08:17:19 396

原创 vue-router 路由守卫

vue-router文章目录vue-router路由守卫组件内守卫beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave路由守卫参数tofromnext路由独享的守卫全局守卫beforeEachbeforeResolveafterEach路由守卫当导航发生改变的时候，vue-router 会在多个不同的地方调用指定的函数，也就是与路由有关的生命周期函数，也称为：路由守卫组件内守卫路由独享守卫全局守卫组件内守卫定义在组件内的与路由有关的生命周期函

2020-10-05 08:13:40 142

原创 vue-router queryString

lo# vue-router文章目录queryString$route.query编程式导航路由组件的复用watchqueryString有的时候，我们可能也会用到 queryString<select v-model="sort"> <option value="desc">从高到低</option> <option value="asc">从低到高</option></select>$route.query我

2020-10-05 08:12:42 390

原创 vue-router 动态路由

vue-router文章目录vue-router动态路由路由对象$router 对象$route 对象$route.params动态路由有的时候，我们需要把满足某种规则的路由全部匹配到同一个组件，比如不同的商品的 url/item/1/item/2/item/3...我们不可能为每一个商品都定义一个独立的组件，而是把它们都映射到同一个组件，同时 url 后面的部分为动态变化的部分，我们会在设计路由的时候进行特殊的处理...{ path: '/item/:itemId', nam

2020-10-05 08:11:55 225

原创 vue-router 异步请求

vue-router文章目录vue-router异步请求axios请求跨域vue.config.js跨域请求代理配置异步请求在实际的应用开发中，与后端交互，进行异步请求是很常见的需求axiosnpm i axios请求// home.vue<template> <div class="home"> Home </div></template><script>import axios from 'axios'

2020-10-05 08:10:49 576

原创 Vue路由切换

1. 相关API说明VueRouter(): 用于创建路由器的构建函数new VueRouter({ // 多个配置项})路由配置routes: [ { // 一般路由 path: '/about', component: about }, { // 自动跳转路由 path: '/', redirect: '/about' }]组件:1. router-link: 用来生成路由链接<router-link to="/xxx"&

2020-09-24 20:32:20 165

原创 Vue 知识

一、v-if 根据表达式的值（布尔值），创建或销毁元素适用于状态切换不频繁的情况v-else 与 v-if 配合**v-if 与 v-else 之间中间不能隔一个标签datadata：数据可以在当前模板中直接使 data中的数据命名不能使用例如（$ _ . ）开头数据劫持：（1）数据驱动视图 1. 监听指定的数据 2. 指定的数据发生改变（set）/ 被获取时触发指定的方法（get） 3. 将新的数据渲染到页面上去过滤器全局过滤器： v

2020-09-21 19:18:11 73

原创 VUE 知识点总结

一 vue 特色 https://cn.vuejs.org/v2/guide/ mvvm（前端） m:model（数据） v:view（视图） vm:viewmodel 数据和视图的桥梁 m---->mv----->v m<----mv<-----v双向数据绑定 angular mvc（后端） m:model（数据） v:view（视图） c:controller(控制器) v--->c--->m m--->v优点

2020-09-21 19:10:35 2405

Y2730415540的博客