- 博客(27)
- 收藏
- 关注
RSS订阅原创 Vue常用特性
Vue常用特性简记本文包含自定义指令、计算属性、监听属性、过滤器、生命周期相关语法及用法1.自定义指令1.1为何需要自定义指令内置指令不满足要求1.2自定义指令的语法规则(获取元素焦点)Vue.directive('focus', { // 被绑定元素插入父节点时调用 inserted: function(el) { // 获取元素焦点 el.focus() }})自定义指令用法<input type="text" v-focus>1.3带参数的自定义指令
2020-07-12 11:15:18
222
原创 node学习笔记
Node1.Node.js介绍node.js是一个javascript运行时环境，可以解析和执行javascript代码，不是一门语言，不是库，不是框架。node.js中的javascript没有BOM、DOMEcmaScript在node这个运行时执行环境中为javascript提供了一些服务i器级别的操作ApI，例如文件读写、网络服务的构建、网络通信、http服务器等处理构建于google的v8引擎上event-driven 事件驱动non-blocking I/O model 非阻
2020-07-12 09:38:17
242
原创 AJAX学习笔记
AJAX1.Ajax基础传统网站中存在的问题网速慢的情况下，页面加载时间长，用户只能等待表单提交后，如果有一项内容不合格，需要重新填写所有表单内容页面跳转，重新加载接面，造成资源浪费Ajax概述全称:Asynchronous JavaScript and XML；它是浏览器提供的一套方法，核心是XMLHttpRequest兑现个，可以实现网页无刷新更新数据，提高用户浏览网站的体验。Ajax的一些应用场景页面上拉加载更多数据列表数据无刷新分页表单项离开焦点数据验证搜索框提示文字
2020-07-06 08:57:34
248
原创 ESlint中使用console.log报错问题
由于ESlint规范化，使得在ESlint中使用console.log会报错。解决方法就是在ESlint的配置文件中设置允许console.log控制台输出。ESLint配置主要有两种方式。Configuration Comments - 使用 JavaScript 注释把配置信息直接嵌入到一个代码源文件中。Configuration Files - 可以配置一个独立的 .eslintrc...
2019-06-28 21:11:38
4937
原创 将一个本地git仓库同步到到多个远程仓库
git本身是分布式版本控制系统，可以同步到另外一个远程库，因此也可以同步到另外两个远程仓库。本文就以learngit仓库为例，同步到github和码云两个远程仓库上。应该注意的是，使用多个远程仓库时，在同步单个远程仓库时，git给远程仓库的默认名是origin，因此在使用多个远程仓库时，就需要标识具体提交的仓库名。首先删除已经关联的名为origin的远程仓库：git remote rm or...
2019-06-27 11:21:53
1335
2
原创 webpack之管理资源
我们在上一篇webpack概念引入以及入门案例中有了一个小项目，显示了"Hello webpack"。现在，我们尝试去整合其它资源，比如css、图片、字体，看看webpack如何处理。webpack最酷的一个功能就是除了JavaScript，可以使用loader引入其它任何类型文件。下面从引入css文件开始。开始之前对原有的项目结构改变一下。（说明：本文贴出的代码，若行首有"+“表示改行代...
2019-06-23 21:21:50
153
原创 webpack概念引入以及入门案例
webpack概念引入初学webpack，我们应该会有一个疑惑，就是自动化构建工具是基于什么情况产生的，能帮我们在开发工程中带来怎样的便利。下面我们就来解答下这种疑惑。首先，我们来想想网页中会引用哪些常见的静态资源？无非就是以下几类。jscssimage字体文件模板文件但是随着项目的庞大，引入的这些资源也会增多，这些静态资源的增多，就会产生以下几个问题了。网页加载速度慢，因...
2019-06-22 22:17:25
338
原创 MongoDB数据库学习以及在Node中操作MongoDB数据
在学习某个数据库之前，可以根据学习其他数据库的经验来问出数据库共有的问题，带着这些问题去学习一个新的数据库，有助于我们更快地学习。当然没学过数据库，也可以根据这些问题对数据库有整体的了解，从而在具体学习过程中更游刃有余。而且在学习完一段时间之后，有了这些问题能让你在一段时间之后，感觉学过却又什么记不起来时，顺着这些思路，快速捡起忘记的知识点。首先我们需要了解一些数据库的基础知识。1.什么是数据...
2019-06-05 12:11:26
196
原创 在浏览器中输入网址到看到网页内容经历了哪些过程
1.在浏览器地址栏中输入网址2.浏览器获取这个网址之后，会先去缓存中看看有没有要访问的资源，从浏览器缓存-系统缓存-路由缓存中查看，如果有就不再进行hhtp请求，直接从缓存中加载资源。否则进行步骤3。（缓存就是把之前访问过的web资源，例如css、js、图片等资源保存在本机的内存或磁盘中）3. 浏览器拿到域名自动去向DNS(域名系统)服务器发起请求，查询用户输入的域名对应的ip地址 （域名的设...
2019-06-04 16:07:26
2313
原创 vue组件基础
1.基本示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> </head><body> <div id="demo"> <button-cou...
2019-05-28 09:10:33
185
原创 vue实例以及实例生命周期
Vue实例创建一个vue实例每个vue应用都是通过Vue函数创建一个实例开始的。var vm = new Vue({ //选项})当创建一个vue实例的时候，你可以有许多选项来完成自己想要的操作。数据与方法当一个vue实例被创建时，它将data对象中的所有属性都加入到Vue的响应系统中。当这些属性的值发生变化时，视图也会跟着对应变化。var data = {a: 1}var ...
2019-05-27 10:40:36
312
原创 vue指令
vue指令指令：带有v-前缀的指令，代表vue提供的特殊属性。这些指令会在渲染的DOM上应用特殊的响应式行为。v-text作用：更新元素的textContent，若只更新部分文本内容需要使用{{ Mustache }}插值。<span v-text="msg"></span>v-html作用：更新元素的innerHTML。注意：v-html不能用来复合...
2019-05-27 09:05:15
1935
原创 VUE.JS入门概述
1.Vue.js是什么？Vue (读音 /vjuː/，类似于 view) 是一套构建用户界面的框架。只关注视图层，不仅容易上手，还便于与第三方库或既有项目整合。2,为什么要学习流行框架？使用框架，可以提高开发效率。前端提高开发效率的历程：原生JS->JQuery之类的库 -> 模板引擎 -> Angular.js -> Vue.js在vue中，一个核心的概念：让用...
2019-05-23 16:27:53
178
原创 ES6学习-module
说明：本文参考阮一峰的ECMAScript 6 入门1.概述在ES6之前，JavaScript没有模块体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其它语言都有这项功能，比如Ruby的require、Java的import，甚至连CSS都有@import，但是JavaScript没有任何这方面的支持，这对开发大型的、复杂的项目形成了障碍。ES6模块的设计思想是尽可能的...
2019-05-22 17:26:46
212
原创 ES6学习-Class和Class的继承
说明：本文参考阮一峰的ECMAScript 6 入门1.Class类的由来JavaScript语言中，生成实例对象的传统方法是通过构造函数。function Person (name, age) { this.name = name this.age = age}Person.prototype.toString = function () { return `${name},$...
2019-05-22 17:25:17
359
原创 ES6学习-Generator函数的语法
说明：本文参考阮一峰的ECMAScript 6 入门1.简介基本概念Generator函数是ES6提供的一种异步编程解决方案。语法行为与传统函数完全不同。在语法上，可以把Generator函数理解为一个状态机，封装了多个内部状态。执行Generator函数会返回一个遍历器对象，可以依次遍历Generator函数内部的每一个状态。形式上，Generator函数是一个普通函数，但是有两个特...
2019-05-22 17:23:24
157
原创 ES6学习-Iterator和for...of循环
说明：本文参考阮一峰的ECMAScript 6 入门1.Iterator（遍历器）的概念JavaScript原有的表示‘集合’的数据结构，主要是数组和对象，ES6又添加了Set和Map。这样就有四种数据结构，这些数据结构还可以组合在一起，例如数组的成员是Map，Map的成员是对象。这就需要一个统一的接口机制，来处理所有不同的数据结构。Iterator(遍历器)就是这样的一种机制。它是一种接口...
2019-05-22 17:22:13
292
原创 ES6学习-Promise
说明：本文参考阮一峰的ECMAScript 6 入门1.Promise的含义Promise是异步编程的一种解决方案。简单来说，就是一个容器，里面装着未来才会结束的事件（通常是一个异步操作）结果。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）、rejected（已失败）。这三种状态只能由异步操作的结果决定，其它任何操作都不能改变这种状态，...
2019-05-20 14:59:46
148
原创 ES6学习-Set和Map数据结构
说明：本文参考阮一峰的ECMAScript 6 入门Set和Map数据结构1.SetES6新增的Set数据结构，类似数组，但成员的值都是唯一的，没有重复的值。const set = new Set();[2, 3, 4, 3, 5, 3, 2, 6].forEach( x => set.add(x))for (let i of set) { console.log(i)}/...
2019-05-19 09:31:41
267
原创 ES6学习-Symbol
SymbolES6新增了一种原始数据类型Symbol,表示独一无二的值，用来防止属性名的冲突。let s = Symbol()typeof s //"symbol"上面的代码，表明s是一个独一无二的值。typeof的结果是symbol，表明s是Symbol数据类型，而不是其他数据类型。注意：Symbol函数前不能使用new命令，因为它返回的是一个原始数据类型，而不是一个对象。因此也不能...
2019-05-18 17:06:51
169
原创 ES6学习-super关键字
说明：本文参考阮一峰的ECMAScript 6 入门super关键字我们知道，this关键字总是指向函数所在的当前对象。ES6又新增了一个super关键字，指向当前对象的原型对象。const proto= { foo: 'hello'}const obj = { foo: 'world', //ES6方法的简写形式 find(){ return super.foo }}...
2019-05-18 16:25:11
645
原创 ES6学习-扩展运算符
数组的扩展说明：本文参考阮一峰的ECMAScript 6 入门1.扩展运算符扩展运算符是三个点(…)。就好比rest参数的逆运算，将一个数组转化为用逗号分隔的参数序列。console.log(...[1, 2, 3])//1 2 3console.log(1, ...[2, 3, 4])//1 2 3 4该运算符主要用于函数调用。function push(array, ......
2019-05-18 14:54:43
154
原创 ES6学习-函数的扩展
1.函数参数的默认值function add(x = 1, y = 2 ){ return x + y}add() //3与结构赋值默认值结合使用function foo({x, y = 5}) { console.log(x, y);}foo({}) // undefined 5foo({x: 1}) // 1 5foo({x: 1, y: 2}) // 1 2fo...
2019-05-18 10:32:33
137
原创 ES6学习-字符串的新增方法
说明：本文参考阮一峰的ECMAScript 6 入门1.String.fromCodePoint()ES5提供的String.fromCharCode()方法，用于从Unicode码点返回对应的字符，但是这个字符不能正确识别码点大于0xFFFF的字符。String.fromCharCode(0x20BB7)//"ஷ"上面代码中,码点0x20BB7大于0xFFFF,String.from...
2019-05-17 15:36:37
569
原创 ES6学习-字符串的扩展
说明：本文参考阮一峰的ECMAScript 6 入门概要：字符串的Unicode表示法\uxxxx,超出范围\u{xxxx}；字符串for…of遍历器，可识别超出\uFFFF的码点；反引号表示的模板字符串（``），${}嵌入变量。1.字符串的Unicode表示法ES6加强了对Unicode的支持，允许采用\uxxxx的形式表示一个字符，其中xxxx表示字符的Unicode码点。"...
2019-05-17 10:06:38
261
原创 ES6学习-变量的解构赋值
说明：本文参考阮一峰的ECMAScript 6 入门变量的解构赋值1.数组的解构赋值基本用法ES6允许按照一定模式，从数组和对象中提取值为变量赋值，这被称为解构。就好像是把数组或对象里的值一个个分解出来构成单独的变量值（便于理解，我就这么从字面意思强行解释吧）。以前为变量赋值，只能直接指定值let a = 1let b = 2let c = 3ES6允许写成下面形式let [...
2019-05-16 11:59:43
157
原创 ES6学习-let和const命令
1.let命令作用：let声明的变量只在其所在代码块内有效{ let a = 10}console.log(a )代码块外使用会报错： ReferenceError: a is not definedfor循环内使用let和var产生的不同效果：下面代码使用的是var，结果为10var a = []for (var i = 0; i < 10; i++) { a[i]...
2019-05-15 17:32:28
390
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人