Vue架构【基础篇-第04章】:模板语法

模板语法

Vue.js使用了基于HTML的模板语法,允许开发者声明式的将DOM绑定至底层Vue实例的数据。所有Vue.js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析。

在底层的实现上,Vue将模板编译成虚拟DOM渲染函数,结合响应系统,Vue能够智能的计算出最少需要重新渲染多少组件,并把DOM操作次数减到最少。

一、插入值

1. 插入文本

数据绑定最常见的形式就是使用"Mustache"语法(双大括号)的文本插值:

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

Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时,绑定的数据对象上 msg 属性发生了改变,插值处的内容都会更新。

通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定:

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

1.2  指令系统之v-once

作用:只渲染元素和组件一次,随后的重新渲染,元素/组件及其所有的子节点被视为静态内容并跳过。这可以用于优化更新性能。

2. 原始HTML

双括号会将数据解释为普通文本,而非HTML代码。为了输出真正的HTML,我们需要使用 v-html 指令;

2.1  指令系统之 v-html,以及 v-text

作用:v-html输出真正的HTML。v-text输出含有代码的文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app-6">
    {{ msg }}
    <div v-text="msg"></div>
    <div v-html="msg"></div>
</div>
</body>
<script src="vue.js"></script>
<script>
    var app6 = new Vue({
        el: "#app-6",
        data() {
            return {
               msg:"<h2>灯火阑珊</h2>"
            }
        }
    })
</script>
</html>

v-html 以及 v-text

结果:

3. 使用JavaScript表达式

迄今为止,在我们的模板中,我们一直都只绑定简单的属性键值。但实际上,对于所有的数据绑定,Vue.js 都提供了完全的 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 } }}

二、指令

指令是带有 v- 前缀的特殊特性。指令特性的值预期是单个JS表达式。指令的职责是当表达式的值改变时,将其产生的连带影响,响应式的作用于DOM。

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

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

1. 参数

一些指令能够接收一个“参数”,在指令名称之后以冒号表示。例如,v-bind 指令可以用于响应式地更新 HTML 特性:

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

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

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

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

2.  修饰符

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

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

在接下来对 v-on 和 v-for 等功能的探索中,你会看到修饰符的其它例子。

三、缩写

v- 前缀作为一种视觉提示,用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时,v- 前缀很有帮助,然而,对于一些频繁用到的指令来说,就会感到使用繁琐。同时,在构建由 Vue.js 管理所有模板的单页面应用程序 (SPA - single page application) 时,v- 前缀也变得没那么重要了。因此,Vue.js 为 v-bind和 v-on 这两个最常用的指令,提供了特定简写:

1. v-bind缩写

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

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

2. v-on缩写

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

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

它们看起来可能与普通的 HTML 略有不同,但 : 与 @ 对于特性名来说都是合法字符,在所有支持 Vue.js 的浏览器都能被正确地解析。而且,它们不会出现在最终渲染的标记中。缩写语法是完全可选的,但随着你更深入地了解它们的作用,你会庆幸拥有它们。

原文地址:https://www.cnblogs.com/zhangjunkang/p/10022937.html

时间: 2024-11-09 02:13:26

Vue架构【基础篇-第04章】:模板语法的相关文章

sql系列(基础篇)-第二章 约束和排序数据

更好的看↑代码点击VIEW PLAN 第二章 约束和排序数据 1. 在 emp 表中选择工资介于 1500 到 2500 的员工的信息: 注意:使用 between 下边界 and 上边界时,条件包括边界值: [email protected]>l 1 select * from emp 2* where sal between 1500 and 2500 [email protected]>/ EMPNO ENAME JOB MGR HIREDATE SAL COMM DEPTNO ----

sql系列(基础篇)-第一章 关于sysdate

第一章 基本的SQL语句 1. 查询数据库系统时间,常以服务器默认的格式进行显示(根据数据库的字符集而定): 注意:dual 为数据库中的虚表,隶属于管理员 sys 用户,但所有的用户都可以访问:无实际意义,仅充当select 语句的结构(用 select取系统信息.临时结果等时,以 dual 充当语句结构): [email protected]>select sysdate from dual; SYSDATE --------- 18-JUN-14 1.1 修改系统时间的显示格式:(sess

ngnix 部署 vue项目-基础篇

ngnix 部署 vue项目-基础篇 标签(空格分隔): docker ngnix vue Dockerfile 目录 基础知识 主要知识点 ###1.基础知识 image container docker 命令 build run rm rmi exec Dockerfile npm 打包vue项目 ###2.主要知识点 Dockerfile image container 简单来讲,Dockerfile构建出Docker镜像,通过Docker镜像运行Docker容器. Dockerfile

Vue.js基础篇实战--一个ToDoList小应用

距离开始学Vue已经过去一个多月了,总想把学到的东西柔和在一起,做点东西出来,于是有了这个Todolist小应用. 主要功能就是把一天要做的事情记录下来,还实现了: 标记完成事件 删除已完成事件 各种排序 仅显示未完成的项目 本地保存 截图看这里 用时一周,14次commits,把心中的构想基本实现了.详情请看:这里 整个过程下来,收获还是很多的, 1.对mvvm有了进一步的理解, 2.对css布局有了更多的了解. 3.更进一步理解了Vue的事件和组件机制.这些机制将应用解耦,每一部分都隔离出来

成小胖学习微服务架构&#183;基础篇

看到最近“微服务架构”这个概念这么火,作为一个积极上进的程序猿,成小胖忍不住想要学习学习.而架构师老王(不是隔壁老王)最近刚好在做公司基础服务的微服务化研究和落地,对此深有研究. 于是成小胖马上屁颠屁颠的跑过去向老王请教:“王哥,我看微服务架构这么火,我也想学,您给我讲讲啥是微服务架构呗?” 老王笑了笑说:“要想知道什么是微服务架构,你得先知道什么系统架构设计.” 成小胖的理想是成为一名架构师,平时积累了不少知识,因此对“系统架构设计”这个概念还是很熟悉的,因此他马上就给出了答案[1]: 系统架

Java语言程序设计(基础篇) 第四章 数学函数、字符和字符串

第四章 数学函数.字符和字符串 4.2 常用数学函数 方法分三类:三角函数方法(trigonometric method).指数函数方法(exponent method)和服务方法(service method) 4.4 String类型 String类型不是基本类型,而是引用类型(reference type).

第一部分 基础篇 第三章 MongoDB体系结构

声明:该文章主要来自<MongoDB实战>一书内容,主要想通过该书学习MongoDB的相应知识,加深理解,故写在自己的博文当中,作为记录,在最后的章节中,会有一个自己集合MongoDB数据库应用的JavaEE的web应用. MongoDB是一个可移植的数据库,它在流行的每一个平台上都可以使用,即所谓的跨平台性,在不同的操作系统上虽然略有差别,但是从整体架构上来看,MongoDB在不同的平台上是一样的,如数据逻辑结构和数据存储等等. 一个运行着的MongoDB数据库就可以看成是一个MongoDB

第一部分 基础篇 第四章 MongoDB快速入门

声明:该文章主要来自<MongoDB实战>一书内容,主要想通过该书学习MongoDB的相应知识,加深理解,故写在自己的博文当中,作为记录,在最后的章节中,会有一个自己集合MongoDB数据库应用的JavaEE的web应用. MongoDB shell是MongoDB自带的交互式JavaScript shell,用来对MongoDB进行操作和管理的交互式环境. 使用./mongo --help可以查看相关连接参数,下面将从常见的操作,如插入.查询.修改.删除等几个方面阐述MongoDB shel

第一部分 基础篇 第四章 MongoDB查询

声明:该文章主要来自<MongoDB实战>一书内容,主要想通过该书学习MongoDB的相应知识,加深理解,故写在自己的博文当中,作为记录,在最后的章节中,会有一个自己集合MongoDB数据库应用的JavaEE的web应用. 1.查询记录 1.1.普通查询 在没有深入查询之前,我们先看看怎么从一个查询中返回一个游标对象,可以简单的通过find()来查询,它返回一个任意结构的集合,如果实现特定的查询在稍后讲解. 实现上面同样的查询,然后通过while来输出: > var cursor = d