专栏首页Modeng的专栏Vue2.5笔记:Vue中的模版

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 条评论
登录 后参与评论

相关文章

  • 图片布局的最全实现方式都在这了!附源码

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    六小登登
  • Vue案例引发的「过滤器」的使用

    最近在项目的开发中,出现一些格式化数据的情况,比如字母的大小写,比如一些价格的数据格式。等等一些格式的显示。

    六小登登
  • Vue2.x 的笔记:第一次的感受 Vue 开篇

    在互联网高速发现的今天,可以说每天都在变化着一不留神你就会错过一个亿,所以你不得不时刻的保持着高度的专注。

    六小登登
  • Limit Login Attempts 限制 wordpress 后台登陆次数

    有同学发现自己的 wordpress 网站后台不断被软件扫描,也不知道如何禁止掉。其实可以借助 wordpress 插件来屏蔽掉无聊的弱口令扫描,今天要说的是这...

    魏艾斯博客www.vpsss.net
  • Excel图表学习66:绘制动态的圆环/柱形图组合图表

    导语:本文学习整理自chandoo.org,非常巧妙且具有想像力的Excel制图技巧。

    fanjy
  • 一言难尽,Jpa这个功能差点让我丢了工作

    前阵子,有位朋友在微信上问我数据被删了能不能恢复,我问了下原因,居然是因为一个配置项惹的祸。

    猿天地
  • Python 零基础入门

    Python 是一门优雅且健壮的面向对象解释型计算机程序编程语言,具有面向对象、可升级、可扩展、可移植 语法简洁清晰易学、易读写、易维护、健壮性、通用性、跨平台...

    测试开发社区
  • Limit Login Attempts 限制 wordpress 后台登陆次数

    有同学发现自己的 wordpress 网站后台不断被软件扫描,也不知道如何禁止掉。其实可以借助 wordpress 插件来屏蔽掉无聊的弱口令扫描,今天要说的是这...

    魏艾斯博客www.vpsss.net
  • Java VisualVM使用备忘

    jeremyxu
  • 帮校园按下“加速键”,腾讯用了哪些“装备”?

    ? 在以分钟来度量的智能教育时代,传统的教育方式消耗了师生大量的时间和精力。如同游戏中的主人公需要不断升级“装备”,才能快速成长为大神一样,无论学校、学生还是...

    鹅老师

扫码关注云+社区

领取腾讯云代金券