上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

[油猴脚本开发指南]模板语法

[复制链接]

216

主题

1775

帖子

2322

积分

管理员

非物质文化遗产社会摇传承人

Rank: 9Rank: 9Rank: 9

积分
2322
发表于 2021-12-21 17:55:13 | 显示全部楼层 | 阅读模式

前文

本文依然根据Vue的官方教程大概抄写

仅有少部分的改动

模板与render

我们平时写代码的时候通常使用模板,vue在发现我们使用模板的时候

会将模板转译为render函数

vue会根据render函数来读取出虚拟的dom节点

最后根据虚拟dom节点来渲染出真实dom

因为虚拟dom是一个抽象dom,所以一旦出现改变的时候

交叉对比虚拟dom,来重新修改真实dom,达到减少操作数的目的

注意,这里的减少dom操作数未必是一个最优情况,但是远远高于我们普通人自己来写计算规则

插值

文本

我们使用大括号来包含我们data内声明的数据,计算属性等等需要改变的数据

一旦触发改变,模板上的显示会跟随数据进行更新

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

我们也可以使用v-once指令来进行一次性插值

当数据再次发生改变的时候不会更新该处数据

<span v-once>这个将不会改变: {{ msg }}</span>

原始html

如果使用{{}}会将其解释为文本,但是如果我们想渲染html,我们需要使用v-html指令

但我们不能在内使用属性绑定等,因为vue会直接忽略。

注意,不用将用户提供内容作为其显示内容,否则容易导致出现攻击行为

<p>Using v-html directive: <span v-html="rawHtml"></span></p>

Attribute

文本的语法不能在html属性中实行,但是我们可以使用v-bind指令

<div v-bind:id="dynamicId"></div>

如果绑定的值为null或undefined,则该属性不会出现在渲染的元素上

对于bool类型的属性v-bind工作有所不同

<button v-bind:disabled="isButtonDisabled">按钮</button>

如果 isButtonDisabled 的值为真,则disabled属性包含在内,如果该值为一个字符串,同样也会包括在捏

与disabled=""一致,对于其他为假的值,该值会被忽略

表达式

在括号里我们可以使用js表达式,如

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

但是注意每个绑定只能使用单个表达式,下列例子不会生效

<!--  这是语句,不是表达式:-->
{{ var a = 1 }}

<!-- 流程控制也不会生效,请使用三元表达式 -->
{{ if (ok) { return message } }}

指令

指令为带有v-前缀的属性,通常为单个js表达式,指令的职责是当表达式的值改变的时候会出现对应的行为

并响应到dom元素上

<p v-if="seen">现在你看到我了</p>

如根据seen的真假会或移除dom元素

参数

我们可以以响应式的去更新一些属性,如

<a v-bind:href="url"> ... </a>

这里href是参数,v-bind告诉将href与url变量绑定,一旦url改变,href内容也会相应改变

另一个例子是v-on指令

<a v-on:click="doSomething"> ... </a>

这里我们监听了click点击事件

动态参数

我们也可以在指令参数上使用js表达式,但需要用方括号括起来

<!--
注意,参数表达式的写法存在一些约束.
-->
<a v-bind:[attributeName]="url"> ... </a>

这里的attributeName会作为一个js表达式动态获取结果,作为最终绑定的参数来使用

如果attributeName为href,则最终为v-bind:href="url"

我们也可以使用动态参数为一个动态事件名绑定处理函数,如

<a v-on:[eventName]="doSomething"> ... </a>

当eventName的值为focus时,则为v-on:focue=“doSomeThing”

修饰符

相当于对于事件处理的语法糖,使用.后跟随一些文本,告诉一个指令应该对于触发的事件调用进行怎样的处理。

如.prevent告诉v-on对于触发事件调用使用event.preventDefault()

<form v-on:submit.prevent="onSubmit">...</form>

缩写

我们可以把v-bind:写为: 把v-on:写为@,如

<!-- 完整语法 -->
<a v-bind:href="url"> ... </a>

<!-- 缩写 -->
<a :href="url"> ... </a>

<!-- 动态参数的缩写 -->
<a :[key]="url"> ... </a>
<!-- 完整语法 -->
<a v-on:click="doSomething"> ... </a>

<!-- 缩写 -->
<a @click="doSomething"> ... </a>

<!-- 动态参数的缩写 -->
<a @[event]="doSomething"> ... </a>

看起来与传统的html不同,但:与@属于合法字符,在支持vue的浏览器上可以正确的被解析出来

同时不会出现在最终渲染中。

注意事项

对动态参数值约定

动态参数预期会求出一个字符串,异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。

对动态参数表达式约定

动态参数表达式有一些语法约束,因为某些字符,如空格和引号,放在 HTML attribute 名里是无效的。例如:

<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>

变通的办法是使用没有空格或引号的表达式,或用计算属性替代这种复杂表达式。

在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板),还需要避免使用大写字符来命名键名,因为浏览器会把 attribute 名全部强制转为小写:

<!--
在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
除非在实例中有一个名为“someattr”的 property,否则代码不会工作。
-->
<a v-bind:[someAttr]="value"> ... </a>

JavaScript 表达式

模板表达式都被放在沙盒中,只能访问一个受限的全局变量列表

,如 MathDate。你不应该在模板表达式中试图访问用户定义的全局变量。

混的人。

107

主题

1198

帖子

1466

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1466

猫咪币纪念章热心会员活跃会员突出贡献三好学生中秋纪念章国庆纪念章

发表于 2021-12-21 20:09:46 | 显示全部楼层
已经完全和油猴无关了吧
上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。/ 微信公众号:一之哥哥
回复

使用道具 举报

216

主题

1775

帖子

2322

积分

管理员

非物质文化遗产社会摇传承人

Rank: 9Rank: 9Rank: 9

积分
2322
发表于 2021-12-21 20:47:04 | 显示全部楼层
王一之 发表于 2021-12-21 20:09
已经完全和油猴无关了吧

是,vue大概讲完就转到webpack部分了
不然感觉断层太多了
混的人。
回复

使用道具 举报

11

主题

205

帖子

362

积分

版主

Rank: 7Rank: 7Rank: 7

积分
362

猫咪币纪念章活跃会员中秋纪念章国庆纪念章

发表于 2021-12-22 08:20:33 | 显示全部楼层
李恒道 发表于 2021-12-21 20:47
是,vue大概讲完就转到webpack部分了
不然感觉断层太多了

hhhhhhhh
回复

使用道具 举报

发表回复

本版积分规则

快速回复 返回顶部 返回列表