冲呀web-CSDN博客

原创讲清vue数据代理

一、何为数据代理1.1.在讲清数据代理前我们应当知道 Object.defineProperty()这个方法详情查看 let number = 18 let person = { name:'张三', sex:'男', } Object.defineProperty(person,'age',{ // value:18, // enumerable:true, //控制属性是否可以枚举，默认值是false // writable:true

2021-10-18 16:18:46 310

原创 ts中的类操作

一、面向对象面向对象是程序中一个非常重要的思想，它被很多同学理解成了一个比较难，比较深奥的问题，其实不然。面向对象很简单，简而言之就是程序之中所有的操作都需要通过对象来完成。举例来说：操作浏览器要使用window对象操作网页要使用document对象操作控制台要使用console对象一切操作都要通过对象，也就是所谓的面向对象，那么对象到底是什么呢？这就要先说到程序是什么，计算机程序的本质就是对现实事物的抽象，抽象的反义词是具体，比如：照片是对一个具体的人的抽象，汽车模型是对具体汽车的抽

2021-04-09 14:37:34 920

原创 ts编译选项

一、自动编译文件编译文件时，使用 -w 指令后，TS编译器会自动监视文件的变化，并在文件发生变化时对文件进行重新编译（w就是watch的意思）。示例：tsc xxx.ts -w1.自动编译整个项目如果直接使用tsc指令，则可以自动将当前项目下的所有ts文件编译为js文件。但是能直接使用tsc命令的前提时，要先在项目根目录下创建一个ts的配置文件 tsconfig.jsontsconfig.json是一个JSON文件，添加配置文件后，只需 tsc 命令即可完成对

2021-04-06 10:28:48 836

原创 typescript类型说明

一、TypeScript简介TypeScript是JavaScript的超集。它对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性。TS代码需要通过编译器编译为JS，然后再交由JS解析器执行。TS完全兼容JS，换言之，任何的JS代码都可以直接当成JS使用。相较于JS而言，TS拥有了静态类型，更加严格的语法，更强大的功能；TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环境的兼容问题；同样的功能，TS的代

2021-04-06 10:28:26 314 1

原创 webpack中的vue

一，如何在 webpack 构建的项目中，使用 Vue 进行开发？在 webpack 中，使用 import Vue from ‘vue’ 导入的 Vue 构造函数，功能不完整，只提供了 runtime-only 的方式，并没有提供像网页中那样的使用方式；// 默认是runtime-only 的方式import Vue from 'vue'// 下面才是真正的通过script引入的vue.jsimport Vue from '../node_modules/vue/dist/vue.js'

2021-04-06 10:28:03 167

原创 vue中的组件

一，定义Vue组件什么是组件：组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；组件化和模块化的不同：模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；1.定义组件的方式：方式一：div id="app"> <!-- 如果要使用组件，直接，把组件的名称，以 HTML

2021-04-06 10:26:33 170

原创 watch、computed和methods之间的对比

一、methods通过在methods里面定义方法，实现功能：<body> <div id="app">    <input type="text" v-model="firstname" @keyup="g

2021-04-06 10:26:17 138 1

原创 vue中的路由

一、什么是路由后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；1. 在 vue 中使用 vue-router1.1导入 vue-route

2021-04-06 10:26:04 92

原创 vue中的动画

一，vue中的动画Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡条件渲染 (使用 v-if)条件展示 (使用 v-show)动态组件组件根节点1.过渡的类名在进入/离开的过渡中，会有 6 个 class 切换。1.v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。2.v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移

2021-04-06 10:25:41 339

原创 vue的生命周期

一、vue的生命周期1.什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！生命周期钩子 = 生命周期函数 = 生命周期事件主要的生命周期函数分类：创建期间的生命周期（钩子）函数：beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始编译模板beforeMount：此时已经完

2021-04-06 10:25:26 70

原创 vue中自定义指令

一、自定义指令除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。使用格式： Vue.directive('指令名',{对象})// 其中：参数1 ：指令的名称，注意，在定义的时候，指令的名称前面，不需要加 v- 前缀, // 但是：在调用的时候，必须在指令名称前加上 v- 前缀来进行调用// 参数2：是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作1.1 钩子函数**bind：**只调用一

2021-04-06 10:25:06 150 2

原创 vue中的过滤器和自定义按键修饰符

一、过滤器概念：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；1.1全局过滤器过滤器的定义语法 Vue.filter('过滤器的名称', function(){}) //过滤器中的 function ，第一个参数，已经被规定死了，永远都是过滤器管道符前面传递过来的数据 Vue.filter('过滤器的名称', fun

2021-04-06 10:24:44 99

原创 vue介绍和相关指令

1.1. Vue 的基本认识1.1.1. 官网英文官网: https://vuejs.org/中文官网: https://cn.vuejs.org/1.1.2. 介绍描述渐进式 JavaScript 框架作者: 尤雨溪(一位华裔前 Google 工程师)作用: 动态构建用户界面1.1.3. Vue 的特点遵循 MVVM 模式编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目MVVM:model:

2020-11-17 18:11:42 167

原创 webpack构建工具

一，简介本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。二，使用2.1 通过npm安装webpack模块//首先要安装全局的cnpm install webpack webpack-cli -g//快速创建一个package.json文件cnp

2020-11-17 18:11:25 405

原创 less介绍

一，关于less1.1介绍less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展LESS 既可以在客户端上运行，也可以借助Node.js在服务端运行。less的中文官网：http://lesscss.cn/bootstrap中less教程：http://www.bootcss.com/p/lesscss/1.2 Less编译工具该工具不需要node.js环境koala 官网:www.koala-a

2020-11-17 18:11:03 1995

原创 ES6新特性

1.1.let 关键字let 关键字用来声明变量，使用 let 声明的变量有几个特点：不允许重复声明块儿级作用域不存在变量提升不影响作用域链应用场景：以后声明变量使用 let 就对了 //1. 变量不能重复声明 // let star = '罗志祥'; // let star = '小猪'; //2. 块儿级作用域全局, 函数, eval // if else while for // {

2020-11-17 18:10:33 432

原创发送请求的方法

一，jQuery中的请求设置的jQuery的服务：1.1 get 请求$.get(url, [data], [callback], [type])url:请求的 URL 地址。data:请求携带的参数。callback:载入成功时回调函数。type:设置返回内容格式，xml, html, script, json, text, _default，返回的数据默认是字符串举例： $.get('http://127.0.0.1:8000/jquery-server', {a:100, b:20

2020-11-17 18:10:08 3034

原创原生ajax

一，介绍1.1 AJAX 简介AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。1.2 XML 简介XML 可扩展标记语言。XML 被设计用来传输和存储数据。XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，全都是自定义标签，用来表示

2020-11-17 18:09:41 123

原创 Node.js中http模，url模块和其他模块

一、服务器基础概念介绍1.1 服务器提供服务（响应）的机器在网络环境下运行相应的应用软件，为网上的用户提供共享信息资源和各种服务的一种高性能计算机1.2 浏览器渲染页面给用户1.3 HTTP协议HyperText transfter Protocol 超文本传输协议里面规定前端如何发送请求到后端，后端接收之后又如何返回数据的一系列规定在很久以前，浏览器的目的只是为了渲染静态页面，此时面临一个问题，如果前端发送一条数据到后端，后端如何接收，后端如何接收得到响应之后，如何返回。于是,HTTP

2020-11-17 18:08:54 316

原创 node.js的模块化和npm

一，Node.js简介1.Node.js是一个能够在服务器端运行JavaScript的开放源代码、跨平台JavaScript运行环境。2. Node采用Google开发的V8引擎运行js代码，使用事件驱动、非阻塞和异步I/O模型等技术来提高性能，可优化应用程序的传输量和规模。3. Node大部分基本模块都用JavaScript编写。在Node出现之前，JS通常作为客户端程序设计语言使用，以JS写出的程序常在用户的浏览器上运行。4.目前，Node已被IBM、Microsoft、Yahoo!、

2020-11-17 18:08:01 234

原创 node.js中的buffer和文件系统

一，Buffer(缓冲区)1.介绍• 从结构上看Buffer非常像一个数组，它的元素为16进制的两位数。• 实际上一个元素就表示内存中的一个字节。• 实际上Buffer中的内存不是通过JavaScript分配的，而是在底层通过C++申请的。• 也就是我们可以直接通过Buffer来创建内存中的空间。2.Buffer的操作（1）使用Buffer保存字符串/* Buffer(缓冲区) - Buffer的结构和数组很像，操作的方法也和数组类似 - 数组中不能存储二进制的文件，而buffe

2020-10-23 14:54:56 561

原创 JSON.parse（）和JSON.stringify（）和数组遍历方法

目录一、ES5 2二、 JSON扩展 22.1 parse 32.2 stringify 4三、数组 53.1 判断数组和对象 53.2 获得数组中值的索引 53.3 forEach 63.4 map 73.5 fill 83.6 some 83.7 every 93.8 filter 103.9 reduce和reduceRight 113.10 addNum 123.11 bind 133.12 toJSON 14一、parse （）和 stringify（）网络

2020-10-17 13:49:57 2881

原创 javaScript和jQuery中的快捷尺寸

一、javaScript的快捷的尺寸1.1 clientWidth 和 clientHeight值：包含的是 content + padding区域dom结构：1 div {2 width: 200px;3 height: 200px;4 border: 10px solid #000;5 background-color: orange;6 padding: 16px;7 margin: 20px; }执行代码：1 // 获得元素对

2020-10-17 13:49:34 145

原创 JS中的构造函数

面向对象1.类似于下面这种都是面向过程的书写方法 //现在我们使用变量来描述一个人 //姓名，年龄，身高，体重 /*var name1 = "老王"; var length = 180; var age = 30; var sex = "男"; }*/2 面向对象：//如果想要描述10个人，就需要40个变量，于是就有了数据结构 var person = { name1:"张三", length:180, age:30, s

2020-10-17 13:48:24 188

原创 jqeury中的节点操作

jqeury的节点操作1.添加节点添加到父元素内部，内部插入:将节点添加到选中标签内部，包含关系通过父节点添加：$父节点.append($(“孩子节点”))$父节点.prepend$(“孩子节点”))$(“孩子节点”).appendTo($父节点)$(“孩子节点”).prependTo($父节点)通过已存在的子节点增加：$(已存在的兄弟).after($obj)$(已存在的兄弟 ).before($obj)$obj.insertAfter($已存在的兄弟)$obj.insertBse

2020-09-26 14:43:30 141

原创关于nodeValue,value,innerHTML的区别

一，nodeValue表示元素的节点值：类似于div这种元素的节点值都会输出null案例：DOM结构：<div id="node">我是内容</div>输出语句：console.log(node.nodeValue);//输出null二，value表示value属性对应的值案例：DOM结构：<input type="button" name="" id="inp" value="123" />输出语句： var inp = documen

2020-09-24 17:42:09 689

原创 jquery的each遍历，this指向

一、函数节流函数节流：控制函数执行的频率，只有满足了条件之后，函数的代码才能够执行节流：return原理：return 后面的代码不执行步骤：声明锁 var lock = true判断锁的状态更改锁的状态重置锁的状态执行代码：1 // 声明标识 --- 锁2 var lock = true;3 $('button').click(function() {4 // 判断锁的状态5 if (!lock) {6 return;7 }8

2020-09-24 17:41:53 2232

原创 javascript中事件

一，事件流程1.1 事件的三要素：事件源：发生事件的对象事件类型：类型比如单击、双击、鼠标的移入、移除事件处理程序: 触发事件之后做些什么，事件处理的函数1.2事件分为三个阶段：事件捕获阶段：事件是由最外层的元素向目标元素传递的过程（IE不支持事件捕获）事件处理阶段：事件正位于目标元素之上事件冒泡阶段：有目标元素向外层元素传递的过程执行顺序：事件捕获–》事件处理–》事件冒泡事件的捕获和冒泡指的是当前元素的子元素跟当前元素拥有相同的事件，触发子元素的时候，当前元素对应事件发生在什么阶段

2020-07-13 22:13:56 186

原创 javascript中的节点操作

一、javascriptjavascript这门语言是由DOM、BOM、ECMAScript组成其中DOM指的是: document object model 文档对象模型体现在代码中是documentBOM指的是: browser object model 浏览器对象模型体现在代码中 windowECMAScript: 核心语法里面包含的是如何定义变量、运算符、表达式、流程控制语句、数据类型二、DOM我们可以通过dom的onclick、onmousedown、onmouseup来添加事件

2020-06-26 23:05:45 399

原创呼吸轮播图制作

一，技术分析：1.html,2.javascript3.jquery二，思路分析html将界面写好,设置好左右按钮，以及图片对应的下标圆点，设置好信号量，信号量的改变来控制图片的进出和下标圆点的改变。三，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device

2020-06-19 18:34:52 167

原创 jquery/序号问题/动画

一，序号问题1.1 eq（）:选中元素不同，序号也不同⦁ 常用的方法⦁ find查找子元素，可以实现指定的过滤执行代码：1. <script>2. // 获得box元素3. var $box = $('.box');4. // 在当前对象的子元素中进行查找，需要有过滤条件5. console.log($box.find('li'));6. </script>结果：1.2 index（）表示亲兄弟的排名，无视亲兄弟类型（只要是同一父节点）index()

2020-05-26 21:04:39 319

原创 jQuery/对象/方法/节点

一、jquery1.1 jquery历史官网：www.jquery.com看见logo和slogan（口号）：写更少的代码，做更多的事情。官网的自我介绍：jQuery is a fast, small, and feature-rich JavaScript library.jQuery是一个快速、小巧的、特点众多的JavaScript库。It makes things like HTML document traversal and manipulation, event handlin

2020-05-26 21:04:18 275

原创 javascript基础/IIFE/DOM/JSON

一，arguments函数内部的类数组对象。（只能在函数内部使用）arguments由函数实际参数组成。读取：通过索引值进行1. arguments[0];设置：使用=arguments[0] = 100length属性：arguments.lengtharguments只能通过length属性强制将类数组对象拉长。没有赋值undefined1. // 只能通过length强制将类数组拉长2. arguments.length = 13;3. console.log(argu

2020-05-17 09:14:10 325

原创 javascript基础/数组/字符串/正则表达式

⦁ 数组1.1 概述数组：有序的数据集合。array数组字面量： []数据每一项之间用逗号隔开，最后一项不要书写逗号。数组中数据可以是相同数据类型，也可以是不同数据类型1 // 数组可以是相同数据类型2 var arr1 = [1,2,3,4,5,6,7,8,8];3 // 还可以是不同的数据类型4 var arr2 = [10,"你好",undefined,true,"false",function(){console.log(1)}];5 6 console.log(arr1);

2020-05-16 08:27:50 594

原创 javascipt基础/函数

一、函数1.1 函数的声明函数就是功能。我们可以自己封装一些语句在函数内部，函数就具有了某一种特定的功能。声明函数：使用关键字function 空格隔开函数名(参数) {},在大括号内部封装语句，表示一个整体1. function 函数名(参数) {2. 语句；3. }函数声明语句并不会执行，只是告诉我们函数可以实现某一种功能，内部有哪些语句。1. // 声明函数=2. function xiyiji() {3. console.log("接水");4. consol

2020-05-14 12:11:43 208

原创 javascript基础/流程控制语句/循环语句

一，流程控制语句js 中执行顺序是从上到下。我们可以通过流程控制语句改变js语句的执行顺序，让某些语句先执行，某语句不执行。通过条件来控制语句的执行顺序。条件分支语句分类：if语句，三元表达式，switch语句。⦁1.1 if语句语法：if 如果…… else否则if (条件表达式) { 当满足条件表达式，执行结构体1;}else { 当不满条件表达式，执行结构体2；}条件表达式*：结果一定是布尔值，结果如果是true，满足条件；结果如果是false,不满足条件

2020-05-09 14:48:30 308

原创 javascript基础/math对象

一、javascript简介1.1 用途：数据验证读写HTML元素与浏览器窗口及其内容的交互效果网页特效WEB游戏制作基于Node.js技术进行服务器端编程1.2 Javascript简史在WEB日益发展的同时，网页的大小和复杂性不断增加，受制于网速的限制，为完成简单的表单验证而频繁地与服务器交换数据只会加重用户的负担，当时走在技术革新最前沿的Netscape（网景）公司，决定...

2020-05-07 22:54:44 259

原创 bootstrap框架介绍

一、bootstrap1.1 bootstrap是什么Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使 Web 开发更加快捷。它对HTML、CSS和JAVASCRIPT进行了封装，使它们使用起来更方便。我们只需要使用它已经设定好的类，或规则，即可快速应用它提供的功能。Bootstrap...

2020-04-17 21:58:49 5386

原创 html5 内容

一、html5概述1.1 概述HTML5 是 HTML 标准的最新演进版本。这个术语代表了两个不同的概念：① 它是一个新的 HTML 语言版本包含了新的元素，属性和行为② 同时包含了一系列可以被用来让 Web 站点和应用更加多样化，功能更强大的技术html5的改变：● 语义：能够让你更恰当地描述你的内容是什么。● 连通性：能够让你和服务器之间通过创新的新技术方法进行通信。● 离线...

2020-04-14 13:51:28 501

原创 CSS（6）定位拓展/css常用单位

一、定位表示盒子位置偏移。1 是否脱标2 相对于谁进行偏移1.1 相对定位水平：left right垂直： top bottom水平和垂直二选一1 position: relative;相对定位的元素没有脱离标准文档流，保留了原位置。新位置相对于原位置进行偏移。应用：1 进行位置微调1 .box p span {2 font-size: 12px;3 /*位置...

2020-04-04 14:25:14 196

空空如也

空空如也