丙午🐎年

ahk 产出内容

2026-07-10T00:00:00.000Z

逐字粘贴脚本（防屏蔽版）

📖 功能简介

本脚本用于绕过网站对粘贴（Ctrl+V）功能的限制。通过模拟“逐字人工输入”的方式，将剪贴板内容输入到当前活动窗口中。

✅ 绕过 onpaste 禁用
✅ 绕过密码框粘贴限制
✅ 绕过 React/Vue 等框架的防抖机制
✅ 保留多行文本格式（行与行之间按回车）

Vue2 渲染函数 & JSX

2026-07-09T14:43:23.000Z

渲染函数 & JSX

基础

Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。

Vue2 自定义指令

2026-07-05T13:51:08.000Z

简介

Watch a free video lesson on Vue School

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子，如下：

Vue2 混入

2026-07-05T13:19:27.000Z

基础

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

Vue2 状态过渡

2026-07-05T12:59:52.000Z

Vue 的过渡系统提供了非常多简单的方法设置进入、离开和列表的动效。那么对于数据元素本身的动效呢，比如：

数字和运算
颜色的显示
SVG 节点的位置
元素的大小和其他的 property

Vue2 进入/离开 & 列表过渡

2026-07-04T12:52:05.000Z

概述

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：

在 CSS 过渡和动画中自动应用 class
可以配合使用第三方 CSS 动画库，如 Animate.css

Vue2 处理边界情况

2026-07-04T02:53:59.000Z

该页面假设你已经阅读过了组件基础。如果你还对组件不太了解，推荐你先阅读它。

这里记录的都是和处理边界情况有关的功能，即一些需要对 Vue 的规则做一些小调整的特殊情况。不过注意这些功能都是有劣势或危险的场景的。我们会在每个案例中注明，所以当你使用每个功能的时候请稍加留意。

Vue2 动态组件 & 异步组件

2026-07-04T02:52:14.000Z

该页面假设你已经阅读过了组件基础。如果你还对组件不太了解，推荐你先阅读它。

在动态组件上使用 `keep-alive`

我们之前在一个多标签的界面中使用 is attribute 来切换不同的组件：

Vue2 插槽

2026-07-02T13:56:34.000Z

该页面假设你已经阅读过了组件基础。如果你还对组件不太了解，推荐你先阅读它。

在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。新语法的由来可查阅这份 RFC。

插槽内容

Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 <slot> 元素作为承载分发内容的出口。

Vue2 自定义事件

2026-07-02T13:41:14.000Z

该页面假设你已经阅读过了组件基础。如果你还对组件不太了解，推荐你先阅读它。

事件名

不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子，如果触发一个 camelCase 名字的事件：

1	this.$emit('myEvent')

Vue2 Prop

2026-06-26T13:09:15.000Z

该页面假设你已经阅读过了组件基础。如果你还对组件不太了解，推荐你先阅读它。

Prop 的大小写 (camelCase vs kebab-case)

HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：

Vue2 组件注册

2026-06-26T12:53:26.000Z

组件名

在注册一个组件的时候，我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了：

1	Vue.component('my-component-name', { /* ... */ })

该组件名就是 Vue.component 的第一个参数。

Vue2 组件基础

2026-06-25T13:44:21.000Z

基本示例

这里有一个 Vue 组件的示例：

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

Vue2 表单输入绑定

2026-06-25T13:11:12.000Z

表单输入绑定

基础用法

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

Vue2 事件处理

2026-06-25T12:13:25.000Z

监听事件

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

示例：

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

Vue2 列表渲染

2026-06-24T14:55:47.000Z

用 `v-for` 把一个数组对应为一组元素

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

Vue2 条件渲染

2026-06-24T12:50:23.000Z

`v-if`

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

1	<h1 v-if="awesome">Vue is awesome!</h1>

也可以用 v-else 添加一个“else 块”：

1 2	<h1 v-if="awesome">Vue is awesome!</h1> <h1 v-else>Oh no 😢</h1>

Vue2 Class 与 Style 绑定

2026-06-24T12:35:14.000Z

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

绑定 HTML Class

对象语法

我们可以传给 v-bind:class 一个对象，以动态地切换 class：

1	<div v-bind:class="{ active: isActive }"></div>

上面的语法表示 active 这个 class 存在与否将取决于数据 property isActive 的 truthiness。

Vue2 计算属性和侦听器

2026-06-24T11:40:11.000Z

计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

1
2
3

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中的多处包含此翻转字符串时，就会更加难以处理。

Vue2 模板语法

2026-06-23T13:54:12.000Z

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

插值

文本

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

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

Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。

Vue2 实例

2026-06-23T13:36:58.000Z

创建一个 Vue 实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

1
2
3

var vm = new Vue({
  // 选项
})

虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

Vue2 介绍

2026-06-23T11:30:54.000Z

声明式渲染

文本插值

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

1
2
3

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

JavaScript 正则

2026-06-20T10:44:23.000Z

语法
/pattern/modifiers;

实例
var patt = /w3cschool/i

实例解析：
/w3cschool/i 是一个正则表达式。
w3cschool 是一个模式 (用于检索)。
i 是一个修饰符 (搜索不区分大小写)。

一、基础元字符

字符	含义	示例
`.`	任意单个字符（除换行）	`a.c` → `abc`, `a1c`
`\d`	数字 `[0-9]`	`\d{3}` → `123`
`\D`	非数字 `[^0-9]`	`\D+` → `abc`
`\w`	单词字符 `[a-zA-Z0-9_]`	`\w+` → `hello_world`
`\W`	非单词字符	`\W` → `@`, `#`,
`\s`	空白字符（空格、Tab、换行）	`\s+` →
`\S`	非空白字符	`\S+` → `abc`
`\b`	单词边界	`\bword\b` 精确匹配 `word`
`\B`	非单词边界

JavaScript 对象

2026-06-20T09:56:17.000Z

时间和时间戳

在 JavaScript 中，Date对象用来表示日期和时间。

要获取系统当前时间，用：

let now = new Date();
now; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
now.getFullYear(); // 2015, 年份
now.getMonth(); // 5, 月份，注意月份范围是 0~11，5 表示六月
now.getDate(); // 24, 表示24号
now.getDay(); // 3, 表示星期三
now.getHours(); // 19, 24小时制
now.getMinutes(); // 49, 分钟
now.getSeconds(); // 22, 秒
now.getMilliseconds(); // 875, 毫秒数
now.getTime(); // 1435146562875, 以 number 形式表示的时间戳

注意，当前时间是浏览器从本机操作系统获取的时间，所以不一定准确，因为用户可以把当前时间设定为任何值。

JavaScript 函数

2026-06-19T14:13:39.000Z

基本上所有的高级语言都支持函数，JavaScript 也不例外。JavaScript
的函数不但是“头等公民”，而且可以像变量一样使用，具有非常强大的抽象能力。

借助抽象，我们才能不关心底层的具体计算过程，而直接在更高的层次上思考问题。写计算机程序也是一样，函数就是最基本的一种代码抽象的方式。