Wuxh

Front-end Development

0%

发表于 更新于

有些视频经常进行分段发布，尤其是某些短视频。最近在学习 React 性能优化，视频主进行了上、下两个章节进行讲解。

为了更好的学习，我把视频下载本地，进行学习交流。之前倒腾过 FFmpeg，今天小记一下。

阅读全文 »

发表于 更新于

今天偶然看到 Vue3 的一个 issues#5462 大概意思是设置 DOM 属性 translate 为字符串 "no" 时不符合预期。
Vue 核心成员给出的解决方案是使用 <div ^translate="no"></div> 解决。

什么是 v-bind

直接查看官方文档

v-bind 修饰符

.camel

将 kebab-case 变成 camelCase。（平时都是使用字符串模版渲染，所以基本上不需要使用这个api）

1
2
3
4
5
6
7
<svg :view-box.camel="`0 0 100 100`">
  <rect x="0" y="0" width="10%" height="10%" />
</svg>
<!-- 渲染后html  -->
<svg viewBox="0 0 100 100">
  <rect x="0" y="0" width="10%" height="10%" />
</svg>

.prop

强制设置为 DOM property. (Vue@3.2+ 支持)

1
2
3
4
5
<div :test.prop="`name`"></div>
<!-- 等价于 -->
<div .test="`name`"></div>
<!-- 渲染后html，没有 attribute-->
<div></div>

Property属性属于DOM对象

可以理解为使用 .prop 修饰符，就是直接在 DOM 对象上添加属性。 也就是 JavaScript 中的对象。

.attr

强制设置为 DOM attribute. (Vue@3.2+ 支持)

1
2
3
4
5
<div :translate.attr="`no`"></div>
<!-- 等价于 -->
<div :^translate="`no`"></div>
<!-- 渲染后html -->
<div translate="no"></div>

对于某些 HTML 元素来说，他们的 attribute 都有可选值。当我们像强制渲染成某些自定义值时这个api的作用就出现了。

比如 <button> 元素的 disabled 设置为非空字符串时，就会添加一个 disabled attribute。

1
2
<!-- 渲染后html -->
<button disabled>click</button>

如果使用 .attr 修饰符后则可以渲染成。

1
2
<!-- 渲染后html -->
<button disabled="false">click</button>

动态属性

以上就是我对 v-bind 的一些语法糖的输出，一些奇奇怪怪的感觉。

参考文档