Vue2.5笔记:Vue中的模版

我们在上一篇说到如何把 Vue 实例中的数据显示到视图中,就会需要用到我们的模版,我们只是简单的使用了一些,模版其实还有很多其他的特性。今天我们就来看看模版的其他特性。

模版语法

Vue 中的模版是基于 HTML 的模版语法,所有的 Vue 模版都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。这也非常符合 Vue 的易用的特点减少开发者的学习成本。

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

但是如果你是 React 的开发者或者你熟悉虚拟 DOM 并且偏爱原生 Javascript,你完全可以不使用模版,而是直接使用渲染函数(render)或者使用 JSX 语法。

<div id="root">
    <h1>超帅的 {{name}}</h1>
</div>
<script>
    var vm = new Vue({
        el: '#root',
        data: {
            name: 'Modeng'
        }
    });
</script>

可以看到我们想要的效果显示出来了,在这里我们用到了模版最常见的数据绑定形式 “Mustache”语法 (双大括号) 语法,Mustache 标签将会被数据中相对应的属性替换,并且绑定的对象的属性发生了改变,差值处的内容也会响应的改变。

开心一刻:Mustache 的中文意思是胡子,但是我怎么看 {{ }} 这个也不像胡子啊,不知道老外怎么起的这个名字。

有人可能会想到 Mustache 语法是不是也可以绑定 HTML 元素的属性呢?

<h1 id="{{id}}"></h1>

其实这里是不能这么做的,Mustache 语法不能用来绑定 HTML 元素的属性,那如果我们需要绑定元素的属性 Vue 给我们提供了一个指令方法 v-bind利用这个我们可以进行元素属性的绑定。

上面说到只要修改我们绑定的数据差值绑定的内容也会跟着替换,不过 Vue 中给我们提供了一个指令可以改变这一特性,我们可以通过使用 v-once指令当数据改变时我们的内容也不会被替换。

表达式

模版中不仅仅可以进行简单的数据绑定操作,我们还可以在模版中进行简单的 Javascript 表达式。

<div id="root">
    <h1>超帅的 {{name}} 仅仅只有 {{age + 1}} 岁</h1>
</div>
<script>
    var vm = new Vue({
        el: '#root',
        data: {
            name: 'Modeng',
            age: 14
        }
    });
</script>

这里支持+、-、*、/四个运算方法;除了运算方法之外,我们还可以使用 三元表达式 我们来看看一个例子

<div id="root">
    <h1>超帅的 {{name}} {{ realAge > 18 ? '不是' : '是' }} 未成年 </h1>

    <h1>超帅的 {{name}} {{ fakeAge > 18 ? '不是' : '是' }} 未成年 </h1>
</div>
<script>
    var vm = new Vue({
        el: '#root',
        data: {
            name: 'Modeng',
            realAge: 14,
            fakeAge: 20
        }
    });
</script>

既然我们用到了三元表达式 我们肯定会想到 if语句,但是 Vue 只提供我们在模版中使用比较简单的表达式(单个表达式),如果你的逻辑比较复杂,你不应该在模版中进行,而且应该在我们的实例的方法内进行。

下面我们继续看一个例子,我们如何利用它进行字符的反转效果。

<div id="root">
    <h1>{{ name }} </h1>
    <h1>{{ name.split("").reverse().join("") }} </h1>
</div>
<script>
    var vm = new Vue({
        el: '#root',
        data: {
            name: 'Modeng'
        }
    });
</script>

我们可以看到 Mustache 语法非常的强大,上面的表达式我们只是使用了一个方面,我们还可以进行很多方面的应用。

Vue 中除了使用 Mustache 语法( {{ }} )将数据插入到模版中,我们还可以使用两个指令 v-textv-html进行数据到插入。

我们在使用模版的时候不仅仅只有数据的插入有时候我们也会根据一定的条件进行模版渲染,这时候我们就可以用 v-ifv-show,不仅如此我们还会经常进行列表和模版的循环我们会用到 v-for指令。这些在后续的章节中我们会一一说到。

模版的渲染

在文章的一开始我们已经提到,Vue 的模版是基于 HTML 的,我们也可以使用虚拟 DOM 和 JSX 语法。

从上面的图中我们看到 Vue 的整个模版的渲染过程,首先我们的模版编译为AST(抽象语法树),再由 AST 生成渲染函数,由渲染函数结合数据生成 Virtual DOM 树,之后对Virtual DOM 进行 diffpath之后生成新的 UI

总结

本文主要进行来模版语法的介绍,我们不仅仅可以使用它将数据插入在模版中,还可以进行简单的表达式的计算。我们也简单的叙述了模版编译的整个流程。当然了模版渲染的过程中还有很多的细节我们没有说明,但是一点也不影响我们对于项目的开发与使用 Vue 如果你对整个渲染的细节非常感兴趣也可以自信查阅资料进行了解。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏新工科课程建设探讨——以能源与动力工程专业为例

2.2.3 文档对象模型DOM及表单

文档对象模型DOM用途是什么?先从一棵树说起。下面是一棵树,由,根部、枝干、叶构成,通过根部可以访问到任何一个叶节点。

1980
来自专栏软件开发

前端MVC Vue2学习总结(五)——表单输入绑定、组件

一、表单输入绑定 1.1、基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,...

47714
来自专栏卡少编程之旅

四个Vue的写法优化技巧

3456
来自专栏web前端

JavaScript基础学习--01热身

一、js大致思路: 1、完成静态HTML+CSS 2、过一遍整体的大致js思路 3、按照从上到下的,从有至无的顺序完成js编写(包括先写大致轮廓,再细化细节部分...

1899
来自专栏云瓣

从 0 到 1 实现 React 系列 —— JSX 和 Virtual DOM

看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/...)

1041
来自专栏更流畅、简洁的软件开发方式

表单控件续(1)——应用接口来简化和分散代码

上次有点仓促,有几个地方没有明确。 后者是整个流程,前者是其中的一个步骤,是一个简单的思路说明,其中前三段代码都是表单控件里面的。 2、我要写的是一个表单控...

2049
来自专栏马涛涛的专栏

虚拟DOM

DOM 是 JavaScript 操作网页的接口,全称为“文档对象模型”(Document Object Model)。它的作用是将网页转为一个 JavaScr...

3462
来自专栏技术墨客

React 状态、事件与动态渲染

例子中使用map方法将每个元素的值*2,最后得到的数组为:[2, 4, 6, 8, 10]。在React中,处理组件数组的方式与之类似。

890
来自专栏JetpropelledSnake

Vue学习笔记之Vue指令系统介绍

所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了。

1044
来自专栏web前端

Vuejs --02 Vue实例

一、构造器      1、vm(view model 表示Vue实例),每个Vuejs都是通过构造函数Vue创建Vue的根实例启动 var vm = new V...

2288

扫码关注云+社区

领取腾讯云代金券