Vue.js 数据绑定语法详解

Vue.js 数据绑定语法详解

Vue.js 数据绑定语法详解

一、总结

一句话总结:Vue.js 的模板是基于 DOM 实现的。这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强。Vue 模板因而从根本上不同于基于字符串的模板,请记住这点。

dom
html 不同于 字符串

 

1、Vue.js 数据绑定语法有哪4个知识点?

插值 绑定表达式 指令 缩写

a、插值:数据绑定最基础的形式是文本插值,使用 “Mustache” 语法(双大括号)

b、绑定表达式:放在 Mustache 标签内的文本称为绑定表达式。在 Vue.js 中,一段绑定表达式由一个简单的 JavaScript 表达式和可选的一个或多个过滤器构成。

c、指令:指令 (Directives) 是特殊的带有前缀 v- 的特性。如v-if、v-bind、v-on等。指令的值限定为绑定表达式,因此上面提到的 JavaScript 表达式及过滤器规则在这里也适用。指令的职责就是当其表达式的值改变时把某些特殊的行为应用到 DOM 上。

d、缩写:简化书写,v- 前缀是一种标识模板中特定的 Vue 特性的视觉暗示。当你需要在一些现有的 HTML 代码中添加动态行为时,这些前缀可以起到很好的区分效果。但你在使用一些常用指令的时候,你会感觉一直这么写实在是啰嗦。而且在构建单页应用时,Vue.js 会管理所有的模板,此时 v- 前缀也没那么重要了。因此Vue.js 为两个最常用的指令 v-bind 和 v-on 提供特别的缩写。

 

2、插值知识点有哪三个小知识点?

文本 原始的html html特性

a、文本

数据绑定最基础的形式是文本插值,使用 “Mustache” 语法(双大括号):

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

Mustache 标签会被相应数据对象的 msg 属性的值替换。每当这个属性变化时它也会更新。

你也可以只处理单次插值,今后的数据变化就不会再引起插值更新了:

<span>This will never change: {
         {* msg }}</span>

b、原始的 HTML

双 Mustache 标签将数据解析为纯文本而不是 HTML。为了输出真的 HTML 字符串,需要用三 Mustache 标签:

<div>{
         {
         { raw_html }}}</div>

内容以 HTML 字符串插入——数据绑定将被忽略。如果需要复用模板片断,应当使用 partials。

在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。记住,只对可信内容使用 HTML 插值,**永不**用于用户提交的内容。

c、HTML 特性

Mustache 标签也可以用在 HTML 特性 (Attributes) 内:

<div id="item-{
                { id }}"></div>

注意在 Vue.js 指令和特殊特性内不能用插值。不必担心,如果 Mustache 标签用错了地方 Vue.js 会给出警告。

 

3、绑定表达式有哪2个小知识点?

JavaScript表达式 过滤器

放在 Mustache 标签内的文本称为绑定表达式。在 Vue.js 中,一段绑定表达式由一个简单的 JavaScript 表达式和可选的一个或多个过滤器构成。

a、JavaScript 表达式

到目前为止,我们的模板只绑定到简单的属性键。不过实际上 Vue.js 在数据绑定内支持全功能的 JavaScript 表达式:

{
   { number + 1 }}

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

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

这些表达式将在所属的 Vue 实例的作用域内计算。一个限制是每个绑定只能包含单个表达式,因此下面的语句是无效的:

<!-- 这是一个语句,不是一个表达式: --> {
     { var a = 1 }} <!-- 流程控制也不可以,可改用三元表达式 --> {
       { if (ok) { return message } }}

b、过滤器

Vue.js 允许在表达式后添加可选的“过滤器 (Filter) ”,以“管道符”指示:

{
   { message | capitalize }}

这里我们将表达式 message 的值“管输(pipe)”到内置的 capitalize 过滤器,这个过滤器其实只是一个 JavaScript 函数,返回大写化的值。Vue.js 提供数个内置过滤器,在后面我们会谈到如何开发自己的过滤器。

注意管道语法不是 JavaScript 语法,因此不能在表达式内使用过滤器,只能添加到表达式的后面。

过滤器可以串联:

{
   { message | filterA | filterB }}

过滤器也可以接受参数:

{
   { message | filterA 'arg1' arg2 }}

过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串,而不带引号的参数按表达式计算。这里,字符串 'arg1' 将传给过滤器作为第二个参数,表达式 arg2 的值在计算出来之后作为第三个参数。

 

4、指令有哪2个小知识点?

参数 修饰符

指令 (Directives) 是特殊的带有前缀 v- 的特性。指令的值限定为绑定表达式,因此上面提到的 JavaScript 表达式及过滤器规则在这里也适用。指令的职责就是当其表达式的值改变时把某些特殊的行为应用到 DOM 上。我们来回头看下“概述”里的例子:

<p v-if="greeting">Hello!</p>

这里 v-if 指令将根据表达式 greeting 值的真假删除/插入 <p> 元素。

a、参数

有些指令可以在其名称后面带一个“参数” (Argument),中间放一个冒号隔开。例如,v-bind 指令用于响应地更新 HTML 特性:

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

这里 href 是参数,它告诉 v-bind 指令将元素的 href 特性跟表达式 url 的值绑定。可能你已注意到可以用特性插值 {% raw %}href="{
{url}}"{% endraw %}
 获得同样的结果:这样没错,并且实际上在内部特性插值会转为 v-bind 绑定。

另一个例子是 v-on 指令,它用于监听 DOM 事件:

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

这里参数是被监听的事件的名字。我们也会详细说明事件绑定。

b、修饰符

修饰符 (Modifiers) 是以半角句号 . 开始的特殊后缀,用于表示指令应当以特殊方式绑定。例如 .literal 修饰符告诉指令将它的值解析为一个字面字符串而不是一个表达式:

<a v-bind:href.literal="/a/b/c"></a>

当然,这似乎没有意义,因为我们只需要使用 href="/a/b/c" 而不必使用一个指令。这个例子只是为了演示语法。后面我们将看到修饰符更多的实践用法。

 

5、缩写是哪2个最常用指令的缩写?

v-bind v-on

v- 前缀是一种标识模板中特定的 Vue 特性的视觉暗示。当你需要在一些现有的 HTML 代码中添加动态行为时,这些前缀可以起到很好的区分效果。但你在使用一些常用指令的时候,你会感觉一直这么写实在是啰嗦。而且在构建单页应用时,Vue.js 会管理所有的模板,此时 v- 前缀也没那么重要了。因此Vue.js 为两个最常用的指令 v-bind 和 v-on 提供特别的缩写:

a、v-bind 缩写

<!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> <!-- 完整语法 --> <button v-bind:disabled="someDynamicCondition">Button</button> <!-- 缩写 --> <button :disabled="someDynamicCondition">Button</button>

b、v-on 缩写

<!-- 完整语法 --> <a v-on:click="doSomething"></a> <!-- 缩写 --> <a @click="doSomething"></a>

它们看起来跟“合法”的 HTML 有点不同,但是它们在所有 Vue.js 支持的浏览器中都能被正确地解析,并且不会出现在最终渲染的标记中。缩写语法完全是可选的,不过随着一步步学习的深入,你会庆幸拥有它们。

 

 

 

二、Vue.js 数据绑定语法

參考:Vue.js 数据绑定语法_w3cschool
https://www.w3cschool.cn/vuejs/zwi71js0.html

数据绑定语法

Vue.js 的模板是基于 DOM 实现的。这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强。Vue 模板因而从根本上不同于基于字符串的模板,请记住这点。

 

1、插值

文本

数据绑定最基础的形式是文本插值,使用 “Mustache” 语法(双大括号):

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

Mustache 标签会被相应数据对象的 msg 属性的值替换。每当这个属性变化时它也会更新。

你也可以只处理单次插值,今后的数据变化就不会再引起插值更新了:

<span>This will never change: {
         {* msg }}</span>

原始的 HTML

双 Mustache 标签将数据解析为纯文本而不是 HTML。为了输出真的 HTML 字符串,需要用三 Mustache 标签:

<div>{
         {
         { raw_html }}}</div>

内容以 HTML 字符串插入——数据绑定将被忽略。如果需要复用模板片断,应当使用 partials。

在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。记住,只对可信内容使用 HTML 插值,**永不**用于用户提交的内容。

HTML 特性

Mustache 标签也可以用在 HTML 特性 (Attributes) 内:

<div id="item-{
                { id }}"></div>

注意在 Vue.js 指令和特殊特性内不能用插值。不必担心,如果 Mustache 标签用错了地方 Vue.js 会给出警告。

 

2、绑定表达式

放在 Mustache 标签内的文本称为绑定表达式。在 Vue.js 中,一段绑定表达式由一个简单的 JavaScript 表达式和可选的一个或多个过滤器构成。

JavaScript 表达式

到目前为止,我们的模板只绑定到简单的属性键。不过实际上 Vue.js 在数据绑定内支持全功能的 JavaScript 表达式:

{
   { number + 1 }}

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

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

这些表达式将在所属的 Vue 实例的作用域内计算。一个限制是每个绑定只能包含单个表达式,因此下面的语句是无效的:

<!-- 这是一个语句,不是一个表达式: --> {
     { var a = 1 }} <!-- 流程控制也不可以,可改用三元表达式 --> {
       { if (ok) { return message } }}

过滤器

Vue.js 允许在表达式后添加可选的“过滤器 (Filter) ”,以“管道符”指示:

{
   { message | capitalize }}

这里我们将表达式 message 的值“管输(pipe)”到内置的 capitalize 过滤器,这个过滤器其实只是一个 JavaScript 函数,返回大写化的值。Vue.js 提供数个内置过滤器,在后面我们会谈到如何开发自己的过滤器。

注意管道语法不是 JavaScript 语法,因此不能在表达式内使用过滤器,只能添加到表达式的后面。

过滤器可以串联:

{
   { message | filterA | filterB }}

过滤器也可以接受参数:

{
   { message | filterA 'arg1' arg2 }}

过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串,而不带引号的参数按表达式计算。这里,字符串 'arg1' 将传给过滤器作为第二个参数,表达式 arg2 的值在计算出来之后作为第三个参数。

 

3、指令

指令 (Directives) 是特殊的带有前缀 v- 的特性。指令的值限定为绑定表达式,因此上面提到的 JavaScript 表达式及过滤器规则在这里也适用。指令的职责就是当其表达式的值改变时把某些特殊的行为应用到 DOM 上。我们来回头看下“概述”里的例子:

<p v-if="greeting">Hello!</p>

这里 v-if 指令将根据表达式 greeting 值的真假删除/插入 <p> 元素。

参数

有些指令可以在其名称后面带一个“参数” (Argument),中间放一个冒号隔开。例如,v-bind 指令用于响应地更新 HTML 特性:

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

这里 href 是参数,它告诉 v-bind 指令将元素的 href 特性跟表达式 url 的值绑定。可能你已注意到可以用特性插值 {% raw %}href="{
{url}}"{% endraw %}
 获得同样的结果:这样没错,并且实际上在内部特性插值会转为 v-bind 绑定。

另一个例子是 v-on 指令,它用于监听 DOM 事件:

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

这里参数是被监听的事件的名字。我们也会详细说明事件绑定。

修饰符

修饰符 (Modifiers) 是以半角句号 . 开始的特殊后缀,用于表示指令应当以特殊方式绑定。例如 .literal 修饰符告诉指令将它的值解析为一个字面字符串而不是一个表达式:

<a v-bind:href.literal="/a/b/c"></a>

当然,这似乎没有意义,因为我们只需要使用 href="/a/b/c" 而不必使用一个指令。这个例子只是为了演示语法。后面我们将看到修饰符更多的实践用法。

 

4、缩写

v- 前缀是一种标识模板中特定的 Vue 特性的视觉暗示。当你需要在一些现有的 HTML 代码中添加动态行为时,这些前缀可以起到很好的区分效果。但你在使用一些常用指令的时候,你会感觉一直这么写实在是啰嗦。而且在构建单页应用时,Vue.js 会管理所有的模板,此时 v- 前缀也没那么重要了。因此Vue.js 为两个最常用的指令 v-bind 和 v-on 提供特别的缩写:

v-bind 缩写

<!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> <!-- 完整语法 --> <button v-bind:disabled="someDynamicCondition">Button</button> <!-- 缩写 --> <button :disabled="someDynamicCondition">Button</button>

v-on 缩写

<!-- 完整语法 --> <a v-on:click="doSomething"></a> <!-- 缩写 --> <a @click="doSomething"></a>

它们看起来跟“合法”的 HTML 有点不同,但是它们在所有 Vue.js 支持的浏览器中都能被正确地解析,并且不会出现在最终渲染的标记中。缩写语法完全是可选的,不过随着一步步学习的深入,你会庆幸拥有它们。

 

 

 

 
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/101303.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 海思hi3798mv300和310的区别_海思3516

    海思hi3798mv300和310的区别_海思3516在网上搜寻海思HI3519或者hi3516实时识别除了官方给的SDK中有Rfcn的实时识别例子之外,其它都是读图片例子。官方例子中给了如下网络参考:Rfcn、Segnet、FasterRcnn、Cnn、Ssd、Yolov1、Yolov2、Yolov3、Lstm、Pvanet在SDK中文件夹路径为/rp-hi3516dv300-busybox/smp/a7_linux/mpp/sample/svp/nnie其中有一个sample_nnie_main.c文件,官方例子如下:/************

  • 计算机网络 — HTTP协议 和 HTTPS[通俗易懂]

    计算机网络 — HTTP协议 和 HTTPS[通俗易懂]1.了解HTTP协议1.1HTTP是什么HTTP(HyperTextTransferProtocol,超文本传输协议)是一种应用非常广泛的应用层协议.所谓“超文本”的含义,就是传输的内容不仅仅是文本(比如html,css这个就是文本),还可以是一些其他的资源,比如图片,视频,音频等二进制的数据1.2抓包工具的使用1.Fiddler的下载①可以直接在官网下载Fiddler官网地址②也可以直接进入fiddler搜索页2.Fiddl

    2022年10月16日
  • idea设置全局搜索快捷键

    idea设置全局搜索快捷键idea默认的全局搜索二、修改为Alt+F

  • Oracle 根据dbf文件的数据恢复[通俗易懂]

    Oracle 根据dbf文件的数据恢复[通俗易懂]数据丢失真的是很严重的事情,此处记录下一次数据恢复的历程。背景:服务器上,Oracle数据库数据丢失,开发机上,有数据,但是因为系统坏了(太巧了),先进去把dbf文件备份出来,然后重做了系统(全盘格式化的,不要问我为什么不是只有c盘,售后做的,所以才有了后面数据恢复困难的事情)。数据恢复方法:1.闪回2.根据dbf恢复3.使用工具prm-dul方案一:数据闪回。…

  • 软件安全之动态链接库的使用 Libzplay 播放音乐「建议收藏」

    实验1动态链接库的使用实验说明Libzplay是遵循GPL协议的开源库,它集成了mp3、flac、ac3、aac、wav等多种音频格式的解码器和编码器,提供了面向C/C++、C#、Delphi等多种编程语言的接口,仅需3行代码(创建播放资源,打开文件,开始播放)便可实现音乐播放功能。实验目的本实验通过Libzplay提供的C语言接口,实现简单的音乐播放器,以此学习DLL的隐式和显式加载方式。实验原理课程第2讲基础知识实验环境Windows

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号