Akiode-优快云博客

原创个人复习笔记

个人收藏的文章JavaScript 开发者应懂的 33 个概念JS是单线程语言很重要对应讲得比较好的文章也就是说JS的事件要排队执行，但是我们要注意同步任务和异步任务，至于哪些是异步任务哪些是同步任务就要靠平时的积累或者上网查。当我们打开网站时，网页的渲染过程就是一大堆同步任务，比如页面骨架和页面元素的渲染。而像加载图片音乐之类占用资源大耗时久的任务，就是异步任务常见的setT...

2018-10-29 16:39:26 241 1

原创 Vue的v-for用法

遍历数组// html部分<ul v-for="(item,index) in obj"> ↑ 要用到什么数据就要说出来 <li>{{ index }}:{{ item }}</li></ul>// vue部分var vm = new Vue({ el:'.word', ...

2018-11-18 19:06:35 316

原创 Vue的v-bind用法

我们可以通关用v-bind来绑定class或者id来控制css样式1、绑定单个class来匹配css// css部分.fcss{ color:red }<div v-bind:class="first"> </div>解释一下就是绑定一个class为vue实例里的数据first，first的值为fcss,所以最终绑定了一个叫fcss的cl...

2018-11-18 12:16:06 1410

原创性能优化 —— 收集

HTML1、避免再HTML中直接写css代码2、使用Viewport加速页面的渲染3、减少DOM元素数量JavaScript1、放到body之后，等页面渲染完再加载

2018-11-13 14:35:43 203

原创从用户输入URL到浏览器呈现页面经过了哪些过程

目录TCP连接UDPHTTP协议URL DNSHTTP请求发起和响应不单单只讲这个点，还顺带其他知识点，自己要多学多接触，自己要努力。TCP连接TCP：Transmission Control Protocol，传输控制协议他有三个行为：1、客户端发送请求给服务端2、服务端收到请求，确认请求，返回请求3、客户端收到确认请求，向服务器发出确认，...

2018-11-12 20:46:27 1403

原创原型链

在开始之前我们先把代码都写出来分析function foo( ){ }; //普通函数，但被new调用的时候就是构造函数，直接当成构造函数来看也行var obj = new foo( ); // obj是实例对象，由foo创建的var fm = foo.prototype //foo的原型对象关系婊：foo( )（儿子）、obj...

2018-11-01 15:43:10 126

原创 Vue路由设置个人总结

当我们创建vue-cli项目后，我们只要了解几个文件就能解剖路由的作用关于路由解剖去了解另一片文章Vue搭配食用接下来这篇文章只是用来整理我所看教程的总结1、路由在index.js控制路由，在里面引入组件，配置路由参数// 引入将要在路由使用的组件import Vue from 'vue'import Router from 'vue-router'import Te...

2018-10-28 17:07:36 2426

原创 Vue Router个人理解

官方Router教程下面是我自己个人整理的理解的部分，因为我觉得直接写在一起比较好HTML<script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-router/dist/vue-router.js"></scrip...

2018-10-26 11:19:34 319

原创 Vue搭配食用

总结index.html 用来被app.vue挂载main.js 用来告诉我们把app.vue挂载在哪里，以及引入要挂载的模板App.vue 被引入的基础模板，里面有路由标签，告诉我们路由输出的模板会在这里显示index.js 路由的控制器，引入要在路由标签显示的组件，配...

2018-10-25 18:02:48 728

原创 Vue的export default

看别人Vue的项目时，老是遇到各种奇奇怪怪的语法，后来一看，都是ES6的语法，所以我们认认真真的把ES6熟读，才能更好的理解Vue的搭建。1、export default 和 import 以及 export这两个都是构成模块功能的主要命令，因此会频繁的出现，理解他以后会更好的理清各模块的关系。export 和 export default 是规定模块对外的接口，输出的变量可以在别的模...

2018-10-25 16:20:43 761

原创去掉字符串前后的空格

我们使用JQuery的trim()方法来清除字符串前后空格的问题$(function () { var str = " lots of spaces before and after "; $( "#trimmed" ).html( $.trim(str) );})//结果显示为：lots of spaces before and after...

2018-10-24 22:04:25 873

原创 Git本地关联到github的远程库

Git提交三步曲// 一：添加所有修改过的文件到暂缓区$ git add .// 二：从暂缓区提交到远程库$ git commit -m"备注描述"// 三：提交到master分支$ git push origin -u master 第一次提交才用带参数的语法$ git push origin master 平常提交的语法从本...

2018-10-24 17:47:36 150

原创数组去重的方法

思路一：定义一个新数组，并存放原数组的第一个元素，然后将元素组一一和新数组的元素对比，若不同则存放在新数组中// 定义一个有重复数字的数组var arr = [1,2,1,3,2,3,5,6,5,5];// 定义一个空数组var newArr = [];for(var i = 0;i < arr.length; i++){// 如果在newArr中找不到对应的元素，...

2018-10-24 17:06:10 208

转载 Vue-cli快速搭建项目

vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目，GitHub地址是：https://github.com/vuejs/vue-clivue-cli脚手架的优势有一套成熟的vue项目架构设计,能够快速初始化一个Vue项目.vue-cli是官方支持的一个脚手架，会随本版本进行迭代更新。vue-cli提供了一套本地的node测试服务器...

2018-10-24 11:18:06 169

原创 JS引擎的执行机制

一、前置知识——同步与异步的概念、区分及执行机制JS最初是被设计在浏览器中使用的，为了避免多个进程同时对一个Dom操作导致冲突，因此将它设计成了单线程语言。但是JS是能够实现异步操作的，假设JS中不存在异步，代码都自上而下顺序执行，那么如果上一行代码解析时间很长的话，下面的代码就会被阻塞不执行，严重影响用户体验，而实现异步操作主要通过事件循环（event loop）操作。看以下例子：...

2018-10-22 10:00:25 210

原创 JQ返回顶部的方法

在JS中，我们返回顶部的方法有，在顶部的元素设置id，然后超链接目的为id就能返回顶部<html><div id="top"> </div> //最顶部的元素 n 行内容<a href="#top"></a> //超链接的目标是id为to

2018-10-22 08:44:36 8093

原创 AJAX个人笔记

AJAX = 异步 JavaScript 和 XML，在不重新加载整个网页的情况下更新网页一部分的数据第一步：创建XMLHttpRequest对象var xhr=new XMLHttpRequest(); //第一步：创建XMLHttpRequest对象老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象var x...

2018-10-21 15:54:22 291

原创 Less笔记

什么是Less？LESS是一个CSS预处理器，可以为网站启用可自定义，可管理和可重用的样式表。 LESS是一种动态样式表语言，扩展了CSS的功能。 LESS也是跨浏览器友好。CSS预处理器是一种脚本语言，可扩展CSS并将其编译为常规CSS语法，以便可以通过Web浏览器读取。它提供诸如变量，函数， mixins 和操作等功能，可以构建动态CSS。Less语法@primarycol...

2018-10-21 13:32:30 144

原创 Vue组件的理解

什么是组件呢？组件就是componentVue.component('button-counter', { //全局组件 data: function () { //组件的选项 return { count: 0 } }, template: '<button v-on:click="cou...

2018-10-20 17:01:21 1023

原创关于script元素的正确位置

浏览器遇到script元素时就会停止对HTML文档的处理，从而先解析script里的内容并执行，如果script（脚本）代码放在head里，就会发生还没找到元素就已经执行了方法的尴尬情节，也就等于什么都没发生，所以我们一般把script（脚本）放在html文档的末尾，这样就能确保HTML文档加载完之后再加载JS。我们直接来看实际效果代码:<!DOCTYPE html>&...

2018-10-17 19:53:44 911

原创 JS生成随机数

使用Math.random()就可以生成随机数<script>document.write(Math.random()) //显示一个随机数</script>

2018-10-15 18:12:12 780

原创 ES6笔记

letlet其实就是要声明变量后才能使用，还有块级作用域。const声明一个只读常量，声明后不能再变const的作用域与let命令相同：只在声明所在的块级作用域内有效。const PI = 3.1415;PI // 3.1415PI = 3; //不能改变，然后会报错 ...

2018-10-04 10:33:01 71

原创 JS记时事件

setInterval() - 每过指定的时间不停地执行指定的代码。 setTimeout() - 在指定的时间后执行指定代码单位都是毫秒，即1000就是一秒。两个方法的语法都是：window.setInterval( 函数名 , 毫秒数);或者window.setTimeout( 函数名 , 毫秒数); //例：3000=3s示例方法：...

2018-09-25 16:28:16 109

原创变量提升

JS的变量提升JavaScript的函数定义有个特点，它会先扫描整个函数体的语句，把所有申明的变量“提升”到函数顶部'use strict';function foo() { var x = 'Hello, ' + y; //y是undefined console.log(x); var y = 'Bob'; ...

2018-09-20 20:04:13 84

原创制作一个美观的搜索框

步骤：1、简单的input标签2、css修饰3、通过JavaScript来变得更美观如何制作一个点击就会变长，点页面就会变短的搜索框，我们要用到的是JS，以及两个方法一：onfocus //焦点取得二：onblur //焦点失去我们只要在点击时触发焦点获取事件，就能让他变长失去焦点时，就会触发失去焦点的函数，使搜索框变回原来的长度HT...

2018-09-19 09:16:05 10379

原创 Bootstrap4笔记

Bootstrap4就相當於一個css库，已经封装好了的，只要把class名改成bootstrap对应的名字，就会自动渲染css样式移动设备优先为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：<meta name="viewport" content="width=d...

2018-08-30 20:51:54 783

原创正则表达式

正则表达式(regular expression)描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等正则表达式的语法：var patt=new RegExp(pattern,modifiers);或更简单的方法var patt=/pattern/modifiers; 模式...

2018-08-26 17:41:03 84

原创 JQuery动画

用JavaScript实现动画要写很复杂的代码，而JQuery是已经封装好的，所以使用非常的方便$(document).ready(function(){ //这一句是为了防止页面还没加载完就运行js $("#div").hide( ) })show / hide$('#test'). //这是JQuery的语句...

2018-08-10 16:09:57 194

原创 HTML5的Canvas组件

1、创建一个canvas标签<canvas id="test-canvas" width="300" height="200"></canvas>由于浏览器对HTML5标准支持不一致，所以，通常在<canvas>内部添加一些说明性HTML代码，如果浏览器支持Canvas，它将忽略<canvas>内部的HTML，如果浏览器不支持C

2018-08-07 12:24:19 1787

在操作一个DOM节点前，我们需要通过各种方式先拿到这个DOM节点。最常用的方法是document.getElementById()和document.getElementsByTagName()，以及CSS选择器document.getElementsByClassName()。document.getElementsByTagName()和document.getElementsByCla...

2018-08-07 10:47:03 75

原创 BOM浏览器对象

返回浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高window.innerWidth //返回浏览器窗口的内部宽度window.innerHeight //返回浏览器窗口的内部高度而outer的是获取整个浏览器窗口的宽高window.outerWidth //返回浏览器的宽...

2018-08-05 20:28:49 214

原创如何用css绘制三角形

css部分：<style> div{ width:0px; height:0px; border:30px solid; border-color:上右下左; }</style>html部分:<div></div>三角形最关键的步骤就是要把宽和高为0；bo...

2018-08-03 18:58:16 332

原创 Vue中的join(),reverse()与 split()函数用法解析

split(' ')是分裂的意思，也就是把一个数据拆分var vm = new Vue({date:{ message=" Not split " })}message.split(' ') == [ "N", "o", "t", " ", "s", "p", "l", "i", "t&qu

2018-07-26 14:51:55 18982 1

原创 Vue全局组件与局部组件笔记

组件要注意的事项有：1、组件的data要用函数,一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝Vue.component('组件名',{ template:'<p>这是一个组件里的模板</p>', //这些都是选项 data:function(){ return{ ...

2018-07-26 10:35:59 286

原创 Vue实例步骤

一开始要创建Vue实例//创建实例的大体结构var vm = new Vue({ el:" #app ", //绑定的DOM，在哪里挂载 data:{ //定义要用到的属性 }, methods:{ //定义函数,可以通过 return 来返回函数值函数名...

2018-07-24 22:40:41 426

原创 HTML笔记

占位符属性placeholder=' '也就是搜索框还没输入时会出现的内容CSSbox-sizing:border-box //当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度 ...

2018-07-17 21:54:04 146

原创 Vue笔记指令

列表渲染用 v-for 把一个数组对应为一组元素我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组的名字并且 item 是数组元素迭代的别名。其实item是什么都行，只要跟数据渲染里的写法一样就行了 <ul id="example-1"> <li v-for...

2018-07-15 11:48:33 135

原创 Vue笔记2

计算属性缓存（computed） vs 方法函数（method）计算属性有缓存，如果刷新不改变数据就能直接调用，而方法必须重新运行。监听属性var vm = new Vue({ el:' ', data: { message:'信息' }, watch: { 监听的数据名:function(){ //对应数据变化时...

2018-07-15 11:46:17 91

转载 AJAX

1:什么是ajax？ajax作用是什么？异步的javascript和xml AJAX 是一种用于创建快速动态网页的技术。 ajax用来与后台交互2:原生js ajax请求有几个步骤？分别是什么//第一个步骤：创建 XMLHttpRequest 对象var ajax = new XMLHttpRequest();//第二个步骤：规定请求的类型、URL 以及是否异步处理...

2018-07-04 17:28:09 132

原创 Git

Git安装步骤以及命令下载安装：直接从官网下载，有时候太慢是因为用的国外镜像，所以我们可以使用国内镜像安装完成后，还需要最后一步设置，在命令行输入：$ git config --global user.name "Your Name"$ git config --global user.email "email@example.com"使用提交$ git add 文件名(如果是.就是默认提交所有...

2018-07-03 20:46:03 116

空空如也

空空如也