「已注销」-CSDN博客

原创 1.盒子模型

盒子模型：即大部分的html标签，都可以视作是一个盒子，由Margin(外边距)、Border(边框)、Padding(内边距)、Content(内容)层层包裹。如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>box</title> <style type="text/css"> #box{ } &lt

2020-07-15 17:26:49 363

Vuex：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。开始：在之前的基础上，添加vuex依赖。npm install vuex --save-dev相关文件：webpack.config.js：https://blog.csdn.net/weixin_4787055.

2020-07-14 15:54:37 166

原创 13.vue-router相关API（2）Router

Router 构建选项：routes：用于将路径和页面组件绑定。interface RouteConfig = { path: string, // 路径 component?: Component, // 单个视图组件 name?: string, // 命名路由 components?: { [name: strin

2020-07-13 20:21:10 217

原创 12.vue-router相关API（1）router-link和router-view

官网链接：https://router.vuejs.org/zh/api<router-link>：<router-link>组件支持用户在具有路由功能的应用中 (点击) 导航。通过to属性指定目标地址，默认渲染成带有正确链接的<a>标签，可以通过配置tag属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。to：表示目标路由的链接。<!DOCTYPE html><html...

2020-07-12 17:47:30 361

原创 11.初步使用vue-router

vue-router：Vue Router 是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于 Vue.js 过渡系统的视图过渡效果细粒度的导航控制带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式，在 IE9 中自动降级自定义的滚动条行为https://router.vuejs.org/zh/guide..

2020-07-12 12:18:44 178

原创 10.webpack中使用vue

初始化npm。npm init -ynpm安装vue。npm install vue --save-devnpm安装vue相关编译器npm i vue-loader vue-template-compiler --save-devnpm安装babelnpm install @babel/cli @babel/core @babel/preset-env @babel/preset-react babel-loader --save-devnpm安装we

2020-07-11 17:38:22 96

原创 9.vue实例信息、属性继承、自定义以及内部事件

实例信息$data：对实例地data对象属性地访问； $props：对组件实例地props对象属性地访问； $el：访问实例使用的根 DOM 元素； $options：访问实例所有属性； $isServer：当前 Vue 实例是否运行于服务器。； $attrs：包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class和style除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class和style除外)，并且可以...

2020-07-11 00:44:58 371

原创 8.vue文档API（5），组件

组件：之前vue实例，必须挂载到一个指定的DOM节点上，这样的话，太过死板，不灵活。所以，就有了组件，可以任意的挂载到一个vue实例下。组件本身，就可以看作是一个vue实例，和vue实例一样，具有生命周期。注册与渲染：只用组件之前，需要先注册注册的方式分为两种，一种是全局Vue注册，这样的话，可以在任意的vue实例下调用该组件；另一种就是局部注册，具体的实现这里有：https://blog.csdn.net/weixin_47870554/article/details/106946942

2020-07-10 22:30:51 119

原创 7.vue文档API（5），destroyed的销毁阶段与key属性

简介:vue的销毁，销毁的不是相关元素，甚至vue实例也没有被销毁，而是数据与dom关系。销毁调用的方法：触发销毁的函数，调vue实例对象的$destroy函数即可。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vueTest</title> <script src="https://cdn.jsdelivr.ne

2020-07-10 12:46:18 1379

原创 6.vue文档API（4），updated的更新阶段以及数据与函数

数据:在vue实例中的一个对象，用于存储数据。可在渲染的html中进行调用。代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vueTest</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>&l

2020-07-09 23:48:31 729

原创 5.vue文档API（3），created的初始化阶段与mounted挂载阶段以及渲染相关

简介：

2020-07-08 23:15:22 964

原创 4.vue文档API（2），简单的生命周期描述

全局 API：在vue中可以直接调用的接口。Vue.extend( options )：最基础的 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。属于生命周期中的beforeCreate，但是未正式创建、挂载。...

2020-07-07 21:41:15 141

原创 3.vue文档API（1）：基础的配置

1.简介:对vue可调用的接口API集合：https://cn.vuejs.org/v2/api/2.全局配置：即可直接对Vue的属性进行配置操作。silent：取消 Vue 所有的日志与警告。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>silent</title> <script src="https:

2020-06-30 20:13:40 576

原创 8.queue,队列管理

简介：在data的基础上，在数据对象中添加一个一个属性，属性内容指定是队列。代码大体框架：jQuery.extend({ queue: function( elem, type, data ) { }, dequeue: function( elem, type ) { }, _queueHooks: function( elem, type ) { }});jQuery.fn.extend({ queue: function( type, data ) { },

2020-06-27 22:46:19 243

原创 7.Data相关,数据管理

简介：$().data，用于在jQuery实例对象中存储对象数据。通过$().data存储、获取数据。代码大体框架：var data_user, data_priv, rbrace = /(?:\{[\s\S]*\}|\[[\s\S]*\])$/,rmultiDash = /([A-Z])/g;function Data() {}Data.uid = 1;Data.accepts = function(owner) {}Data.prototype = { ke

2020-06-27 13:18:14 307

原创 2.简单地使用vue组件

开始：之前的vue指令，操作的都是单个的html标签，与此对应的，还有将多个标签组到一起的组件，即一个自定义的组件标签内部，是多个原始的html标签。组件创建：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>demo-component</title> <script src="https://cdn.jsdeli.

2020-06-25 18:30:10 177

原创 1.开始吧，vue。

最简单的开始：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>这是最简单的使用方法，直接在html文件内，使用<script>标签，就可以开始vue了。当然，以上是使用最新版本的vue，如果想要确定版本的话，可以用以下的代码：<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script

2020-06-24 16:18:09 126

原创 6.jQuery.Deferred相关

简介：Deferred相关功能，用于延迟对象，实现对异步的统一管理。代码框架如下：jQuery.extend({ Deferred: function( func ) { }, when: function(subordinate){ }});可以看出就是为jQuery添加了Deferred、when两个属性方法。通过调用这两个方式实现对异步的统一管理。代码详解：Deferred：可以从源码中看出来，Deferred声明了tuples、state、

2020-06-19 22:23:22 140

原创 5.jQuery.Callbacks内部核心函数详细解析

前提：最好将之前的大致意义讲解花时间看一下。只挑关键的几个函数讲。add：list判断：add: function() { if ( list ) { }}首先是大前提，要判断list存在，只有list存在，是数组（哪怕是空数组），就可以通过判断，进入add()函数将元素添加到list中：(function add( args ) { jQuery.each( args, function( _, arg ) { });})( arguments );

2020-06-18 22:15:23 321

原创 4.jQuery.Callbacks大致意义讲解

jQuery.Callbacks：作用是对加载的回调函数进行统一管理。需要前置的了解一些知识：core_rnotwhite = /\S+/g：正则，用来匹配任何非空白字符（空白字符，包括空格、制表符、换页符等等）。 var optionsCache = {}：一个空对象，用于存储缓存选项 createOptions：function createOptions(options) { var object = optionsCache[options] = {}; jQuery.eac

2020-06-18 15:56:01 204

原创 3.jQuery.extend()扩展的一些工具方法

前提：这里是349行开始的，调用jQuery.extend为jQuery添加的一些的属性，设计比较底层，当然，有些会涉及到jQuery.Callbacks和jQuery.Deferred，再这里就暂时放过，之后再解析。jQuery.extend，在之前就已经讲过了，在这里，输入的是一个对象，意义就是把这个对象中的属性挂载到jQuery，使得外部可以直接使用jQuery或者$对对象进行调用。一些需要了解，内部已经声明好的、可以直接调用的变量，在21行开始的首页就有声明：_jQuery = wi

2020-06-17 20:55:44 222

原创 1.jQuery2.0.3大体框架、jQuery.fn.init函数

jQuery2.0.3大体框架：jQuery2.0.3总体架构如下：(function( window, undefined ) {})( window );jquery-2.0.3，总体看是一个匿名函数自执行，导入js文件后，就会立即执行，同时可以封装内部的变量，避免变量污染。内部声明的jQuery函数。jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context,

2020-06-17 10:51:04 200

原创 2.jQuery.extend = jQuery.fn.extend函数详解

jQuery.extend = jQuery.fn.extend函数详解

2020-06-17 00:40:04 175

原创 0.jQuery2.0.3源码解析目录

对jQuery2.0.3源码的解析，并不是完全一行一行顺着代码进行解析的，而是根据我对jQuery源码理解进行解析。以下是目录：jQuery2.0.3大体框架、jQuery.fn.init函数 jQuery.fn = jQuery.prototype以及jQuery.fn.init函数详解 jQuery.extend = jQuery.fn.extend函数详解相关资料来源：B站视频，逐行分析jQuery源码[完整版]：https://www.bilibili.com/video/..

2020-06-17 00:04:18 176

原创 2.3.3.react-redux的一个简单案例

0.前提：reudx只是单纯的对数据进行管理，数据与组件之间的交互，还需要手动地添加，所以，就有了react-redux的开始。相关依赖已经再redux的案例中下载好了。https://blog.csdn.net/weixin_47870554/article/details/106743677react-redux中的组件分为两类，一类是只处理数据和业务逻辑的容器，一类是只负责显示UI显示。1.简单的demo：代码如下：...

2020-06-15 01:19:14 180

原创 2.3.0.redux的简单案例

0.前提：redux的作用是实现对复杂庞大数据的管理。需要npm安装react-redux：（安装的是react-redux@6.0.0）npm install redux react-redux@6.0.0 redux-devtools --save-dev（因为我安装时的react-redux需要依赖react-redux@6.0.0版本以前的，所以react-redux就改成了6.0.0版本的）在项目文件夹下面，创建一个demo.js，代码如下：const ReactR

2020-06-14 20:58:51 184

原创 2.2.1.react-router相关组件，API简介

0.前提：之前的演示，应该已经能大致地了解react-router地相关组件作用了。大致就是使用Router组件包裹Route组件，在Route组件中，使用path对应路径，component对应其他可以渲染出DOM节点的组件，将组件和路径绑定在一起，从而实现路由的功能。而以下是对其react-router-dom相关的组件地具体描述（都是我看官网，然后自己转化了一下，想要标准原版的话，可以去官网：https://reacttraining.com/react-router/core/guides/

2020-06-14 01:21:35 287

webpack打包的react案例demo.rar

single-file-example.html

空空如也