[油猴脚本开发指南]模板语法
# 前文本文依然根据Vue的官方教程大概抄写
仅有少部分的改动
# 模板与render
我们平时写代码的时候通常使用模板，vue在发现我们使用模板的时候
会将模板转译为render函数
vue会根据render函数来读取出虚拟的dom节点
最后根据虚拟dom节点来渲染出真实dom
因为虚拟dom是一个抽象dom，所以一旦出现改变的时候
交叉对比虚拟dom，来重新修改真实dom，达到减少操作数的目的
注意，这里的减少dom操作数未必是一个最优情况，但是远远高于我们普通人自己来写计算规则
# 插值
## 文本
我们使用大括号来包含我们data内声明的数据，计算属性等等需要改变的数据
一旦触发改变，模板上的显示会跟随数据进行更新
如
```javascript
<span>Message: {{ msg }}</span>
```
我们也可以使用v-once指令来进行一次性插值
当数据再次发生改变的时候不会更新该处数据
```javascript
<span v-once>这个将不会改变: {{ msg }}</span>
```
## 原始html
如果使用{{}}会将其解释为文本，但是如果我们想渲染html，我们需要使用v-html指令
但我们不能在内使用属性绑定等，因为vue会直接忽略。
注意，不用将用户提供内容作为其显示内容，否则容易导致出现攻击行为
```javascript
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
```
## Attribute
文本的语法不能在html属性中实行，但是我们可以使用v-bind指令
```javascript
<div v-bind:id="dynamicId"></div>
```
如果绑定的值为null或undefined，则该属性不会出现在渲染的元素上
对于bool类型的属性v-bind工作有所不同
```javascript
<button v-bind:disabled="isButtonDisabled">按钮</button>
```
如果 `isButtonDisabled` 的值为真，则disabled属性包含在内，如果该值为一个字符串，同样也会包括在捏
与disabled=""一致，对于其他为假的值，该值会被忽略
## 表达式
在括号里我们可以使用js表达式，如
```javascript
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
```
但是注意每个绑定只能使用单个表达式，下列例子不会生效
```javascript
<!--这是语句，不是表达式：-->
{{ var a = 1 }}
<!-- 流程控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
```
## 指令
指令为带有v-前缀的属性，通常为单个js表达式，指令的职责是当表达式的值改变的时候会出现对应的行为
并响应到dom元素上
```javascript
<p v-if="seen">现在你看到我了</p>
```
如根据seen的真假会或移除dom元素
## 参数
我们可以以响应式的去更新一些属性，如
```javascript
<a v-bind:href="url"> ... </a>
```
这里href是参数，v-bind告诉将href与url变量绑定，一旦url改变，href内容也会相应改变
另一个例子是v-on指令
```javascript
<a v-on:click="doSomething"> ... </a>
```
这里我们监听了click点击事件
## 动态参数
我们也可以在指令参数上使用js表达式，但需要用方括号括起来
```javascript
<!--
注意，参数表达式的写法存在一些约束.
-->
<a v-bind:="url"> ... </a>
```
这里的attributeName会作为一个js表达式动态获取结果，作为最终绑定的参数来使用
如果attributeName为href，则最终为v-bind:href="url"
我们也可以使用动态参数为一个动态事件名绑定处理函数，如
```javascript
<a v-on:="doSomething"> ... </a>
```
当eventName的值为focus时，则为v-on：focue=“doSomeThing”
## 修饰符
相当于对于事件处理的语法糖，使用.后跟随一些文本，告诉一个指令应该对于触发的事件调用进行怎样的处理。
如.prevent告诉v-on对于触发事件调用使用`event.preventDefault()`
```javascript
<form v-on:submit.prevent="onSubmit">...</form>
```
## 缩写
我们可以把v-bind:写为: 把v-on:写为@,如
```javascript
<!-- 完整语法 -->
<a v-bind:href="url"> ... </a>
<!-- 缩写 -->
<a :href="url"> ... </a>
<!-- 动态参数的缩写 -->
<a :="url"> ... </a>
```
```javascript
<!-- 完整语法 -->
<a v-on:click="doSomething"> ... </a>
<!-- 缩写 -->
<a @click="doSomething"> ... </a>
<!-- 动态参数的缩写 -->
<a @="doSomething"> ... </a>
```
看起来与传统的html不同，但:与@属于合法字符，在支持vue的浏览器上可以正确的被解析出来
同时不会出现在最终渲染中。
# 注意事项
#### 对动态参数值约定
动态参数预期会求出一个字符串，异常情况下值为 `null`。这个特殊的 `null` 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。
#### 对动态参数表达式约定
动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。例如：
```html
<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>
```
变通的办法是使用没有空格或引号的表达式，或用[计算属性](https://v3.cn.vuejs.org/guide/computed.html)替代这种复杂表达式。
在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写：
```html
<!--
在 DOM 中使用模板时这段代码会被转换为 `v-bind:`。
除非在实例中有一个名为“someattr”的 property，否则代码不会工作。
-->
<a v-bind:="value"> ... </a>
```
#### JavaScript 表达式
模板表达式都被放在沙盒中，只能访问一个[受限的全局变量列表](https://github.com/vuejs/vue-next/blob/master/packages/shared/src/globalsWhitelist.ts#L3)
[ ](https://github.com/vuejs/vue-next/blob/master/packages/shared/src/globalsWhitelist.ts#L3)，如 `Math` 和 `Date`。你不应该在模板表达式中试图访问用户定义的全局变量。
已经完全和油猴无关了吧 王一之 发表于 2021-12-21 20:09
已经完全和油猴无关了吧
是，vue大概讲完就转到webpack部分了
不然感觉断层太多了
李恒道 发表于 2021-12-21 20:47
是，vue大概讲完就转到webpack部分了
不然感觉断层太多了
hhhhhhhh
页:
[1]