公子清-CSDN博客

原创 VUE系列：源码分析-逻辑层

Vue 源码分析-逻辑层预期的效果：监听input的输入，input在输入的时候，会触发 watch与computed函数，并且会更新原始的input的数值。所以直接跟input相关的处理就有3处，但实际上会有连带性的触发，触发watch的input函数的时候，还会触发this.answer对应的依赖处理看看内部是如何处理的：Vue在初始化data的时候，会通过Object.defi...

2019-12-17 12:57:38 264 1

原创 localhost:3000 拒绝访问解决办法

解决如下：启动react，localhost:3000拒绝访问

2022-07-07 11:17:43 8339 3

原创 Vue-条件渲染-层级化解析

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

2022-05-24 10:45:49 192

原创 Vue-强制绑定class与style-层级化解析

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

2022-05-24 10:41:20 340

原创 Vue-计算属性监视-层级化解析

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

2022-05-24 10:35:56 179

原创 Vue-MVVM模式-层级化解析

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

2022-05-23 09:52:55 183

事件是javascript和HTML交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互;比如鼠标点击事件、敲击键盘事件等。这样的事件行为都是前端DOM事件的组成部分，不同的DOM事件会有不同的触发条件和触发效果。本文就将带大家深入浅出地了解DOM事件的那些属性和方法。1.DOM级别与DOM事件：DOM级别一共可以分为四个级别：DOM0级、DOM1级、DOM2级和DOM3级。而DOM事件分为3个级别：DOM0级事件处理，DOM2级事件处理和DOM3级事件处理。有人可能会疑惑，为

2022-03-29 12:50:23 4714

原创前端基础（二）

JS中的数据类型基础数据类型数字 number字符串 string布尔 boolean空对象指针 null未定义 undefinedes6新增的唯一值类型 symbol引用数据类型对象数据类型 object普通对象 {}数组对象 []正则对象 /^$/日期对象 new Date数学函数对象 Math函数数据类型 function实践：1.基本类型 //number数字类型 let n = 10; n = 10.5; n =

2021-03-05 12:18:11 182 1

原创前端基础（一）

认知前端前端不分离原理：前端发送请求，页面看到的效果都是由后端控制后端通过渲染html页面或重定向后端控制前端的展示，前端与后端的耦合度很高。前端分离客户端原理：1.前端基于ajax发送数据请求到服务器端，服务器端只把数据返回 [{ titke:xxx}…]（后端仅返回前端所需的数据）2.前端拿到数据后，基于JS把数据动态绑定在页面上3.前端决定展示的效果，前端与后端的耦合度很低。好处：1.助于团队协作开发，前端不需要关注后台技术，只需要基于ajax获取到数据即可2. 分

2021-03-03 15:27:34 127

原创 vue-cli3.0你需要知道的基础

vue-cli3.0基础认知vue cli脚手架帮助我们把webpack等相关配置处理好，我们只需要基于脚手架快速构建一个项目即可（项目中一定包含webpack的相关配置）vue中的脚手架vue-clihttps://cli.vuejs.org/zh/guide/1.安装脚手架（一般安装在全局）$ npm install @vue/cli -g$ yarn global add @vue/cli安装成功后，全局环境下会生成一个$ vue的可执行命令，基于$ vue --version 查看版

2020-10-22 16:47:12 145

原创 vue-cli相关配置项

vue-cli脚手架相关配置项vue-cli 相关配置项官网：https://cli.vuejs.org/zh/config/#css-requiremoduleextensionmodule.exports = { //process.env.NOOE_ENV: 环境变量中存储的是开发环境还是生产环境,./是开发本地环境，http://www.baidu.com/是生产环境，也就是正式项目中的线上环境 publicPath:process.env.NOOD_ENV === 'prod

2020-10-22 16:44:44 204

原创安装vue-cli3.0版本指南

安装vue-cli3.0版本操作指南日常使用vue-cli3.0以下版本，随着前端不断更新vue-cli3.0以上版本，那么安装新版本会遇到很多问题，并不是所有人都会一番风顺，应粉丝要求，出3.0以上版本操作指南请先看下鄙人的vue-cli3.0以下版本操作详情，百试不错的详情操作，实践中尝试了很多次错误，才总结出来的真经方法：安装vue错误详情解决办法:https://blog.csdn.net/Josiah_Yuan/article/details/103605963那么vue-cli3.0

2020-10-19 13:13:35 3468 1

原创安装webpack 报错解决方法

安装webpack如果保存，就操作以下：1.npm install webpack -g2.npm install webpack-cli -g3.webpack -v如还没成功就看看正确的安装1.13.2第一步：如果有安装报错，最好先卸载而且最好全局和文件夹内都卸载一遍npm uninstall webpack -g (全局卸载)确定npm正常及安装了淘宝镜像第二步：全局安装 cnpm install -g webpack@1.13.2(可以加版本号)

2020-10-14 20:57:10 1828

原创 vue中模拟v-model的实现原理

vue中模拟v-model的实现原理v-model的渲染（视图更新控制数据的更改）：1.把数据中的信息拿到复制给视图上2.监听视图的更新，更新后重新修改数据3.数据更改后，重新控制视图重新渲染<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in

2020-10-14 16:52:36 563

原创 vue中v-model的实现原理

vue中v-model的实现原理v-model的渲染（视图更新控制数据的更改）：1.把数据中的信息拿到复制给视图上2.监听视图的更新，更新后重新修改数据3.数据更改后，重新控制视图重新渲染<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init

2020-10-14 16:47:35 344

原创 vue响应式数据实现原理

vue中类似v-model的实现原理v-model的渲染（视图更新控制数据的更改）：1.把数据中的信息拿到复制给视图上2.监听视图的更新，更新后重新修改数据3.数据更改后，重新控制视图重新渲染<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in

2020-10-14 16:45:56 329

原创 vue实践动态轮播图组件

vue实践动态轮播图组件数据更改【=>dom diff -> 把虚拟dom传化为真实的dom ->$nextTick(在回调函数后真实) -> 告知浏览器绘制】分割成3个件,BannerButton,BannerPagination,BannerPlugin注意：组件命名采用驼峰式写法解析关键词作用：template：每一个组件都有一个template，没有template也必须有rand，最起码要指定出我们的视图来data>return : 视图有了，就有数据，

2020-07-04 22:21:06 595

原创 axios常规配置项

//常规配置项axios.defaults.baseURL = 'https://127.0.0.1:9999'; //请求服务器具体的地址axios.defaults.withCredentials =true; //在跨域中允许携带凭证axios.defaults.header['Content-Type'] = 'application/x-www-form-urlencoded';//声明传给服务器的数据，通过请求传给服务器的数据application/x-www-form-urlencod

2020-07-04 09:12:31 612

原创 vue中provide和inject实现祖先与后代之间的通讯

provide和inject实现祖先与后代之间的通讯使用闭包和必须是响应式数据<!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"

2020-06-20 10:27:54 586 1

原创使用ref方式实现组件通讯

refs方式实现组件通讯基于ref子组件传值子组件$parent和$children显示和隐藏只需4步：1.在子组件voteButton中data(){ return { falg = true; }}2.在子组件voteButton里面给div加上v-show="flag"3.在父组件中加上<button @click="handle"></button>按钮标签加上handle方法4.在父组件中methods:{ handl

2020-06-19 12:06:30 584 1

原创你知道兄弟组件如何通讯传递吗？

发布订阅实现兄弟组件信息传递原理1.#app 里面有voteList，里面有很多响应式数据，多次调用了my-vote这个组件，相当于创建了my-vote的实例，父组件通过属性把title传给了props，my-vote里面有数据num=0（多少人参与投票），eventBus=new Vue实例，将eventBus分别通过props传给vote-content和vote-button2. H3：title/num3. vote-content supNum/oppNum/ratio props:

2020-06-19 11:26:38 341

原创通过发布订阅模式子组件给父组件传值

通过发布订阅模式子传父传父发布订阅注册方法：基于自定义事件，把父组件中的某一个方法注册到任务队列中<!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-Co

2020-06-16 17:46:07 279

原创深挖vue父传子中的单项数据流

vue单项数据流父传子单项数据流vue的单向数据流：父组件的更新会触发子组件的更新，但子组件的更新不会触发父组件的更新，只能是父到子，父组件可以把信息传给子组件，但是子组件不能传给父组件如果想修改子组件的data：1.把接受到的属性值复制给data，不改属性，改子组件的data2.把prop以计算属性定义<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&

2020-06-16 17:12:49 242

原创彻底弄懂父组件给子组件传值prop

父组件给子组件传值（投票）局部组件实践和组件之间的嵌套：父组件把信息传递给子组件：props属性传递默认传递给子组件的属性值都是字符串格式的，如果需要传递数据的格式是数据本身应该具备的数据，我们需要基于v-bind实现传递（哪怕传递的属性值还是固定）可以把子组件当做一个标签，我们可以设置ID、clsaa, style等内置属性值，这些属性也会传递给子组件，vue会帮我们处理好的，该合并的合并，该覆盖的覆盖，无需我们在props中注册处理`<!DOCTYPE html><

2020-06-16 17:08:57 1280

原创 vue实践局部组件需求-投票

vue实践局部组件需求-投票投票局部组件实践和组件之间的嵌套：1.搭建结构（html+css布局）2.在组件标签中拆分成多个局部组件3.删除第一步的搭建结构（html+css布局）代码4.在组件中调取渲染使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-

2020-06-10 20:05:20 577

原创 vue基础实践: 局部组件

vue基础实践: 局部组件知识点总结：创建局部组件-注册局部组件-声明组件<!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"

2020-06-10 20:01:33 153

原创 vue基础实践：组件命名的规则

vue基础实践：组件命名的规则组件的特点：* - 可复用* - 方便维护* - 每一个vue组件都是一个独立的个体（独立的vm实例）：DATA是独立的（不同组件的data应该互不干扰）有完整的生命周期，方法等也是独立的* - 能够实现组件的嵌套：需要掌握组件之间的信息通信//* 全局组件：无需单独引用或者配置，直接在大组件中调取全局组件即可* Vue.component(componentName, options)* + options可以使用的有vm实例具备的一切（D

2020-06-09 11:42:52 495

原创 vue基础实践：生命周期钩子函数

vue基础实践：生命周期钩子函数el :'#app' 用来指定当前vm所关联的视图el:'#app', 等价于template: '<h1>{{msg}}</h1>',//指定了template与 el:'#app'没有关系了生命周期函数（钩子函数）beforeCreated 创建实例之前created 创建实例成功，（一般在这里实现数据的异步请求）异步发送ajax请求，beforeMount 渲染Dom之前，加载组件第一次渲染（把渲染的结果放到页面之前）{{ms

2020-06-09 09:41:32 178

原创 vue基础实践：refs

vue基础实践：refsrefs vue框架开发的时候，我们尽可能减少直接操作dom 基于元素给当前元素设置refs，可以把当前元素放到this.$refs对象中，从而实现对DOM的直接操作（只有在mounted及之后才可以获取到这些元素）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width

2020-06-09 09:08:34 351

原创 vue基础实践1：双循环，双事件选择显示

vue基础实践1：双循环，双事件选中显示some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。some() 方法会依次执行数组的每个元素：如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素，则返回false。<!DOCTYPE html><html lang="en"><head> <

2020-06-09 09:05:30 638

原创 vue基础实践1: 经典选项卡

vue基础实践1: 经典选项卡选项卡方法： 1. vue方法选项卡 2. 事件委托方法性能好点2大经典选项卡思路：1.3个li控制1个div，每次点击li都控制div里面的内容发生变化2.3个li控制3个div显示隐藏`<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi

2020-06-05 21:08:55 350

原创 vue基础实践1：class和style数组样式类

vue基础实践1：class和style数组样式类class和style数组样式类对象方式处理动态的样式; :class="{样式类名：响应式数据...}" 响应式数据为true则有这个样式，反之则没有<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini

2020-06-04 11:05:35 608

原创 vue基础实践1：vue基础语法

vue基础实践1：vue基础语法<!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">

2020-06-03 19:25:14 190

原创 vue基础实践: filter过滤器单词首字母大写

vue基础实践: filter过滤器单词首字母大写多种方式实现单词首字母大写反转单词首字母大写（正则）词首字母大写（第二种方式写一个方法）单词首字母大写（第二种方式vue过滤器）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-

2020-06-03 19:16:17 2115

原创 vue基础实践1：单选按钮和复选按钮特点

vue基础实践1：单选按钮和复选按钮特点单选按钮和复选按钮特点：1.按照v-model进行分组，单选框准备的数据是一个值，复选框准备的数据是一个数组2.每一个框都有自己的value，谁被选中，数值就是被选中元素的value值；相反值是多少，对应value的元素也会默认被选中;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="

2020-06-03 19:11:58 523

原创 vue基础实践1：事件修饰符

vue基础实践1：事件修饰符> v-on (简写@)：用来实现事件绑定的指令 v-on:click:xxx等价于@click='xxx' 1.事件触发的时候，需要传递参数信息，把方法加小括号，$event是事件对象 v-on:click='sum($event,10,20)' 2.事件修饰符常规修饰符：@keydown.prevent/stop = 'xxx' 按键修饰符：@keydown.enter /space/delect/up/right/down/left...='xxx' 键盘码：@k

2020-06-03 18:58:47 209

空空如也

空空如也