基础

生命周期

模板

插值

• 文本
  <span>{{ msg }}</span>
• html(注意 XSS 风险)
  <span v-html="rawHtml"></span>
• 绑定属性
  <span v-bind:id="dynamicId">123456</span>
<span v-on:click="doSomething">123456</span>
• 绑定动态名称的属性(注意，名称对应的数据必须全部小写)
  <span v-bind:[attrName]="dynamicValue">123456</span>
<span v-on:[eventName]="doSomething">123456</span>
• 表达式支持
  <span>{{ msg + '.' }}</span>
<span>{{ flag ? 1 : 2 }}</span>
• 表达式是在沙盒中运行的，只能访问白名单中的全局变量

Class 和 Style 绑定

TODO

事件

<span @click="fn">123456</span>
<span @click="fn(row)">123456</span>
<span @click="fn(row, $event)">123456</span>
<input @keyup.enter="fn" />
<input @keyup.ctrl.enter="fn" /> <!-- 组合键 -->
<input @click.ctrl="fn" /> <!-- 按下 Ctrl 时点击 -->
<input @click.ctrl.exact="fn" /> <!-- Ctrl 和其它修饰键同时按下时不触发 -->
<input @click.exact="fn" /> <!-- 只有未按下任何修饰键时才触发 -->

在事件后增加修饰符可以自动调用一些处理
修饰符可以存在多个，且会按顺序执行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!-- 阻止事件继续传播 -->
<span @click.stop="fn">123456</span>

<!-- 阻止默认行为 -->
<span @click.prevent="fn">123456</span>

<!-- 在捕获阶段处理事件 -->
<span @click.capture="fn">123456</span>

<!-- 只有 event.target 是自身元素时才处理事件 -->
<span @click.self="fn">123456</span>

<!-- 只会触发一次 -->
<span @click.once="fn">123456</span>

<!-- 阻止处理代码调用 preventDefault，如果真的调用了，将只会在控制台打印警告 -->
<span @click.passive="fn">123456</span>

缩写

v-bind:href=”xxx” 可简写为 :href=”xxx”
v-on:click=”xxx” 可简写为 @click=”xxx”

属性

计算属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div>
    <p>{{ msg }}</p>
    <p>{{ reversedMsg }}</p>
</div>

<script>
new Vue({
  data() {
    return {
      msg: '123'
    }
  },
  computed: {
    reversedMsg() {
      return this.msg.split('').reverse().join('')
    }
  }
})
</script>

指令

• v-if 当条件成立时才插入元素
  • 切换状态开销大于 v-show
• v-else-if 在上一个条件不成立，且这一个条件成立时插入元素
• v-else 当条件不成立时插入元素
• v-show 只有条件成立时显示元素
  • 初始化开销大于 v-if
• v-for 循环渲染多个元素
  • v-for="(item, index) in list"
  • v-for="(value, name, index) in object"
  • 可以用 :key 提示 Vue 节点和数据的绑定关系，一般应该使用字符串或数字
  • 由于 JS 的限制，Vue 无法检测到下列变动
    • list[x] = newVal
    • list.length = newLength
    • obj.b = 1 // 创建以前不存在的属性
• v-model 将某个属性绑定到元素上
  • v-model.number 自动在写回属性时转换为 Number
  • v-model.trim 自动在写回属性时去掉首尾的空白字符

如果需要，可以给计算属性设置 setter

1
2
3
4
5
6
7
8
9
10

computed: {
  reversedMsg: {
    get() {
      return this.msg.split('').reverse().join('')
    },
    set(newVal) {
      this.msg = newVal.split('').reverse().join('')
    }
  }
}

监听属性变化

1
2
3
4
5
6
7
8
9
10
11
12

new Vue({
  data() {
    return {
      msg: '123'
    }
  },
  watch: {
    msg(newVal, oldVal) {
      // do something
    }
  }
})

参考资料

• Vue.js 官方文档

说明

个人看到比较好的一些书，在这里分享一下。

为 Java 启用大页面支持

Oracle G1GC Tuning中提到，使用大页面可以提高吞吐量，在这里记录一下Linux服务器的开启方式

Bartender 3 无限试用方案

1. 下载官方的试用版本，放到任意文件夹中

2. 启动，正常使用后退出

   阅读全文 »

前言

如果你的网络上游存在防火墙，对你的网络访问造成了一些限制，你可能会想通过某种代理隧道来绕过防火墙的限制

为了对抗你的这种行为，防火墙可能会针对性的检测和封锁这些隧道的IP

本文提出了一种利用IPv6来对抗这种封锁的方案

Surge Mac 3 无限试用方案

1. 下载官方的试用版本，放到任意文件夹中

2. 启动，选择试用，并进去主界面，然后退出

   阅读全文 »

五一假期方案

国家法定五一只放一天假，但可以通过调休来拼凑假期

前言

眼馋搬瓦工的OpenVZ已久，今天终于把服务器折腾上了IPv6地址

顺便升级到了Ubuntu 18.10，把TLS1.3支持加上了

前言

从去年开始，这个小博客一直在用Let’s Encrypt的免费证书。
昨天ACMEv2节点终于正式公布了，所以借着这个时机换了一整套证书配置，具体如下：

1. 将证书签发工具从CertBot更换为acme.sh
2. NS服务商由1984 Hosting更换为Cloudflare
3. 将RSA4096的证书更换为ECC384
4. 换用通配符证书

从上次写Https配置的文档到现在，已经有很多地方做过变更了。
所以借这个时机，重新来记录一下现在签发证书的整个流程，已备以后查阅。

吐槽不喜勿入