Vue2.0学习--基础--2--模板语法

最新推荐文章于 2023-11-03 17:14:57 发布

naildingding

最新推荐文章于 2023-11-03 17:14:57 发布

阅读量343

点赞数

分类专栏：框架—Vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/small_sesame/article/details/118409405

版权

框架—Vue 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

（day3）

插值、指令、缩写

前面两天已经学到了Vue 核心的四个基本功能：声明式渲染、条件和循环、处理用户输入、组件化的创建应用。这里面讲到了v-开头的一些指令，以及在HTML中声明同JavaScript中的Vue实例之间的数据绑定。

另外一个就是Vue实例，我们知道了一个Vue应用，就是从创建根Vue实例开始，加上各个可嵌套的组件组成。我们了解到了Vue实例中的选项对象的各种选项，以及$前缀的实例属性和实例方法，在选项对象中定义的Vue实例创建过程中各个生命周期的钩子函数，通过钩子函数加入我们的代码，以及在Vue实例创建过程中的生命周期图。

（这些都是让我们初识Vue，留下了很多坑，但是也只能是先知道怎么用，再来知道“为什么”）

今天学习的是Vue基础——模板语法。

在前面第一天我们知道一个概念：Vue的核心是允许使用简洁的模板语法来声明式的将数据渲染进DOM 的一个系统。

那么我们今天了解一下这个“简洁的模板语法”。

我们通过Vue的模板语法，“告诉”Vue实例我们的意图——我们要完成的各种操作，这些操作会涉及到DOM，然后Vue实例将我们用模板语法写出来的“意图”，编译成为虚拟DOM渲染函数，结合Vue的响应系统，智能的计算出最少需要渲染多少组件，并将DOM操作次数减到最少。

（如果你熟悉虚拟DOM并且偏爱JavaScript的原始力量，也可以不使用模板，直接写渲染（render）函数，使用可选的JSX语法）。

Vue.js的模板语法是基于HTML的，我们的“意图”通过模板语法，传达给Vue实例。

所以我们在编写Vue应用的时候都会涉及到HTML中的元素以及属性等和JavaScript中Vue实例的绑定，然后操作等等。

具体的怎么操作就是今天要学的Vue模板语法的知识点。

1、插值

插值这一部分就会讲到文本、原始HTML、Attribute、使用JavaScript表达式。

①、#文本

文本插值，也就是我们第一天学到的{{}}语法（双大括号）——“Mustache”语法。

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

这里的msg标签，会和Vue实例中数据对象上的msg 属性的值相绑定。

数据对象上的msg属性值发生了变化，那么在HTML插值处的内容也会发生相应的变化。

除非：

v-once指令，一次性的插值，插值处的内容不会更新。

（注意，这会影响到该节点上的其他数据绑定）

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

②、#原始HTML

在这个Mustache语法中，双大括号中的内容会被解释为普通文本，

但是如果我想把这个双大括号中的内容输出为HTML时，我们需要使用v-html指令：

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

<script>
    var app = new  Vue({
        el:"#..",
        data:{
            rawHtml:"<span style="color:red">This should be red.</span>"
        }
    });
</script>

那么上面两种声明的结果是不一样的，依次是：

Using mustaches：<span style="color:red">This should be red.</span>

Using v-html directive:This should be red.

在这里，第二个声明——使用了v-html的那个声明，span的内容会被替换成为作为v-html属性值的rawHtml，并且将绑定在Vue实例中数据对象（即选项对象中的data选项）的rawHtml属性值按HTML解析。

注意：

不能使用v-html作为来复合局部模板，因为Vue不是基于字符串的模板引擎。
对于用户界面UI，组件更适合作为可重用和可组合的基本单位。
（也就是说，对于创建这个界面的基本单位的时候，应该使用组件——Vue实例，而不是使用这个原始HTML——v-html指令创建。）
在你的站点上动态渲染的任意HTML可能会非常的危险，因为它很容易导致XSS攻击，请只对可信内容使用HTML插值，绝不要对用户提供的内容使用插值。

（既然有这么多缺点和局限，为什么要使用v-html呢？等后面来填这个坑吧）

③、#Attribute

第一天其实就学了一个指令——v-bind指令：

因为Mustache语法不能作用于HTML attribute上，但我们想要在attribute上面应用Mustache语法的时候，怎么办呢，使用v-bind。

利用v-bind将HTML 元素的属性和特性值绑定，那么HTML的特性值——attribute值，就可以和Vue实例中数据对象的属性绑定起来。

（具体例子第一天就学过了，这里就不啰嗦了）

注意：但v-bind，如果它绑的属性是布尔值，那么：

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

如果isButtondisabled的值是null、undefined、false，disabled attribute甚至不会被包含在渲染出来的<button>元素中。

④、使用JavaScript表达式

Mustache语法中，我们前面都是放的简单字符串，简单的property键值，

实际上，我们还可以往里面放JavaScript语句，Vue提供了完全的JavaScript表达式支持。

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-'+id"></div>

这些表达式都会在所属的Vue实例的数据作用域下作为JavaScript被解析。

有一个限制，每个绑定都只能包含单个表达式：

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

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

模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如Math和Date，你不应该在模板表达式中试图访问用户定义的全局变量。（待解决的坑）

2、指令

指令（Directives）是带有v-前缀的特殊attribute。

对于标准的指令，它的值是单个JavaScript表达式（v-for例外）：v-if = “seen”。

当这个JavaScript表达式的值发生改变的时候，指令就会根据这个值的改变，对DOM进行相应的操作。

参数、动态参数、修饰符。

①、#参数

有些指令可能会接收到一个额外的“参数”，这个参数在指令后面用一个冒号表示。

（仔细想一想，从开始到现在接触到的指令里面也就只有v-bind和v-on）

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

②、#动态参数

<!--注意：方括号括起来的JavaScript表达式的写法存在一些约束，后面讨论-->
<a v-bind:[attributeName]="url">...</a>
<a v-on:[eventName]="reverseMessage">...</a>

这样可以将Vue实例上data对象attributeName属性同上面定义的HTML中的“url”相绑定。

或者是使用动态参数为一个动态的事件名绑定处理函数。

对动态参数的约束：

动态参数的值，是一个字符串；任何非字符串的值都会触发一个警告。
动态参数的值，在异常的情况在是null，这个null值可以被显性用于移除绑定。

对动态参数表达式的约束：

语法约束，因为某些字符在HTML attribute名里面是无效的——引号、空格等：
```

<a v-bind:['foo' + bar]="value">..</a>
```

这个参数表达式的名字，要避免使用大写字符，因为浏览器会把attribute的名字强制改为小写。

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

③、#修饰符

修饰符（modifier）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如：.prevent修饰符告诉v-on指令对于触发事件调用event.preventDefault()：

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

3、缩写

v-bind：href=“...” 可以缩写为：href="..."。

v-on：click=“...”可以缩写为@click="..."。

为什么缩写：一、省去繁琐的v-写法；二，在构建Vue管理所有模板的单页面应用程序（SPA-single page application）时，v-前缀并不重要。

总结：

今天学习的知识点主要是模板语法，包括文本插值、指令、缩写。

其中文本插值：

我们再一次回顾了Mustache语法，知道了v-once的情景；
原始HTML，也就是v-html的应用，但是记得两个注意点；
Attribute，也就是v-bind的使用，当bind的属性值是布尔值的时候；
使用JavaScript表达式，就是在Mustache语法中的双大括号中放入JavaScript表达式的情景；

指令：

参数，现阶段所知的v-on、v-bind，冒号后面接的参数；
动态参数，[]里面装的变量代表的参数值；
1. 对动态参数的限制；
2. 对动态参数表达式的限制；
修饰符： .

缩写：

v-bind的缩写
v-on的缩写

这一张还涉及了一些其他的需要进一步搞明白的概念的，基本上在文本中都用绿色加粗字体表示出来，具体有：

渲染（render）函数
JSX语法
XSS攻击
全局变量的白名单
单页面应用程序（SPA-single page application）