摘要：模版语法中的模版是基于的模版语法，所有的模版都是合法的，所以能被遵循规范的浏览器和解析器解析。表达式模版中不仅仅可以进行简单的数据绑定操作，我们还可以在模版中进行简单的表达式。我们也简单的叙述了模版编译的整个流程。
我们在上一篇说到如何把 Vue 实例中的数据显示到视图中，就会需要用到我们的模版，我们只是简单的使用了一些，模版其实还有很多其他的特性。今天我们就来看看模版的其他特性。
模版语法Vue 中的模版是基于 HTML 的模版语法，所有的 Vue 模版都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。这也非常符合 Vue 的易用的特点减少开发者的学习成本。
在底层实现上，Vue 将模版编译成虚拟 DOM 渲染函数，结合响应式系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
但是如果你是 React 的开发者或者你熟悉虚拟 DOM 并且偏爱原生 Javascript，你完全可以不使用模版，而是直接使用渲染函数（render）或者使用 JSX 语法。
超帅的 {{name}}
可以看到我们想要的效果显示出来了，在这里我们用到了模版最常见的数据绑定形式 “Mustache”语法 (双大括号) 语法，Mustache 标签将会被数据中相对应的属性替换，并且绑定的对象的属性发生了改变，差值处的内容也会响应的改变。
开心一刻：Mustache 的中文意思是胡子，但是我怎么看 {{ }} 这个也不像胡子啊，不知道老外怎么起的这个名字。
有人可能会想到 Mustache 语法是不是也可以绑定 HTML 元素的属性呢？
其实这里是不能这么做的，Mustache 语法不能用来绑定 HTML 元素的属性，那如果我们需要绑定元素的属性 Vue 给我们提供了一个指令方法 v-bind 利用这个我们可以进行元素属性的绑定。
上面说到只要修改我们绑定的数据差值绑定的内容也会跟着替换，不过 Vue 中给我们提供了一个指令可以改变这一特性，我们可以通过使用 v-once 指令当数据改变时我们的内容也不会被替换。
表达式模版中不仅仅可以进行简单的数据绑定操作，我们还可以在模版中进行简单的 Javascript 表达式。
超帅的 {{name}} 仅仅只有 {{age + 1}} 岁
这里支持＋、－、＊、／ 四个运算方法；除了运算方法之外，我们还可以使用 三元表达式 我们来看看一个例子
超帅的 {{name}} {{ realAge > 18 ? "不是" : "是" }} 未成年
超帅的 {{name}} {{ fakeAge > 18 ? "不是" : "是" }} 未成年
既然我们用到了三元表达式 我们肯定会想到 if 语句，但是 Vue 只提供我们在模版中使用比较简单的表达式（单个表达式），如果你的逻辑比较复杂，你不应该在模版中进行，而且应该在我们的实例的方法内进行。
下面我们继续看一个例子，我们如何利用它进行字符的反转效果。
{{ name }}
{{ name.split("").reverse().join("") }}
我们可以看到 Mustache 语法非常的强大，上面的表达式我们只是使用了一个方面，我们还可以进行很多方面的应用。
Vue 中除了使用 Mustache 语法（ {{ }} ）将数据插入到模版中，我们还可以使用两个指令 v-text 和 v-html 进行数据到插入。
我们在使用模版的时候不仅仅只有数据的插入有时候我们也会根据一定的条件进行模版渲染，这时候我们就可以用 v-if 和 v-show，不仅如此我们还会经常进行列表和模版的循环我们会用到 v-for 指令。这些在后续的章节中我们会一一说到。
模版的渲染在文章的一开始我们已经提到，Vue 的模版是基于 HTML 的，我们也可以使用虚拟 DOM 和 JSX 语法。
从上面的图中我们看到 Vue 的整个模版的渲染过程，首先我们的模版编译为AST（抽象语法树），再由 AST 生成渲染函数，由渲染函数结合数据生成 Virtual DOM 树，之后对Virtual DOM 进行 diff 和 path之后生成新的 UI
总结本文主要进行来模版语法的介绍，我们不仅仅可以使用它将数据插入在模版中，还可以进行简单的表达式的计算。我们也简单的叙述了模版编译的整个流程。当然了模版渲染的过程中还有很多的细节我们没有说明，但是一点也不影响我们对于项目的开发与使用 Vue 如果你对整个渲染的细节非常感兴趣也可以自信查阅资料进行了解。
关注微信公众号：六小登登。领取全套学习资源
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/98057.html
摘要：总结这边文章主要是介绍了下的实例与生命周期，在实例化的过程中我们可以添加许多可选对象，比如生命周期钩子函数等，让实例产生我们想要的行为。 理解与认识 Vue 的实例是我们学习 Vue 非常重要的一步，也是非常必须的，因为实例是它的一个起点，也是它的一个入口，只有我们创建一个 Vue 实例之后，我们才行利用它进行一些列的操作。 首先 Vue 没有完全遵守 MVVM 的架构模式，但是它的设...
摘要：最开始的项目开发中，我们如果使用第三方的库我们会直接在项目中直接使用元素标签引入即可。安装成功之后，我们执行以下命令就可以创建一个完整的项目案例。 最开始的项目开发中，我们如果使用第三方的库我们会直接在项目中直接使用 script 元素标签引入即可。 Vue 我们也可以这种引入的方式 {{name}} const vm = new Vue({ el: #r...
摘要：菜鸟教程这是一个属性其值是字符串菜鸟教程同上这是一个属性其值是字符串用于定义的函数，可以通过来返回函数值。它们都有前缀，以便与用户定义的属性区分开来。 开篇语 我最近学习了js,取得进步,现在学习vue.js.建议新手学习,请不要用npm的方式(vue-cli,vue脚手架),太复杂了. 请直接下载vue.js文件本地引入,就上手学习吧参照菜鸟教程网站的vue.js教程http://...
摘要：并在上面使用，最终渲染结果将不包括元素。另外一个根据条件展示元素的指令，用法与大致相同。注意，不支持元素，也不支持与看完了文章，你会发现我们可以利用和两个指令来控制我们元素的行为。 熟悉 Angular 的同学对指令肯定不会陌生，Vue中也借鉴了指令这一特性，在 Vue 中指令都是带有 v- 的特殊属性，那么指令有什么作用呢？ 我的理解就是：指令是用来控制 DOM 元素的行为，例如最...
摘要：哪吒别人的看法都是狗屁，你是谁只有你自己说了才算，这是爹教我的道理。哪吒去他个鸟命我命由我，不由天是魔是仙，我自己决定哪吒白白搭上一条人命，你傻不傻敖丙不傻谁和你做朋友太乙真人人是否能够改变命运，我不晓得。我只晓得，不认命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出处 查看github最新的Vue...
阅读 450·2023-04-25 17:26
阅读 1477·2021-08-05 09:58
阅读 1925·2019-08-30 13:17
阅读 926·2019-08-28 17:52
阅读 1041·2019-08-26 18:27
阅读 1397·2019-08-26 14:05
阅读 3589·2019-08-26 14:05
阅读 1558·2019-08-26 10:45
