风不识途

风不识途 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑

学习前端

个人动态

风不识途 发布了文章 · 10月17日

Vue.js基础知识点总结

Vue基础

Vue.js

邂逅Vuejs

1.认识Vuejs

  • Vue是一个<font color='red'>渐进式框架</font>, 什么是渐进式的呢?

    • 声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建
    • 渐进式意味着你可以将Vue作为你<font color='red'>应用的一部分</font>嵌入其中,带来更丰富的交互体验。
  • Vue有很多特点和Web开发中常见的高级功能

    • 解耦视图和数据
    • 可复用的组件
    • 前端路由技术
    • 状态管理
    • 虚拟DOM

2.Vue初体验

image-20200510173726520

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1、导入Vue的包-->
    <script data-original="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
    <!--这个div区域就是MVVM中的 View-->
    <div id="app">
        {{message}}
    </div>
</body>
<script>
    // 2、创建一个Vue的实例
    var app = new Vue({
        el: '#app', //用于挂载要管理的元素
        data: {// 定义数据
            message: '学习Vue.js'
        }
    });
</script>
</html>

3.Vue中的MVVM

  • View层

    • <font color='red'>视图层</font>
    • 前端开发中, 通常就是DOM层
    • 主要的作用是给用户展示各种信息
  • Model层

    • <font color='red'>数据层</font>
    • 数据可能是我们固定的死数据, 更多的是来自我们的服务器, 从网络上请求下来的数据
  • VueModel层

    • <font color='red'>视图模型层</font>
    • 视图模型层是View和Model沟通的桥梁
    • 一方面它实现了 Data binding, 也就是数据绑定, 将Model的改变实时的反应到了View中
    • 另一方面它实现了DOM Listener,也就是DOM监听,当DOM发生一些事件(点击、滚动、touch等)时,可以监听到,并在需要的情况下改变对应的Data。

4.Vue实例传入的options

  • 目前掌握
属性名类型作用
el类型: string,HTMLElement决定Vue实例会管理哪一个DOM
data类型: Object Function (组件当中data必须是一个函数)Vue实例对应的数据对象
methods类型: { [key: string]: Function }定义属于Vue的一些方法, 可以再其他地方调用, 也可以在指令中使用

5.Vue生命周期

插值指令

1.Mustache

  • 插值表达式 {{}}

数据绑定最常见的形式就是使用 “Mustache” 语法(双大括号)的文本插值。例如:

<span>Message: {{ msg }}</span>

Mustache 标签将会被替代为对应数据对象上 msg 属性(msg定义在data对象中)的值。

无论何时,绑定的数据对象上 msg 属性发生了改变,插值处的内容都会自动更新。

语法{{}}JavaScript 表达式支持
普通表达式{{ number + 1 }}
三元表达式{{ ok ? 'YES' : 'NO' }}
三元表达式{{ name == 'smyhvae' ? 'true' : 'false' }}
调用方法{{ message.split('').reverse().join('') }}

2.v-once

该指令后面不需要跟任何表达
该指令表示元素<font color='red'>只渲染一次</font>,不会随着数据的改变而改变。
<h2 v-once>{{message}}</h2>

3.v-html

解析<font color='red'>数据中的html</font>代码,渲染到页面中
<h2 v-html="url"></h2>

4.v-text

v-text作用和Mustache比较相似:都是用于将<font color='red'>数据显示在界面</font>中, 不同的是 v-text 是写在属性中
v-text通常情况下,接收一个string类型
<h2 v-text="text"></h2>

5.v-pre

v-pre用于跳过这个元素和它子元素的编译过程,用于<font color='red'>显示原本的Mustache</font>语法。
<h2 v-pre>{{message}}</h2>

6.v-cloak

在某些情况下,我们浏览器可能会直接显然出未编译的Mustache标签。
v-cloak指令和CSS 规则一起用的时候,能够解决插值表达式闪烁的问题(即:可以隐藏未编译的标签直到实例准备完毕)
<!-- 在vue解析之前, div中有一个属性v-cloak
在vue解析之后, div中没有一个属性v-cloak -->
<div id="app" v-cloak>
  <h2>{{message}}</h2>
</div>

总结

  • Mustache: {{}}语法, 可以写变量/逻辑表达式/计算值...
  • v-once : 元素只渲染一次,不会随着数据的改变而改变。
  • v-html="" : 解析数据中的html代码,渲染到页面中
  • v-text="msg": 写在属性当中, 将数据显示在界面中
  • v-pre: 原文输出, 显示原本的Mustache语法
  • v-cloak : 一般配合CSS规则一起使用, 够解决插值表达式闪烁的问题

v-bind绑定属性

1.v-bind介绍

  • 前面我们学习的指令主要作用是将值插入到我们<font color='red'>模板的内容</font>当中。
  • 但是,除了内容需要动态来决定外,某些<font color='red'>属性</font>们也希望动态来绑定。
  • 作用:可以给html元素或者组件动态地绑定一个或多个特性,例如动态绑定styleclass

    • 比如动态绑定a元素的href属性
    • 比如动态绑定img元素的src属性
  • 这个时候,我们可以使用v-bind指令:

    • 作用:动态绑定属性
    • 缩写 :
    • 预期:any (with argument) | Object (without argument)
    • 参数:attrOrProp (optional)

2.v-bind绑定class

绑定class有两种方式

  • 对象语法
  • 数组语法
  • 对象语法

    • 对象语法的含义是:class后面跟的是一个<font color='red'>对象</font>。
    <!-- 用法一:直接通过{}绑定一个类 -->
<h2 :class="{'active': isActive}">Hello World</h2>

    <!-- 用法二:也可以通过判断,传入多个值 -->
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>

    <!-- 用法三:和普通的类同时存在,并不冲突 -->
<!--注:如果isActive和isLine都为true,那么会有title/active/line三个类-->
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>

    <!-- 用法四:如果过于复杂,可以放在一个methods或者computed中 -->
    <!--注:classes是一个计算属性 -->
<h2 class="title" :class="classes">Hello World</h2>
  • 数组语法

    • 数组语法的含义是:class后面跟的是一个<font color='red'>数组</font>。
    <!-- 1. ['active','news'] 当字符串使用 -->
<h2 class="title" :class="['active','news']">{{message}}</h2>
    <!-- [active, new] 当变量使用 -->
<h2 class="title" :class="[active,news]">{{message}}</h2>
    <!-- 3. 函数返回值使用 -->
<h2 class="title" :class="getClasses()">{{message}}</h2>

3.v-bind绑定style

  • 我们可以利用v-bind:style来绑定一些CSS内联样式
  • 绑定class有两种方式

    • 对象语法
    • 数组语法
  • 对象语法

    • style后面跟的是一个对象类型
    • 对象的key是css属性名
    • 对象的value是具体赋的值, 可以来自data中的属性
:style="{color: currentColor, fontSize: fontSize + 'px'}" 
  • 数组语法

    • style后面跟的是一个数组类型, 多个值以 , 分隔
<div v-bind:style="[baseStyles, fontColor]"></div>
/* js */
baseStyle: {background: 'lime'},
fontSize: {fontSize: '80px'}

computed计算属性

1.基本概念

  • 计算属性出现的目的是<font color='red'>解决模板中放入过多的逻辑</font>会让模板过重且难以维护的问题
  • 计算属性是基于它们的响应式<font color='red'>依赖进行缓存</font>的
  • 在某些情况,我们可能需要对数据进行一些转化后再显示,或者需要将多个数据结合起来进行显示

    • 比如我们有firstNamelastName两个变量,我们需要显示完整的名称。
    • 但是如果多个地方都需要显示完整的名称,我们就需要写多个{{firstName}} {{lastName}}
  • 将上面代码转换成计算属性

    /* html */ 
    <h2>{{fullNmae}}</h2>
    
    /* js */
    computed: {
        fullNmae: function () {
          return this.firstNmae + ' ' + this.lastNmae;
        }
      }

2.计算属性的setter和getter

  • 每个计算属性都包含一个getter和一个setter

    • 在上面的例子中,我们只是使用getter来读取。
    • 在某些情况下,你也可以提供一个setter方法(不常用)。
    • 在需要写setter的时候,代码如下:

3.计算属性的缓存

  • methods和computed区别

    • methods里面的数据不管发没发生变化, 只要调用了都会执行函数(有的时候数据没发生变化我们不希望调用函数)
    • computed计算属性会进行缓存, 如果数据没发生变化,函数只会被调用一次(数据发生变化才会调用函数)
  • 总结:

    • methods不管数据发没发生变化都会调用函数
    • computed只有在依赖数据发生变化时才回调函数

事件监听指令

  • 在前端开发中,我们需要经常和用户交互

    • 这个时候我们就必须监听用户的发生时间,比如点击, 拖拽事件等等
  • v-on 介绍

    • 作用: 绑定事件监听器
    • 缩写: @

1.v-on参数

  • methods中定义方法, 以供@click调用时, 需要注意参数问题
  • 情况一: 如果该方法不需要额外参数, 方法后()可以省略

    • 没有传入参数, 接收形参时默认会将原生事件event参数传递进去
  • 情况二: 如果需要同时传入某个参数, 同时需要event时, 可以通过$event传入事件

2.v-on修饰符

  • v-on 提供了很多事件修饰符来辅助实现一些功能。事件修饰符有如下
修饰符作用
.stop阻止冒泡。本质是调用 event.stopPropagation()
.prevent阻止默认事件行为 本质是调用 event.preventDefault()
.{keyCode \keyAlias }当事件是从特定键触发时才触发回调
.once事件只触发一次

条件渲染指令

1.vi-f与v-else-if与v-else

  • Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件
<h2 v-if="score>=90">优秀</h2>
    <h2 v-else-if="score>=80">良好</h2>
    <h2 v-else-if="score>=60">及格</h2>
    <h2 v-else>不及格</h2>
  • 逻辑较多不建议在模板中使用v-if-else-if

2.复用元素渲染问题

一个问题: 涉及到了Vue底层, 虚拟DOM virtual DOM
点击切换表单后,input的value值并没有被清空,为什么?
  • 引出: 当实现点击按钮切换input表单时, 我们输入上的value, 点击按钮切换表单时会发现value值还存在, 但是input元素确实切换了, 这是因为什么呢?
<span v-if="isUser">
      <label for="user">用户名</label>
      <input type="text" placeholder="用户名" id="user" key="user">
</span>
<span v-else>
      <label for="email">邮箱</label>
      <input type="text" placeholder="邮箱" id="email" key="email">
</span>
<button @click="isUser=!isUser">切换类型</button>
<script> 
const app = new Vue({
  el: '#app',
  data: {
     isUser: true
  }
})
</script>
  • 原因:

    • 1.这是因为Vue在进行DOM渲染时, 出于性能考虑, 会尽可能服复用已经存在的元素, 而不是创建新的元素
    • 2.上面的案例中, Vue内部会进行对比发现两部分都相似只会替换属性, 不会给你创建全新的元素
    • 3.上面 if 的 input不再使用, 直接作为 else 的 input来使用
  • 解决方案

    • 1.如果我们不希望 Vue出现类似重复利用的问题, 可以给对应的 input 添加 key
    • 2.并且保证要们需要的key不同, 这样 vue就会创建一个全新 input元素

3.v-show

v-show的用法和v-if非常相似,也用于决定一个元素是否渲染
  • v-if 和 v-show对比

    • v-if 当条件为false时,压根不会有对应的元素在DOM中
    • v-show 当条件为false时, 仅仅是将元素的 display 属性设置 none 而已
  • 开发中如何选择呢?

    • 当需要在显示与隐藏之间切换很频繁时,使用v-show
    • 当只有一次切换时,通过使用v-if
<h2 v-show="isShow">{{message}}</h2>

循环遍历指令

1.v-for遍历数组

  • 作用:根据数组中的元素遍历指定模板内容生成内容。
  • 语法: v-for="(item, index) in items"
<ul>
    <!-- item: 是每一项元素    index: 下标/索引 -->
    <li v-for="(item, index) in name">
      {{index+1}}.{{item}}
    </li>
 </ul>

2.v-for遍历对象

  • 作用: 遍历对象
  • 语法: v-for="(value, key, index) in items"
<ul>
    <!-- value:属性值  key:属性名  index:下标/索引 -->
    <li v-for="(value, key, index) in info">
      {{index+1}}.{{value}}
    </li>
 </ul>

3.Vue中Key属性

  • 官方推荐我们在使用v-for时,给对应的元素或组件添加上一个:key属性。
  • 为什么需要这个key属性呢(了解) ?

    • 这个其实和Vue的虚拟DOM的Diff算法有关系。
  • 当某一层有很多相同的节点时,也就是列表节点时,我们希望插入一个新的节点

    • 我们希望可以在B和C之间加一个F,Diff算法默认执行起来是这样的。
    • 即把C更新成F,D更新成C,E更新成D,最后再插入E,是不是很没有效率?
  • 所以我们需要使用key来给每个节点做一个唯一标识

    • Diff算法就可以正确的识别此节点
    • 找到正确的位置区插入新的节点
  • <font color='red'>key的作用主要是为了高效的更新虚拟DOM</font>

image-20200505214434701

使用v-for更新已渲染的元素列表时,默认用<font color='red'>就地复用</font>策略; 如果列表数据修改的时候, 它会根据key值去判断某个值是否修改, 如果修改, 则重新渲染这一项, 否则复用之前的元素; 我们在使用的使用经常会使用index(即数组的下标)来作为key,但其实这是不推荐的一种使用方法;

4.数组响应式方法

  • 因为Vue是响应式的, 所以当数据发生变化时, Vue会自动检测数据变化, 视图会对应的更新
  • Vue中包含了一组观察数组编译的方法, 使它们改变数组也会触发更新视图

    • push()
    • pop()
    • shift()
    • unshift()
    • splice()
    • sort()
    • reverse()

5.Vue.set修改响应式数据

  • Vue.set(vm.items, indexOftem, newValue)
  • vm.$set(vm.items ,indexOften,newValue)

    • 参数1: 要修改的数组/对象
    • 参数2: 要设置的索引/添加的属性名
    • 参数3: 设置的值

6.v-if 和 v-for

当它们处于同一节点,v-for 的优先级比 v-if 更高,这意味着

v-if 将分别重复运行于每个v-for循环中。

避免 v-ifv-for用在一起

  • 原因

    • 如果使用了 if 判断, 每次渲染在Vue内部都会遍历整个列表, 不论判断条件是否发生了变化
  • 使用计算属性的好处

    • 1.过滤后的列表只会在users数组发生相关变化时才被重新运算,过滤更高效。
    • 2.使用v-for="user in activeusers"之后,我们在渲染
    • 3.的时候只遍历活跃用户,渲染更高效。
    • 4.解耦渲染层的逻辑,可维护性(对逻辑的更改和扩展)更强。
    • 详细讲解

表单绑定v-model

1.基本概念

  • Vue中使用v-model指令来实现表单元素和<font color='red'>数据的双向绑定</font>

    • 数据与模板是相互影响的, 一方发生变化, 另一方立即做出更新
  • 引出:

    • 在之前的案例, 我们通过v-bind,给<input>标签绑定了data对象里的name属性。data中的name的值发生改变时, <input>标签里的内容会自动更新。
    • 可现在要做的是: 在<input>标签里修改内容, 要求data中的name的属性值自动更新。从而实现<font color='red'>双向数据绑定</font>。该怎么做呢? 这就可以利用v-model这个属性。

image-20200510174213506

  • 区别:

    • v-bind: 只能实现数据的单向绑定, 从M自动绑定到v。
    • v-model: 只有v-model才能实现双向数据绑定。注意, v-model后面不需要跟冒号
  • 注意

    • v-model只能运用在表单元素中, 或者用于自定义组件。常见的表单元素包括: input(radio,text,address,email...) ,select, checkbox, textarea.

2.v-model原理

  • v-model其实是一个语法糖, 他背后本质是包含两个操作

    • v-bind绑定一个value属性
    • v-on指令绑定当前元素的input事件
  • 也就是说下面的代码:等同于下面的代码:
<input type="text" v-model="message">
<!-- 等同于下面的代码 -->
<input type="text" :value="message" @input="message = $event.target.value">

3.表单绑定v-model

  • Vue中使用v-model指令来实现表单元素和数据的双向绑定
  • 案例解析:

    • 当我们在数据框输入内容时
    • 因为input中v-model绑定了message, 所以会实时将输入的内容传递给message, message发生变化
    • 当message发生变化时, 因为上面我们使用Mustanche语法, 将message的值插入到DOM中, 所以DOM会发生响应式的改变
    • 所以, 通过v-model实现了双向的绑定
  • 当然, 我们可以将v-model用于textarea元素

4.表单中其它类型绑定v-model

  • 表单中其它类型, 绑定v-model
表单类型单选/多选情况绑定的值
v-model: radio多个单选框时绑定的值是value
v-model: checkbox单个勾选框v-model即为布尔值
多个复选框选中多个, 对应的data属性是一个数组
v-model: select单选v-model绑定的是一个
多选v-model绑定的是一个数组



5.值绑定

  • 动态的给value赋值而已

    • 我们前面之前写的value中的值, 都是在定义input中直接给定的
    • 但是真是开发中, 这些input中的value值可能是从服务器中获取, 然后定义的
    • 所以我们可以通过v-bind:value动态的给value绑定值

5.v-model的修饰符

修饰符作用
.lazy当表单失去焦点或按下回车时,data中的数据才会更新
.number输入的内容转换为number数据类型
.trim过滤内容的两侧空格

Vue常用特性

1.自定义指令

  • 为何需要自定义指令

    • 内置指令不满足需求

Vue.directive 注册全局指令

  • 自定义指令语法(获取焦点)
Vue.directive('focus', {
  inserted: function (el) {
    el.focus()// 获取元素的焦点
  }
})
// 使用自定义指令
<input type="text" v-focus>
  • 带参数的自定义指令
Vue.directive('color', {
      // bind声明周期, 只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
      // el 为当前自定义指令的DOM元素  
      // binding 为自定义的函数形参   通过自定义属性传递过来的值 存在 binding.value 里面
      bind: function(el, binding){
        // 根据指令的参数设置背景色
        // console.log(binding.value.color)
        el.style.backgroundColor = binding.value.color;
      }
    });
// 使用带参数自定义指令
<input type="text" v-color='msg'>

自定义局部指令

  • 局部指令,需要定义在 directives 的选项 用法和全局用法一样
  • 局部指令只能在当前组件里面使用
  • 当全局指令和局部指令同名时以局部指令为准
directives: {
    focus: {
        inserted: function(el) {
            el.focus();
        }
    }
}

2.侦听器 watch

  • 侦听器的应用场景

    • 数据变化时执行异步开销较大的操作

image-20200511180435528

  • 注意: watch 中的属性 一定是data 中 已经存在的数据
// 当data中的: firstName属性或lastNames属性改变时, 会自动触发对应的watch
watch: {
     firstName(val) { // val: 表示变化后的值
       this.fullName = val + ' ' + this.lastName;
     },
     lastName(val) {
       this.fullName = this.firstName + ' ' + val;
     }
  }

3.过滤器

  • 概念: Vue.js允许我们自定义过滤器,可被用作一些常见的文本格式化/处理
  • 过滤器可以用在两个地方: mustache插值表达式、v-bind表达式。
  • 过滤器应该被添加在JavaScript表达式的尾部,由“管道”符指示。
  • 过滤器不改变真正的data,而只是改变渲染的结果,并返回过滤后的版本

image-20200511204822969

  • 全局注册时是filter,没有s的。而局部过滤器是filters,是有s的
  • 支持级联操作(对前一个过滤的数据再次进行过滤处理)

自定义全局过滤器

  • 我们可以用全局方法Vue.filter()自定义一个全局过滤器。这样的话,每一个Vue的对象实例(每一个VM实例)都可以拿到这个过滤器。它接收两个参数: 过滤器的名称过滤器函数
<div>{{msg | upper}}</div>
<div>{{msg | upper | lower}}</div>
<div :class="msg | upper"></div>
<!-- 带参数过滤 -->
<div>{{date | format('yyyy-MM-dd')}}</div>
<script>
     // 1.全局过滤器
    Vue.filter('upper', (val) => {
        // val就是要处理的数据
      return val.charAt(0).toUpperCase() + val.slice(1);
    })
    // 2.处理带参数过滤器
    Vue.filter('format', (date, arg) => {
      // arg: 传递的参数
      if (arg === 'yyyy-MM-dd') {
        return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
      }
    })
</script>

自定义私有过滤器

  • 私有过滤器: 在某一个vue对象内部定义的过滤器称之为私有过滤器
  • 这种过滤器只有在当前vue对象el指定的监管区域有用。
<!-- 管道符前面的price: 要把price这段文本进行过滤 -->
<!-- 管道符后面的showPrice: 是通过showPrice这个过滤器来进行操作 -->
<td>{{price | showPrice}}</td>
<script>
const app = new Vue({
  filters: {
    showPrice(price) {
      return '¥' + price.toFixed(2);
    }
  }
})
</script>

4.生命周期

  • 事物从出生到死亡的过程
  • Vue实例从创建到销毁的过程,这些过程中会伴随着一些函数的自调用。我们称这些函数为钩子函数
  • 主要阶段
  • 挂载(初始化相关属性)

    • beforeCreate
    • created
    • beforeMount
    • mounted
  • 更新(元素或组建的变更操作)

    • beforeUpdate
    • updated
  • 销毁(销毁相关属性)

    • beforeDestroy
    • destroyed
钩子函数过程
beforeCreate在实例初始化之后, 数据观测和事件配置之前被调用此时data和methods以及页面的DOM结构都没有初始化什么都做不了
created在实例创建完成后被立即调用此时data 和 methods已经可以使用但是页面还没有渲染出来
beforeMount在挂载开始之前被调用此时页面上还看不到真实数据只是一个模板页面而已
moutedel被新创建的vm.$el替换, 并挂载到实例上去之后调用该钩子。数据已经真实渲染到页面上在这个钩子函数里面我们可以使用一些第三方的插件
beforeUpdate数据更新时调用,发生在虚拟DOM打补丁之前。 页面上数据还是旧的
update由于数据更改导致的虚拟DOM重新渲染和打补丁, 在这之后会调用该钩子。页面上数据已经替换成最新的
beforeDestroy实例销毁之前调用
destroyed实例销毁后调用
查看原文

赞 1 收藏 1 评论 0

风不识途 发布了文章 · 9月29日

从零带你从阿里云ESC服务器部署网站(学生机)

阿里云ESC服务器部署网站

前言

本篇文章,将会带你把网站部署到window server 2008R2服务器上,可以使用公网IP进行访问该网站

<br/>

一.环境搭建

1.购买学生机(ESC服务器)

  • 学生机购买网址
  • 步骤:

    1. 选择云服务器ECS;
    2. 选择对应的操作系统
    3. 选择地域(选择距离自己位置近的地域,学生可选地域目前只有华南、华东、华北) :
    4. 选择购买时长, 全部选择完毕后,我们就可以选择立即购买了。

2.远程主机配置

  1. 购买完成后点击这里的ECS服务器

  1. 进入后点击实例,看到远程连接,点击远程连接进去:

  1. VNC远程连接

  1. 远程连接密码

  1. 出现如下界面就算是完成:

3.进入远程桌面

  1. 点击重置密码:这里的密码指的是使用本地电脑远程桌面连接服务器的较长密码;

  1. 输入刚才修改的密码, 进入远程桌面

4.更改window镜像

  1. 将镜像文件更改为: window server 2008 R2

5.配置安全组

  • 回到云服务器ECS->实例,点击更多->点击 网络和安全组->点击安全组配置
  1. 我们只需要配置内网入方向全部规则,我这里的配置仅供大家参考,阿里有自己的安全措施,防止外来信息进行非法访问所以设置了安全组,为了安全考虑端口不宜开放太多。

  • 确认之后选中实例然后重启实例,方可生效。
    以上完成服务器参数相关配置

<br/><br/>

二.使用本地电脑远程连接服务器

1.连接远程服务器

  1. Window+R -> 输入mstsc 回车,来到这个界面输入我们购买的云服务器的外网ip(123.57.176.198) 由于我们需要在远程主机上从我们本地拷贝相关文件,因此需将本地某个盘共享到远程服务器中具体操作如下:

  1. 勾选如下配置参数

  1. 如下勾选, 用于在远程电脑中使用的本台计算机上的设备和资源。

  1. 确定后点击链接用户名为Administrator,密码为之前设置的复杂密码(即之前点击重置密码时设置的密码) 点击确定进入远程主机界面。(注意用户名区分大小写)

2.远程连接成功

进入如下图, 证明你远程连接主机成功

但请最后把刚才的一系列密码保存, 防止忘记或串联

<br/><br/>

三.配置IIS服务器

1.安装IIS服务器

2.index.html

  • C盘新建一个文件夹, 文件夹中存放公网IP访问的网站, 也就是 index.html 文件

    • 可以先随便编写一个

3.添加配置站点

4.公网+端口访问网站

这样就能在浏览器上输入我们的公网Ip+端口访问我们的网站了: http://123.57.176.198:80
查看原文

赞 0 收藏 0 评论 0

风不识途 关注了用户 · 9月27日

Pines_Cheng @pines_cheng

不挑食的程序员,关注前端四化建设。

关注 283

风不识途 关注了专栏 · 9月27日

不挑食的程序员

Pines_Cheng的博客,不挑食的程序员,关注前端四化建设。

关注 884

风不识途 关注了用户 · 9月8日

ssh_晨曦时梦见兮 @chenshimengjian

关注 39

风不识途 发布了文章 · 9月2日

React基础语法总结

React基础语法

React介绍

1.React是什么?

  • React 是由 Facebook 开源的一个JS 库
  • 官方解释: React 是一个声明式,高效且灵活的用于构建用户界面的 JavaScript 库

<br/>

2.React的特点(了解)

声明式编程

  • 什么是声明式编程:

    • 它描述目标的性质,让电脑明白目标,而非流程
    • 声明式编程是告诉计算机需要计算 “什么” 而不是 “如何” 去计算
  • 前端开发模式:

    • 声明式编程是目前整个大前端开发的模式:Vue、React、Flutter、SwiftUI
    • 它允许我们只需要维护自己的状态
    • 当状态改变时,React可以根据最新的状态去渲染我们的UI界面

组件化开发

  • 组件是 React 中重要思想

    • 它提供了一种抽象, 我们可以开发出一个独立可复用的小组件来构造我们的应用
  • 组件化思想应用

    • 有了组件化的思想,尽可能将页面拆分成一个个小的,可复用的组件
    • 这样让我们代码更方便组织和管理,并且扩展性也强

多平台适配

  • 2013年,React发布之初主要是开发Web页面;
  • 2015年,Facebook推出了ReactNative,用于开发移动端跨平台;(虽然目前Flutter非常火爆,但是还是有很多公司在使用 ReactNative);
  • 2017年,Facebook推出ReactVR,用于开发虚拟现实Web应用程序;(随着5G的普及,VR也会是一个火爆的应用场景

<br/>

3.React开发依赖

  • 开发 React 必须依赖这三个库:

    • react: 包含 react 所必须的核心代码
    • react-dom: react渲染不同平台所需要的核心代码
    • babel: 将 jsx 转换成React代码工具
  • React为什么要依赖这三个库:

    • 其实, 这三个库式各司其职, 目就是让每一个库单纯做自己的事情
    • 为什么要进行拆分呢?
    • react中包含了 react 和 react-native 所共同拥有的核心代码
  • react-dom针对 web 和 native 所完成的事情不同:

    • web端:react-dom会将 jsx 最终渲染成真实的DOM, 显示在浏览器中
    • native端:react-dom会将 jsx 最终渲染成原生的控件 (比如Android中的Butto, iOS中的UIButton)

<br/>

4.认识Bable

  • babel是什么:

    • 是目前前端使用非常广泛的编译器转码器
    • 可以将ES6代码转为ES5代码,从而在现有环境执行
  • ReactBabel的关系:

    • 默认情况下 React 其实可以不用 babel
    • 但前提是我们使用 React.createElement 来编写源代码, 它编写的代码非常繁琐可读性差
    • 我们就可以直接编写jsx(JavaScript XML)的语法,并且让babel帮助我们转换成React.createElement

<br/>

5.引入React依赖

  • 如何添加这三个依赖:

    • 方式一:直接CDN引入
    • 方式二:下载后,添加本地依赖
    • 方式三:通过npm管理
  • 暂时我们直接通过CDN引入
<script data-original="https://unpkg.com/react@16/umd/react.development.js" ></script>
<script data-original="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script data-original="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<br/>

React初体验

1.React基本使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React初体验</title>
</head>
<body>
  <div id="app"></div>
  <!-- 添加React的依赖 -->
  <script data-original="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script data-original="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script data-original="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <!-- 注意事项: 使用jsx,并且希望script中的jsx代码被解析,必须在script标签中添加type属性 -->
  <script type="text/babel">
    // <h2></h2>: jsx代码
    ReactDOM.render(<h2>Hello World</h2>, document.getElementById('app'))
  </script>
</body>
</html>
  • React.render函数

    • 参数一: 要渲染的内容, 可以是HTML元素, 也可以是React的组件
    • 参数二: 将渲染的内容, 挂载到哪一个HTML元素上
  • 我们可以通过 {} 语法来引入外部的变量或者表达式

<br/>

2.React初体验组件化开发

  • 整个逻辑其实可以看做一个整体,那么我们就可以将其封装成一个组件:

    • 我们说过 ReactDOM.render 第一参数是一个HTML元素或者一个组件
    • 所以我们可以先将之前的业务逻辑封装到一个组件中,然后传入到 ReactDOM.render 函数中的第一个参数
  • React中, 如何封装一个组件呢?
  • 这里暂时使用的方式封装组件:

    • 定义一个类 (类名大写, 组件的名称是必须大写的, 小写会被认为是HTML元素),继承自React.Component
    • 实现当前组件的render函数

      • render当中返回的 jsx 内容,就是之后React会帮助我们渲染的内容

<details><summary>图示</summary><pre><img data-original="https://gitee.com/xmkm/cloudPic/raw/master/img/20200819125150.png" /></pre></details>

//封装APP组件
class App extends React.Component
  render(){
   return (
    <div>hello</div>
  }
// 渲染组件
ReactDOM.render(<App/>, document.getElementById ('app'))

<br/>

3.组件化-数据依赖

  • 在组件中的数据,我们可以分成两类:

    • 参与界面更新的数据:当数据变量时,需要更新组件渲染的内容
    • 不参与界面更新的数据:当数据变量时,不需要更新将组建渲染的内容
  • 参与界面更新的数据,是定义在当前对象的 state 属性中

    • 我们通过在构造函数中: this.state = {定义的数据}
    • 当我们的数据发生变化时,我们调用 this.setState更新数据,并且通知React进行update操作

      • 在进行update操作时,就会重新调用render函数, 并且使用最新的数据,来渲染界面

<details><summary>图示</summary><img data-original="https://gitee.com/xmkm/cloudPic/raw/master/img/20200819125220.png" /></details>

// 封装APP组件
class App extends React.Component
  constructor() {
    super()
   // 定义数据
    this.state = {message: 'hello world'}
    // 使用数据  
    render() {
      return (
        <div>
          <h2x{this.state.message}</h2>
        </div> 
    )}
}

<br/>

4.组件化-事件绑定

  • React中事件绑定: 在标签中定义 on + 事件名

    • 例如: <button onClick={this.changeText}>改变文本</button>
  • 当前这个函数的this指向的是谁呢?

    • 默认情况下是 undefined
    • 这次因为React并不是直接渲染成真实的DOM, 我们所编写的button只是一个语法糖, 它的本质React的Element对象
    • 那么在这里发生监听的时候,react给我们的函数绑定的this默认情况下就是一个undefined
  • 我们在绑定的函数中,可能想要使用当前对象,比如执行 this.setState 函数,就必须拿到当前对象的this

    • 我们就需要在调用函数时,给这个函数直接绑定this
    • <button onClick={this.changeText.bind(this)}>改变文本</button>

<br/>

React基础语法

1.认识JSX

  • 这段element变量的声明右侧赋值的标签语法是什么呢?

    • 我们在 JS 中不能给一个变量赋值为HTML元素
    • 如果将 type="text/babel"去掉, 会语法报错, 其实它是一段 jsx语法
  • JSX是什么?

    • JSX是一种JavaScript的语法扩展(eXtension), 也在很多地方称之为JavaScript XML
    • 用于描述我们的UI界面,并且其完成可以和JavaScript融合在一起使用
    • 它不同于Vue中的模块语法, 你不需要专门学习模块语法中的一些指令 (比如v-for、v-if、v-else、v-bind)

<br/>

2.React为什么选择JSX

  • React认为渲染逻辑本质上与其他UI逻辑存在内在耦合

    • 比如UI需要绑定事件(button、a原生等等)
    • 比如UI中需要展示数据状态,在某些状态发生改变时,又需要改变UI
    • 他们之间是密不可分,所以React没有讲标记分离到不同的文件中
    • 而是将它们组合到了一起,这个地方就是组件(Component)
  • JSX的书写规范:

    • JSX的顶层只能有一个根元素
    • 我们通常在 jsx 的外层包裹一个小括号(),这样可以方便阅读
    • 注意:如果是单标签,必须以/>结尾

<br/>

3.JSX的使用

  • JSX中的注释: { / JSX中的注释 / }
  • JSX中嵌入变量

    • 情况一: 当变量是Number、 String、 Array 类型是, 可以直接显示
    • 情况二: 当变量是null、undefined、Boolean类型时,内容为

      • 如果希望显示null、undefined、Boolean,可以转换为字符串
      • 方式有很多,比如:toString方法、和 空字符串拼接 等等
    • 情况三:对象类型不能作为子元素(not valid as a React child)
  • <details>
    <summary>JSX嵌入表达式</summary>
    <li>运算表达式</li>
    <li>三元运算符</li>
    <li>调用函数</li>
    </details>

1.认识JSX

  • 这段element变量的声明右侧赋值的标签语法是什么呢?

    • 我们在 JS 中不能给一个变量赋值为HTML元素
    • 如果将 type="text/babel"去掉, 会语法报错, 其实它是一段 jsx 的语法
  • JSX是什么?

    • JSX是一种JavaScript的语法扩展(eXtension), 也在很多地方称之为JavaScript XML
    • 用于描述我们的UI界面,并且其完成可以和JavaScript融合在一起使用
    • 它不同于Vue中的模块语法, 你不需要专门学习模块语法中的一些指令 (比如v-for、v-if、v-else、v-bind)

2.React为什么选择JSX

  • React认为渲染逻辑本质上与其他UI逻辑存在内在耦合

    • 比如UI需要绑定事件(button、a原生等等)
    • 比如UI中需要展示数据状态,在某些状态发生改变时,又需要改变UI
    • 他们之间是密不可分,所以React没有将标记分离到不同的文件中
    • 而是将它们组合到了一起,这个地方就是组件(Component)
  • JSX的书写规范:

    • JSX的顶层只能有一个根元素
    • 我们通常在 jsx 的外层包裹一个小括号(),这样可以方便阅读
    • 注意:如果是单标签,必须/>结尾

3.JSX的使用

  • JSX中的注释: { /* JSX中的注释 */ }
  • JSX中嵌入变量

    • 情况一: 当变量是Number、 String、 Array 类型是, 可以直接显示
    • 情况二: 当变量是null、undefined、Boolean类型时,内容为

      • 如果希望显示null、undefined、Boolean,可以转换为字符串
      • 方式有很多,比如:toString方法、和 空字符串拼接 等等
    • 情况三:对象类型不能作为子元素(not valid as a React child)
  • JSX嵌入表达式

React绑定属性

1.绑定普通属性

  • 例如: <h2 title={title}>绑定普通属性</h2>

2.绑定class

  • 注意事项: 在JSX中使用 className 来绑定class
  • 例如: <div className="aa">使用className来绑定class</div>

3.绑定style

  • 注意事项:里面层需要再包裹一对大括号
  • 例如: div style={{ color: 'red'}}>绑定style</div>

React事件绑定

1.React事件绑定

  • React 中监听事件

    • React 事件的命名采用小驼峰式 (camelCase),而不是纯小写
    • 我们需要通过{}传入一个事件处理函数,这个函数会在事件发生时被执行

2.this的绑定问题

  • 在事件执行后, 我们可能需要获取当前类中对象的相关属性, 这个时候需要用this

    • 如果函数事件处理函数中打印 this , 会发现是 undefined
  • 为什么是undefined呢?

    • 原因是 btnClick 函数并不是我们主动调用的, 而且当button触发点击事件时, React内部调用了 btnClick 函数
    • 而它内部调用时, 并不知道如何绑定正确的this
  • 如何解决:

    • 方案一: bindbtnClick显示绑定this
    • 方案二: 使用 ES6 class fields 语法
    • 方案三: 事件监听时传入箭头函数(推荐)

3.事件参数传递

  • 情况一: 获取 event 对象

    • 如果没有传递参数,默认参数是: event 事件参数对象
  • 情况二: 获取 event 对象 和 更多参数

    • 有更多参数时,我们最好的方式就是传入一个箭头函数
    • 主动调用事件函数,并且传入相关的其他参数

补充两个知识点

  • 一: 箭头函数永远不会绑定this
  • 即使使用 callapply 绑定 this 了 ,箭头函数绑定的 this 不会生效

    • 箭头函数中this依然是: 最近作用域中的 this
  • 二: bind绑定的 this 优先级比 apply 或 call 要高

    • 即使是后面通过applycall绑定this也不会生效, 依然是bind绑定的this

React条件渲染

1.React条件渲染

某些情况下,界面的内容会根据不同的情况显示不同的内容,或者决定是否渲染某部分内容

在Vue中, 我们通过指令来控制比如: v-if、v-show

在React中,所有条件判断都和普通的 JavaScript 代码一致

  • 方式一:条件判断语法

    • 适合逻辑多的情况
  • 方式二:三元运算符

    • 适合逻辑比较简单
  • 逻辑与: 运算符&&

    • 适合如果条件成立,渲染某一个组件;如果条件不成立,什么内容也不渲染;
  • v-show的效果

    • 主要是控制display属性是否为none

2.React列表渲染

  • 真实开发中我们会从服务器请求到大量的数据,数据会以列表的形式存储
  • 在React中,展示列表最多的方式就是使用数组的 map高阶函数
  • 很多时候我们在展示一个数组中的数据之前,需要先对它进行一些处理

    • 比如过滤掉一些内容:filter函数
    • 比如截取数组中的一部分内容:slice函数

3.列表中的key

  • 我们会发现在前面的代码中只要展示列表都会警告:

  • 这个警告是告诉我们需要在列表展示的jsx中添加一个key.
  • 至于如何添加一个key,为什么要添加一个key,这个我们放到后面讲解setState时再来讨论

JSX的本质

1.JSX的本质

  • JSX 仅仅只是 React.creteElement(component, pops, ...children)函数的语法糖

    • 所有的 JSX 代码最终被转换成 React.createElement的函数调用
  • createElement需要传递三个参数:

    • 参数一: type

      • 当前 ReactElement 的类型
      • 如果是标签元素, 那么就使用字符串表示"diy"
      • 如果是组件元素, 那么就直接使用组件的名称
    • 参数二: config

      • 所有jsx中的属性都在 config 中以对象的属性和值的形式存储
    • 参数三: children

      • 存放在标签中的内容, 以 children 数组的方式进行存储

// jsx -> babel -> React.createElement()
// JSX最终会转换成 React.createElement(type, config, children)
const message = React.createElement("h2", null, "hello world")

ReactDOM.render(message, document.getElementById("app"))

2.Babel官网查看

  • 我们知道默认的 JSX 是通过 babel 帮我们进行语法转换的, 所以我们之前写的 JSX 代码都需要依赖 babel
  • 我们可以在bebel官网查看: JSX 转换成 React.creteElement 过程

下拉查看

Virtual DOM

1.虚拟DOM的创建过程

  • 我们通过 React.createElement 最终创建出来一个 ReactElement 对象
  • 这个ReactElement对象是什么作用呢?React为什么要创建它呢?

    • 原因是 React 利用 ReactElement 对象组成了一个 JavaScript的对象树
    • JavaScript的对象树就是虚拟DOM (Virtual DOM)
  • ReactElement 最终形成的树结构就是 Virtual DOM

2.JSX->VirtualDom->DOM

3.声明式编程

  • 虚拟DOM帮助我们从命令式编程转到了声明式编程的模式
  • React官方的说法: Virtual DOM 是一种编程理念

    • 在这个理念中,UI以一种理想化或者说虚拟化的方式保存在内存中,并且它是一个相对简单的JavaScript对象
    • 我们可以通过 ReactDOM.render 让 虚拟DOM 和 真实DOM同步起来,这个过程中叫做协调(Reconciliation)
  • 这种编程的方式赋予了React声明式的API:

    • 你只需要告诉React希望让UI是什么状态
    • React来确保DOM和这些状态是匹配的
    • 你不需要直接进行DOM操作,只可以从手动更改DOM、属性操作、事件处理中解放出来
查看原文

赞 0 收藏 0 评论 0

风不识途 收藏了文章 · 8月31日

值得关注的几个vscode配置和键绑定

正版起飞,jetbrains-agent宣布不再更新,万狗哀嚎。多年老vscode玩家再次回归

因为vscode的默认配置,导致现在用的不是很舒服,奋发图强,一番点睛查询试验过后,总结了以下能让你的vscode起飞的配置。

版本: 1.48.2

snippetsPreventQuickSuggestions

问题: 输入log按tab快速生成代码后,提示居然没了?
解决:

"editor.suggest.snippetsPreventQuickSuggestions": false,

wordSeparators

问题: 对于calendar-header这种中间是-的分隔符的className双击总是不能选中,只能选中一部分?

解决: 去掉 - 字符

"editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?"

quickSuggestionsDelay

问题: 这本来不是个问题,但是我记得以前是没这个配置的,导致我的vscode提示一直有延迟( 默认500 ),一直觉得vscode卡..
解决:

"editor.quickSuggestionsDelay": 0

cursorBlinking

问题: brackets默认就有的功能,让你的光标移动有个动画效果。
解决:

"editor.cursorSmoothCaretAnimation": true

acceptSuggestionOnCommitCharacter

问题:
image.png
这种情况,输入左括号,会成为这个样子
image.png
这肯定不是我想要的啊
解决:

"editor.acceptSuggestionOnCommitCharacter": false

formatOnPaste

问题: 粘贴代码之后, 又得重新格式化下代码。如果不想改动整个代码,还得选中粘贴的部分代码再手动格式化。
解决: 启用粘贴时自动格式化

editor.formatOnPaste: true

renderCharacters

问题: 只渲染小地图大概色块而不是具体字符, 感觉能提升性能。默认是渲染具体字符。~~~~
解决:

editor.minimap.renderCharacters: false

两个配置

记得第一次使用vscode的时候,那时候还没有UI设置编辑器...

workbench.settings.editor: 'json',
workbench.settings.useSplitJSON: true

自动行尾加逗号

一个插件: macros
一句配置:

"macros": {
        "comma": [ // 末尾加逗号并新加一行
            "cursorLineEnd",
            {
                "command": "type",
                "args": {
                    "text": ","
                }
            },
            "editor.action.insertLineAfter"
        ]
    }

一个快捷键:
image.png

自动插入右括号,右引号

平时好像也没有按了左括号不需要右括号的情况~~

"editor.autoClosingBrackets": "always",
"editor.autoClosingQuotes": "always",

自动被重命名

更新后的一个不爽的地方
image.png
首尾的两个标签创建时就会出现一片红色进行自动重命名,关键是这个空格居然也会被应用到尾标签!

  • 解决
editor.renameOnType: false

截屏模式

类似up颜色代码时显示按键和高亮鼠标的功能
搜索Screencast然后绑定快捷键:
image.png

查看原文

风不识途 赞了文章 · 8月31日

值得关注的几个vscode配置和键绑定

正版起飞,jetbrains-agent宣布不再更新,万狗哀嚎。多年老vscode玩家再次回归

因为vscode的默认配置,导致现在用的不是很舒服,奋发图强,一番点睛查询试验过后,总结了以下能让你的vscode起飞的配置。

版本: 1.48.2

snippetsPreventQuickSuggestions

问题: 输入log按tab快速生成代码后,提示居然没了?
解决:

"editor.suggest.snippetsPreventQuickSuggestions": false,

wordSeparators

问题: 对于calendar-header这种中间是-的分隔符的className双击总是不能选中,只能选中一部分?

解决: 去掉 - 字符

"editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?"

quickSuggestionsDelay

问题: 这本来不是个问题,但是我记得以前是没这个配置的,导致我的vscode提示一直有延迟( 默认500 ),一直觉得vscode卡..
解决:

"editor.quickSuggestionsDelay": 0

cursorBlinking

问题: brackets默认就有的功能,让你的光标移动有个动画效果。
解决:

"editor.cursorSmoothCaretAnimation": true

acceptSuggestionOnCommitCharacter

问题:
image.png
这种情况,输入左括号,会成为这个样子
image.png
这肯定不是我想要的啊
解决:

"editor.acceptSuggestionOnCommitCharacter": false

formatOnPaste

问题: 粘贴代码之后, 又得重新格式化下代码。如果不想改动整个代码,还得选中粘贴的部分代码再手动格式化。
解决: 启用粘贴时自动格式化

editor.formatOnPaste: true

renderCharacters

问题: 只渲染小地图大概色块而不是具体字符, 感觉能提升性能。默认是渲染具体字符。~~~~
解决:

editor.minimap.renderCharacters: false

两个配置

记得第一次使用vscode的时候,那时候还没有UI设置编辑器...

workbench.settings.editor: 'json',
workbench.settings.useSplitJSON: true

自动行尾加逗号

一个插件: macros
一句配置:

"macros": {
        "comma": [ // 末尾加逗号并新加一行
            "cursorLineEnd",
            {
                "command": "type",
                "args": {
                    "text": ","
                }
            },
            "editor.action.insertLineAfter"
        ]
    }

一个快捷键:
image.png

自动插入右括号,右引号

平时好像也没有按了左括号不需要右括号的情况~~

"editor.autoClosingBrackets": "always",
"editor.autoClosingQuotes": "always",

自动被重命名

更新后的一个不爽的地方
image.png
首尾的两个标签创建时就会出现一片红色进行自动重命名,关键是这个空格居然也会被应用到尾标签!

  • 解决
editor.renameOnType: false

截屏模式

类似up颜色代码时显示按键和高亮鼠标的功能
搜索Screencast然后绑定快捷键:
image.png

查看原文

赞 15 收藏 11 评论 1

风不识途 赞了文章 · 8月31日

图解Node(上)——直击灵魂的十条拷问

关注公众号“<font color=red>执鸢者</font>”,获取大量教学视频并进入专业交流群,回复“Node”获取本节思维导图”。

近期小林迷恋上了Node这位小美女,倾慕之情溢于言表,为了打动她的芳心,决定接受直击灵魂深处的十大拷问,拷问内容分为两期,这是第一期,下周更新第二期。
  1. Node到底是什么?
  2. Node的技术架构和工作流程架构分别是什么?
  3. V8、libuv分别在Node架构中承担什么角色
  4. Node引入模块的步骤是什么?
  5. Node中模块有几类?它们的关系是什么?
  6. Node的特点有哪些?
  7. Node真的是单线程吗?异步I/O的整个流程是什么?事件循环是什么?
  8. Node有哪些非异步I/O的API?其原理是什么?
  9. Node适合用在什么场景?
  10. node xxx.js时,Node到底做了什么?

一、定义

二、整体架构

三、模块

3.1 引入模块步骤

3.2 模块分类

3.3 模块依赖层级关系

四、Node特点

4.1 单线程

4.2 异步I/O

4.3 事件循环

五、非I/O的异步API

六、Node应用场景

七、node指令做了什么?

欢迎大家关注公众号(回复“Node”获取本节的思维导图,回复“书籍”获取大量前端学习资料,回复“前端视频”获取大量前端教学视频)
查看原文

赞 9 收藏 8 评论 1

风不识途 发布了文章 · 7月17日

玩转Github的脚本和插件

玩转Github【效率提升200%】

  • 阅读前言
  • 脚本篇

    • 1.代码折叠脚本【GitHub Code Folding】
    • 2.显示代码颜色【GitHub code colors】
    • 3.复制代码段【copy code snippet】
    • 4.GitHub图像预览【 image preview】
    • 5.Github目录导航【able of contents】
    • 6.Github镜像访问和加速下载
  • 插件篇

    • 1.Octotree
    • 2.Enhanced GitHub 增强浏览gihub
    • 3.github-file-icon 显示仓库文件图标
  • 脚本安装篇

    • 下载脚本
    • 导入脚本

阅读本文将会助你高效浏览 Github (「多张效果图」),推荐的 「插件」「脚本」 会助你提高生产力

阅读前言

你的浏览器需要有 Tampermonkey 插件, 作用是可以将JavaScript嵌入任何页面, 更好的浏览网页

也可以选择在最新版 Edge 浏览器安装 Tampermonkey 插件

「推荐的脚本和插件效果全部图片展示,安装的脚本在最后一篇」

脚本篇

1.代码折叠脚本【GitHub Code Folding】

使用场景:当你在 Github 中浏览源码中,可以非常高效的折叠代码,什么类型代码都可以折叠

2.显示代码颜色【GitHub code colors】

使用场景:在「代码颜色旁边添加颜色样式」的脚本

  • 它适用于注释预览和代码页

3.复制代码段【copy code snippet】

使用场景:需要复制代码块时会方便很多,不需要全部选中一键复制代码块

  • 将鼠标悬停在代码段上,从而将副本添加到剪贴板按钮

4.GitHub图像预览【 image preview】

使用场景: 需要预览仓库中的图像,不需要点击去查看,直接预览图片

  • 该脚本增加了预览图像(png,jpg,jpeg,gif,tif,tiff,bmp,webp和svg)

5.Github目录导航【able of contents】

使用场景:当你进入一个仓库时会将标题目录,添加到页面中,方便锚点跳转

  • 当进入仓库时,会自动添加一个「可拖动」的弹出窗口。
  • 键盘命令:

    • 按下Esc以“隐藏”目录右上角的目录。
    • 彼此之间在一秒钟之内按g+ t,以切换目录视图。
    • 彼此之间在一秒钟之内按g+ r,以重置TOC位置。

6.Github镜像访问和加速下载

使用场景:克隆仓库均速800K 和 下载Releases时速度非常快均速4M

  • 「优化了脚本默认不展开镜像网站,并且将最新版 Github 网站头部居中了」

插件篇

知道很多人安装了,所以放到了后面,这里推荐三个常用的插件, 这里就只提供插件的安装地址

1.Octotree

  • 下载地址:Octotree
  • 使用场景: 增强GitHub代码的检查和探索,这个插件很多人都知道就不详细说了

2.Enhanced GitHub 增强浏览gihub

  • 下载地址: Enhanced GitHub
  • 使用场景: 「显示仓库大小,每个文件的大小」,下载链接和复制文件内容的选项

3.github-file-icon 显示仓库文件图标

  • 下载地址:github-file-icon
  • 「特定于文件类型的图标替换原始文件图标」。这改善了GitHub,GitLab等上的视觉识别能力

脚本安装篇

前提记得安装 Tampermonkey 这个插件

下载脚本

  • 我已经把介绍的脚本全部放在「蓝奏云」了: 全部脚本
  • 已经看到这的小伙伴点个赞👍,再走呗😉

导入脚本

查看原文

赞 0 收藏 0 评论 0

认证与成就

  • 获得 1 次点赞
  • 获得 1 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 1 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 1月26日
个人主页被 121 人浏览