Vue 官方文档2.x教程学习笔记 1 基础 1.4 模板语法 1.4.2 指令

Vue 官方文档2.x教程学习笔记 1 基础 1.4 模板语法 1.4.2 指令
Vue 官方文档2.x教程学习笔记
文章目录
- Vue 官方文档2.x教程学习笔记
  1 基础
  1.4 模板语法
  1.4.2 指令
1 基础

1.4 模板语法

1.4.2 指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。

指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况）。

指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

回顾在介绍中看到的例子：

这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除
元素。

【参数】

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。

例如，v-bind 指令可以用于响应式地更新 HTML attribute：
```
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<div id="app">
    <a v-bind:href='url'>百度一下，你就知道a>
div>

<script src="../js/vue.js">script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            url: 'https://www.baidu.com'
        }
    })
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
```
浏览器效果

在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。

另一个例子是 v-on 指令，它用于监听 DOM 事件：
```
...
1
```
在这里参数是监听的事件名。【后面会更详细的解释事件处理】

【动态参数】

2.6.0 新增

从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：

笔者这里好像不行，没有生效。

好家伙，还报错了。谷歌一下

可能是因为是属性取值的方式不一样，不要采取驼峰式命名变量。就是参数列如“attributename”不能存在大写字母，一定要小写字母。不然检测不到参数，提示会变成小写的参数未定义。

改一下

改成小写都有提示了

OK。这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data property attributename，其值为 "href"，那么这个绑定将等价于 v-bind:href。

同样地，可以使用动态参数为一个动态的事件名绑定处理函数。

[对动态参数的值的约束]

动态参数预期会求出一个字符串，异常情况下值为 null。

这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。

[对动态参数表达式的约束]

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

例如：
```

<a v-bind:['foo' + bar]="value"> ... </a>
1
2
```
变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。

在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写：【啊这，不早说】
```
<a v-bind:[someAttr]="value"> ... a>
1
2
3
4
5
```
【修饰符】

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
```
<form v-on:submit.prevent="onSubmit">...form>
1
```
event.preventDefault()方法是用于取消事件的默认行为，例如，当点击提交按钮时阻止对表单的提交。
相关阅读:
【MySQL从入门到精通】【高级篇】（七）设计一个索引&InnoDB中的索引方案
 都说测试行业饱和了，为什么我们公司给初级测试开到了12K?
词云的可视化设计教程
 4、AWS SDK for Go-session使用
 B44 - 基于stm32蓝牙智能语音识别分类播报垃圾桶
 真杜比全景声家庭影院级投影设备，当贝做到了五千元内也支持
 74HC595芯片验证
 python打包技巧：彻底解决pyinstaller打包exe文件太大的问题
 C++11标准模板（STL）- 算法（std::reverse）
jenkins禁用所有job
原文地址：https://blog.csdn.net/weixin_44226181/article/details/128157690

Vue 官方文档2.x教程学习笔记

文章目录

1 基础

1.4 模板语法

1.4.2 指令