模板语法介绍

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

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

如果熟悉虚拟dom并且偏爱JavaScript的原始力量,也可以不用模板,直接写渲染函数,使用可选的JSX语法。

插值——文本

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

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

html

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

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

html

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

插值——原始HTML

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

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

这个span的内容将会被替换成为属性值rawHtml,直接作为HTML——会忽略解析属性值中的数据绑定。注意,不能使用v-html来复合局部模板,因为Vue不是基于字符串的模板引擎。反之,对于用户界面(UI),组件更适合作为可重用和可组合的基本单位。

注意:站点上动态渲染任意的html非常危险,很容易导致XSS攻击

请只对可信内容使用HTML插值,绝对不要对用户提供的内容使用插值

插值——特性

Mustache语法不能作用在HTML特性上,遇到这种情况应该使用v-bind指令,如下:

html

<div v-bind:id="dynamicId"></div>

在布尔特性的情况下,它们的存在即暗示为true,v-bind工作起来略有不同,在这个例子中:

如果isButtonDisabled的值是null、undefined或false,则disabled特性甚至不会被包含在渲染出来的<button>元素中。

html

<button v-bind:disabled="isButtonDisabled">Button</button>

插值——使用JavaScript表达式

迄今为止,在我们的模板中,我们一直都只绑定简单的属性键值。但实际上,对于所有的数据绑定,Vue.js都提供了完全的JavaScript表达式支持。

html

{{ number + 1 }}

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

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

<div v-bind:id="'list-' + id"></div>

这些表达式会在所属Vue实例的数据作用域下作为JavaScript被解析。有个限制是就是,每个绑定都只能包含单个表达式,所以下面的例子都不会生效。

html

<!-- 这是语句,不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效,请使用三元表达式 -->
{{ if (ok) { return message } }}

注意:模板表达式都被放在沙盒中,只能访问全局变量的一个白名单,如Math和Date。你不应该在模板表达式中试图访问用户定义的全局变量。

指令介绍

指令(Directives)是带有v-前缀的特殊属性。指令特性的值预期是单个JavaScript表达式(v-for是例外情况,后面再讨论)。

指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式的作用于dom,回顾在介绍中看到的例子。

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

html

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

指令——参数

一些指令能够接收一个"参数",在指令之后以冒号表示。例如:,v-bind指令可用于响应式的更新HTMl的特性,如下:

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

html

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

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

在这里参数是监听的事件名。我们也会更详细的taolun讨论事件处理。

html

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

指令——修饰符

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

html

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

缩写介绍 

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

v-bind缩写

html

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

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

v-on缩写

html

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

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

上面两个例子看起来可能与普通的HTMl不同,但:与@对于特性名来说都是合法字符,在所有支持Vue.js的浏览器都能被正确的解析。而且,他们不会出现在最终渲染的标记中。缩写语法是完全可选的,但随着深入学习,我们会清醒拥有他们。

vue基础——模板语法的更多相关文章

  1. vue基础---模板语法

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

  2. Vue基础之Vue的模板语法

    Vue基础之Vue的模板语法 数据绑定 01 数据绑定最常见的形式就是使用插值表达式(两个大括号!)[也就是小胡子语法!mustache] <body> <!-- Vue.js的应用 ...

  3. Vue.js 模板语法

    本章节将详细介绍 Vue.js 模板语法,如果对 HTML +Css +JavaScript 有一定的了解,学习起来将信手拈来. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 ...

  4. VUE:模板语法(小白自学)

    VUE:模板语法 一:何为声明式 安装规定的语法,去实现一些效果(不需要管流程). 二:模板语法 <!DOCTYPE html> <html> <head> < ...

  5. 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法

    Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...

  6. Vue常用模板语法

    常用模板语法   本篇将在上一篇的基础上记录文本渲染.表达式.过滤器以及常用指令的简单用法. 一.文本渲染 Vue支持动态渲染文本,即在修改属性的同时,实时渲染文本内容.同时为了提高渲染效率,也支持只 ...

  7. 前端框架之Vue(2)-模板语法

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

  8. 一起学Vue之模板语法

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

  9. Vue小白篇 -Vue 的模板语法

    可以插入任何你想插入的内容,除了 if-else if-else用三元运算符代替 <div id="box"> <!--模板语法--> <h2> ...

随机推荐

  1. MongoDB注册Windows服务启动

    下载MongoDB安装到:E:\Work_App\MongoDB 这个目录 安装:E:\Work_App\MongoDB (安装在专门的目录中) 配置: 1.在E:\Work_App\MongoDB\ ...

  2. Nginx+redis部署tomcat集群

    一.部署环境: 两个tomcat实例部署在Ubuntu 14上,IP地址分别为192.168.1.110和192.168.1.111,Nginx和redis部署在windows7上,IP地址为192. ...

  3. Queque 方法对比和分类

    添加类:方法 public boolean add(E e)      增加一个元索                     如果队列已满,则抛出一个IIIegaISlabEepeplian异常 bo ...

  4. php如何分割字符串?php mb_substr分割字条串,解决中文乱码问题,支持分割中文! (转)

    因为网站开发需要,必须有一项功能可以把字符串一个一个分割开来,并且转换为数组. 刚开始用“str_split函数”在实验分割中文字符时就出现了乱码. 蚂蚁学院经过一翻研究,最终发现以下方法可以有效分割 ...

  5. ERROR 2059 (HY000): Authentication plugin 'caching_sha2_password' cannot be loaded

    问题: 连接Docker启动的mysql出现:ERROR 2059 (HY000): Authentication plugin 'caching_sha2_password' cannot be l ...

  6. jsoncpp构造json字符串和json数组

    jsoncpp构造json字符串和json数组 参考文章:Jsoncpp的简单使用 下载json文件夹放在c++项目的include目录下,在CMakeLists中include进去,然后就可以在代码 ...

  7. java操作Excel之POI(6)使用POI实现使用模板批量添加数据

    action是用struts2写的:前端界面easyUI写的, 前端: <!DOCTYPE html> <html> <head> <meta charset ...

  8. appium 中文API 集

    参考:https://testerhome.com/topics/3711 根据appium 1.4.13.1版本整理,1.5弃用了find by name 所以更新了下如有错误请多多指正谢谢@lyl ...

  9. restclient 访问 springmvc java工程接口

    一.tomcat和nginx 配置 /etc/nginx/conf.d/default.conf location /nsx{ proxy_pass http://nsx; proxy_connect ...

  10. selenium除错

    1.使用命令行启动selenium 下载selenium jar包 http://selenium-release.storage.googleapis.com/index.html 此处下载的是se ...