- 博客(56)
- 收藏
- 关注
RSS订阅原创 用一个swiper例子来写一下生命周期
思维：引入swiper$ yarn add swiper在对应的组件中引入引入css样式引入html结构实例化import React, { Component,Fragment } from 'react';import Swiper from 'swiper'import 'swiper/dist/css/swiper.css'import './index.css'...
2019-05-15 08:51:05
339
原创 react生命周期
生命周期初始化阶段constructor在组件挂载之前执行，调用super(props),用来将父组件传来的props绑定到这个类中，使用this.props将会得到。定义状态状态初始化也可以有父组件传递过来的属性来进行赋值static getDerivedStateFromProps ( nextProps,prevState ) {}在组件实例化后，和接受新的props...
2019-05-15 08:50:21
145
原创 react--事件
原生js — 事件事件概念构成谁触发: DOM事件触发的形式： on addEventListener事件类型: click keyup keydown事件处理程序事件对象事件传参var box = doucment.querySelector( 'div' )box.onclick = function(){//事件处理程序}React – 事件写法一共四种，...
2019-05-15 08:48:36
123
原创 组件数据挂载方式
组件数据挂载方式react中将数据细分为两个类型props 属性 举例： 一出生就具备特性state 状态 举例： 可以改变的特性、属性props外部传入父组件通过 属性的形式 将 数据可以绑定在子组件身上 ， 子组件通过 this.props 获得外部传入的props只能通过外部修改 （ 单项数据流 ）内部设置内部通过 className.defaultPro...
2019-05-15 08:47:46
284
原创 react基础
webpackwebpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle其它相似打包工具还有rollup.js 、 parcel、FIS等按照webpack的指南(...
2019-05-15 08:46:53
128
原创 服务端渲染
什么是服务端渲染概念：后端先调用数据库，获得数据之后，将数据和页面元素进行拼装，组合成完成的html页面，再直接返回给浏览器，以便用户浏览举例： 服务端渲染案例页面 什么是客户端渲染概念：数据由浏览器通过ajax动态取得，在通过js将数据填充到dom元素上最终展示到网页中，这样的过程叫做客户端渲染举例：客户端渲染案例页面服务端渲染 vs 客户端渲染服务器端渲染需要消耗更多的...
2019-05-15 08:44:09
298
原创 vuex
vuex1. 什么是状态？用一条数据去管理一个视图或是视图中的一部分，那么我们就将这个数据称之为状态2. 什么是状态管理？用一条数据去管理一个视图或是视图中的一部分，那么我们就将这个数据称之为状态，这种管理的形式我们称之为 状态管理3. vuex是做什么的？（概念）vuex是一个集中式的存储仓库【状态】，类似于 本地存储、数据库，vuex是vue的状态管理工具，它的功能主要是...
2019-05-15 08:42:57
100
原创 vue的非响应式情况
vue的非响应式情况数组的下标<div id="app"> <button @click = "change"> 点击 </button> <ul> <li v-for = ' (item,index) in list ' :key = 'index'> <p&g...
2019-05-15 08:42:04
1161
原创 路由的使用
路由的使用命名路由给路由起个名字，这样可以方便我们在使用路由的时候， 简写路径命名视图给出了一级视图以外的其他视图起名字， 这样可以区分不同级别的路由使用不同级别的视图动态路由 & 路由传参 & 路由接参vue cli3 配置反向代理在根目录下面新建一个 vue.config.js// vue.config.js中可以默认直接使用 http-proxy-...
2019-05-15 08:41:26
114
原创 Router
Router基础vue 路由的mode(模式)有几种， 分别是什么？在那些环境下运行？hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。history: 依赖 HTML5 History API 和服务器配置。【需要后端支持】abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务...
2019-05-15 08:39:15
224
原创 封装自定义插件库
封装自定义插件库定义一个组件就是一个单文件组件 Loading.vue注册组件import Loading from './components/Loading.vue'export const loading = {install () {Vue.component( 'Loading', Loading)}}使用组件import Loading from...
2019-04-27 09:45:39
315
原创 cli
clicli 别名： 脚手架npm < cnpm < yarn1. 作用：- 快速构建vue项目， 底层配置使用的就是webpack2. 版本cli2 cli33. 安装npm install @vue/cli -g cli3的版本npm install vue-cli -g cli2的版本yarn add @vue/cli global /报错：有的电...
2019-04-27 09:43:06
299
原创 webpack2
一、webpack 基础认识官网地址 官网: https://webpack.js.org/ 中文: https://www.webpackjs.com/ 前身: browserify &n...
2019-04-27 09:42:24
176
原创 webpack
webpack前端的工程化工具grunt资源打包单元测试gulp流式操作工具资源打包browserify(webpack前身)webpack 【 主流 】资源打包工具， 比如 js文件打包压缩 ， img 打包压缩 。。。可以自动解决模块化依赖问题es6模块化前端的环境开发环境 localhost:3000生产环境测试环境预发布环境...
2019-04-27 09:41:07
90
原创 异步组件
异步组件异步组件也是一个函数， 只不过这个函数使用Promise,函数有一个返回值<body> <div id="app"> <async-com></async-com> </div></body><script>var result = new Promise...
2019-04-27 09:40:16
194
原创 动态组件 is属性 keep-alive组件
动态组件动态组件就是 component组件 ， 组件身上可以绑定一个is属性， 用来表示某一个组件is属性我们html中有一些标签是规定它的直接子元素的 ， 比如 ul li ol li selector option table这类型标签不能直接用常规的组件使用方式， 必须在对应直接子元素上绑定 is属性<div id="app"><table&g...
2019-04-27 09:39:43
335
原创 slot 插槽
<body> <div id="app"> <Hello> <div> 这是组件内直接写的 </div> </Hello> </div> <template id="hello"> &...
2019-04-25 14:12:48
92
原创 过渡 & 动画
过渡 & 动画过渡指的是 用 css3 的transition来实现动画效果动画指的是用 js来实现动画效果Vue中一共给了四种解决方案， 但是我们常用的只有一种在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库，如 Animate.css 【推荐】在过渡钩子函数中使用 JavaScript 直接操作 DOM可以配合使用第三方 JavaScr...
2019-04-25 14:11:42
186
原创 渲染函数 和 jsx
渲染函数 和 jsx渲染函数 render函数 — 》 createElmentjsx( javascript + xml )xml 就是一种标签化的数据格式jsx语法浏览器无法解析， 必须靠babel来解析jsx语法出现的原因是为了解决,render函数频繁使用createElement来创建节点<body> <div id="app"&g...
2019-04-25 14:10:54
296
原创 自定义指令
自定义指令全局自定义指令局部自定义指令指令的钩子函数（一共有5个）bind : 指令和元素第一次绑定的时候调用inserted ： 指令绑定的元素插入父节点的时候调用update ： 指令绑定的元素自身， 或是他的内容（子节点）发生改变的时候出发componentUpdated ： 指令绑定的组件自身， 或是他的内容（子节点）发生改变的时候出发unbind ： 指令和元素第一...
2019-04-25 14:10:19
134
原创 过滤器
过滤器vue 1.x版本一共提供了10个过滤器， 但是不满足人们使用，vue2.x全部不提供了， 交给开发者自己写但是vue提供了定义过滤器的方式过滤器： 对数据进行格式化的一个函数过滤器可以用在两个地方：双花括号插值和 v-bind 表达式过滤器用给一个 ’ | ’ 表示， 我们称之为 ‘管道符’过滤器-局部<body> <div id="app...
2019-04-25 14:09:28
317
原创 props属性验证
props属性验证常用形式： props: { key: keyType // key是从父组件获得的自定义属性， 值是我们期望得到的数据类型 }业务：我现在想要 > 1000 我才要， 没有 > 1000 我就不要解决： vue提供了一个 ：validator props: { ...
2019-04-25 14:08:41
148
原创 组件生命周期
组件生命周期钩子函数，就是options里面的key, 它的值是函数钩子函数写在其他配置项的后面1. 组件的有哪几个阶段？初始化阶段运行中阶段销毁阶段2. 初始化阶段分为两个大阶段， 每一个大阶段包含两个生命周期钩子函数 ---- 生命周期 --》人的一声 钩子函数 --》 （人在某个阶段做得一些事情， 这些事情是自动触发）有那四个钩子函数呢？每个钩子函数有什么功能嗯？项目...
2019-04-25 14:07:54
175
原创 组件通信
1. 父子组件通信绑定的是简单类型数据父组件中定义数据， 通过单向数据绑定的形式， 将数据绑定在子组件身上， 属性是自定义属性，子组件通过配置项中的props接收数据， props可以是一个数组，数组中放的是自定义属性名称那么这个自定义属性可以向data中的数据一样直接在子组件模板中使用父组件中数据一旦修改， 子组件数据就会修改， 那么这也就是单项数据流<body>...
2019-04-22 19:56:39
97
原创 组件
组件组件化思维组件化针对的是页面中的整个完整的功能模块划分 （项目的分工）组件的概念（ 一个文件 ）组件是一个html、css、js、image等外链资源，这些部分组成的一个聚合体优点：代码复用，便于维护划分组件的原则：复用率高的，独立性强的组件命名建议使用两种方式使用 kebab-case举例Vue.component(‘header-title’,{})使用 Pasc...
2019-04-22 19:54:40
123
原创 虚拟DOM( VDOM ) 和 diff算法
虚拟DOM( VDOM ) 和 diff算法总结：虚拟DOM 是什么？虚拟DOM是利用 了js的对象的Object的对象模型来模拟真实DOM, 那么它的结构是一个树形结构diff算法diff算法是用来比较两个或是多个文件， 返回值是文件的不同点diff算法是同级比较的diff思维也是来自后端diff算法的比较思维比较后会出现四种情况：1、此节点是否被移除 -> 添加新的...
2019-04-20 11:26:24
231
原创 列表渲染中的key的作用
列表渲染中的key的作用给VDOM添加标记如果没有key会产生的问题：VDOM是惰性的， 它有一个原则， 这个原则叫做’就地复用’ , 它认为我的第一个就是红色的， 删除了第二个之后， 第二个就变成了第一个， 它印象中第一个是红的， 所以就我们认为的第二个变成红的了解决： 使用key属性使用：<li v-for = " (item,index) in list " :key ...
2019-04-20 11:25:47
997
原创 mixins
概念：mixins； 混合 ,将 根实例或是组件中的配置项 抽离出来， 单独管理类型A：局部混入var mixin = {methods: {sum(){alert( 10*10 )}},}new Vue({el: '#app',data: {},watch: {},mixins: [mixin],computed: {}})注意：即使分离出去， 我们...
2019-04-20 11:25:10
306
原创 axios 和 fetch
axios fetch 数据请求vue 1.x 时我们使用的 vue-resourcevue 2.x之后使用axios 封装的第三方库fetch 原生相同点：都是 Promise前端原生提供了两种数据请求方式ajaxfetch切记：axios fetch post方法都是有坑的 ， 一定要注意解决方法：设置请求头通过 new URLSearchParams() 来进行...
2019-04-20 11:24:37
193
1
原创 fetch
fetch请求例子<!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...
2019-04-20 11:24:08
181
原创 Axios
Axios总结 1.get方法 A: 无参数 axios.get(url).then(res=>console.log(res).catch(error=>conosle.log(error)) B: 有参数...
2019-04-20 11:23:32
184
原创 watch 和 computed
watch 和 computed/*业务：当我写好姓和名 ， 全称自动显示目的： 对比 watch vs computed vs methodsmethods: 事件computed:有逻辑 2. 要像变量一样使用 ， 这个时候选computedwatch:有异步操作 2. 开销较大*/案例<!DOCTYPE html><html lang="en"...
2019-04-20 11:22:56
195
原创 watch
watch作用：用来监听数据的变换， 当数据模型 （data选项 M）发生改变时， watch就会触发使用两种用法：key的value值是一个函数new Vue({watch: {key(value,oldvalue){}}})第一种用法的例子：<!DOCTYPE html><html lang="en"><head>&...
2019-04-20 11:22:27
487
原创 v-mode 双向数据绑定
v-mode 双向数据绑定效果数据改 ， 视图更视图改， 数据更实现使用v-model实现缺点v-model默认绑定value属性， 所以v-model只能在表单使用原理为什么数据能直接在视图显示v-model默认绑定了DOM对象的value属性， 当它初次绑定的时候，就会触发getter,watcher就会触发， watcher通知Vue生成新的VDOM树，再通过ren...
2019-04-20 11:21:33
1711
原创 vue-深入响应式原理
深入响应式原理：当视图模型（VM）中的数据模型（M）发生改变时， 视图（V）就会进行更新Vue通过watcher将data中的属性全部使用Object.definePropery编程getter和setter,当属性值发生改变的时候， 就会触发， 然后watcher就会触发， 告诉视图（V）进行重新渲染数据必须放在data选项中才能进行深入响应式底层原理：核心使用的是es5...
2019-04-20 11:20:51
309
原创 vue--Todolist（小项目）
todolistui库sui使用：引入第三方库： cdn业务：开关的切换点击编辑， 出现一个弹框， 当我们键盘回车的是将， 将input框中的内容展示在页面上当任务已完成时， 点击 删除 按钮 直接删除 ， 当任务未完成时， 应该先出用户友好提示， 如果点击了确定， 在删除， 如果不点确定， 不能删除底部按钮拥有不同的类名底部按钮点谁 ， 谁激活 — 》 加一个button...
2019-04-18 22:21:46
322
原创 vue--计算属性
计算属性为什么要有计算属性？直接模板语法中直接写逻辑 // 1.html结构不纯粹 2. 写起来不舒服方法运行 // 但是语义性不高计算属性是什么？计算属性是new Vue(options) options中的一个配置项， 用computed表示， 它的值是一个对象计算属性的值中存放的是方法computed vs methods同： 都是函数， 都可以书写逻辑...
2019-04-18 22:20:48
108
原创 vue--绑定样式
style为什么要绑定样式呢？A: 样式有几种使用形式style双标签嵌入样式(内联)行内样式外部引用@import(’./csss/…’)数据 --控制–样式—》 功能 效果样式 要和 数据 绑定–》 v-bind样式的绑定形式A: 对象<div :style = "{width:'50px'}"></div><div :st...
2019-04-18 22:20:13
95
原创 vue--绑定类名
class为什么要绑定类名？数据–驱动–》视图 数据–控制–》类名 -->样式类名 要和 数据 绑定 —使用 —》 v-bind类名的绑定方式A: 对象的形式<div :class = "{'size': classFlag,'bg': classFlag}"></div>注意： 对象中的key用字符表示B: 数组的形式<...
2019-04-18 22:19:40
834
原创 vue--单向和双向数据绑定
单项 和 双向数据绑定单项数据绑定：概念；将数据和属性进行绑定， 也就是原生身上的属性的值就是数据格式v-bind:attr = data简写：:attr = data数据更改 ， 视图就更新<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><me...
2019-04-17 22:05:27
139
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人