vue 模板语法

模板语法

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

在底层的实现上,Vue将模板编译成虚拟DOM渲染函数。结合响应系统,在应用系统改变时,Vue能够智能计算出重新渲染组件的最小代价并应用到DOM操作上。

插值

#文本

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

{{msg}}

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

<span v-once>{{msg}}</span>

#纯HTML

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

<div v-html="rawHtml"></div>

被插入的内容都会被当做 HTML —— 数据绑定会被忽略。

注意,你不能使用 v-html 来复合局部模板,因为 Vue 不是基于字符串的模板引擎。组件更适合担任 UI 重用与复合的基本单元。

你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值,绝不要对用户提供的内容插值。

属性

Mustache 不能在 HTML 属性中使用,应使用 v-bind 指令:

<div v-bind:id="dynamicId"></div>
<button v-bind:disabled="someDynamicCondition">Button</button>

这对布尔值的属性也有效 —— 如果条件被求值为 false 的话该属性会被移除:

#使用javascript表达式

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

{{number+1}}

{{ok:‘YES‘?‘NO‘}}

{{msg.split("").reverse().join(" ")}}

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

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

<!--这是语句,不是表达式-->

{{var a=1}}

<!--流控制也不会生效,请使用三元表达式-->

{{

  if(ok){

    return messgae

  }

}}

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

时间: 03-12

vue 模板语法的相关文章

Vue模板语法(一)

Vue模板语法 一 vue简介 Vue.js是一套构建用户界面的渐进式框架. 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合. 另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js 自身不是一个全能框架——它只聚焦于视图层. 因此它非常容易学习,非常容易与其它库或已

11 - Vue模板语法

Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. 所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析. 在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数.结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件, 并把 DOM 操作次数减到最少. 如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量,你也可以不用模板,直接写渲染 (render) 函数,使用

vue模板语法

Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析. 在底层的实现上, Vue 将模板编译成虚拟 DOM 渲染函数.结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上. 1.插入纯文本   “Mustache” 语法 1 <!DOCTYPE html> 2 <html> 3

Vue模板语法和实例

1.如何输出Vue实例内data对象内存储的简单属性,注意Vue实例中存储在data属性中的数据.在html中都可以直接访问,而不需要this.属性名或data.属性名.即<p>{{title}}</p>.函数也可以类似访问,例如在vue中定义了一个函数:我们在html中可以直接使用sayHello函数.即 <p>{{sayHello()}}</p> 在html代码中在P{{}}中我们不仅能够直接访问data中的数据,而且能够访问methods中的函数. 原

vue入门:(模板语法与指令)

vuejs使用及HTML的模板语法,可以实现声明式将DOM绑定至底层VUE实例的数据.通过模板语法将数据渲染进DOM的系统,结合响应系统,在应用状态改变时,Vue能够计算出重新渲染组件的最小代价并应用到DOM操作上. VUE的模板语法的内容包括:插值.指令. 插值包括:文本插值.原始HTML插值.特性插值.以及使用javascript表达式实现插值. 指令:参数.动态参数.修饰符. 缩写形式是指v-bind和v-on指定可以采用缩写形式:'v-bind:'-->‘:’.'v-on'-->'@'

vue.js 学习之模板语法详解

本文和大家分享的主要是vue.js 的模板语法,希望对大家学习vue.js有所帮助,一起来看看吧. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析. 在底层的实现上, Vue 将模板编译成虚拟 DOM 渲染函数.结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上. 如果你熟悉虚拟 D

Vue常用模板语法

常用模板语法 本篇将在上一篇的基础上记录文本渲染.表达式.过滤器以及常用指令的简单用法. 一.文本渲染 Vue支持动态渲染文本,即在修改属性的同时,实时渲染文本内容.同时为了提高渲染效率,也支持只渲染一次,即第一次渲染出文本后,文本内容不再跟随属性值的变化而变化. 实时渲染 1 <div class="row"> 2 <h2>文本 - 实时渲染</h2> 3 <input type="text" v-model="

Vue.js模板语法

Vue.js模板语法 Vue 实例 构造器 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例来启动的: var vm = new Vue({ // 选项 }) 属性与方法 每个 Vue 实例都会代理其 data 对象里所有的属性: var data = { a: 1 } var vm = new Vue({ data: data }) vm.a === data.a // -> true // 设置属性也会影响到原始数据 vm.a = 2 data.a // ->

vue介绍——模板语法

模板语法介绍 Vue.js使用了基于HTML的模板语法,允许开发者声明式地将dom绑定至底层Vue实例的数据.所有Vue.js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析. 在底层的实现上,Vue将模板编译成虚拟dom渲染函数.结合响应式系统,Vue能够智能的重新计算出最少需要重新渲染多少组件,并把dom操作次数减少到最少. 如果熟悉虚拟dom并且偏爱JavaScript的原始力量,也可以不用模板,直接写渲染函数,使用可选的JSX语法. 插值--文本 数据绑定最常用的就