模板语法

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

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

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

插值:

  文本:

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

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

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

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

    <span v-once>This will never change : {{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>

    这对布尔值的属性也有效--如果条件被求值为false的话该属性会被溢出:

    <button v-bind:disabled=‘someDynamicCondition‘>Button></button>

  使用JavaScript表达式

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

    

    

  指令:

    

  参数:

    

  修饰符:

    

  过滤器:

    

    

  

  缩写:

    

时间: 2024-09-30 15:04:20

模板语法的相关文章

Angular 2 模板语法与常用指令简介

一.模板语法简介 插值表达式 <div>Hello {{name}}</div> 等价于 <div [textContent]="interpolate(['Hello'], [name])"></div> 模板表达式 1.属性绑定 1.1输入属性的值为常量 <show-title title="Some Title"></show-title> 等价于 <show-title [titl

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

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

django之定义模板语法08({{ string | truncatewords:&#39;2&#39; }})

#index页面代码: <html> <head> <title>DOcument</title> </head> <body> <h1>{{user}}</h1> </br> </br> <h1>过滤器</h1> <p>{{ string | truncatewords:'2' }}</p> //显示前2个字(非字母) </body

vue 模板语法

模板语法 Vue.js使用了基于HTML的模板语法,允许开发者声明式将DOM绑定至底层Vue实例的数据.所有Vue.js的模板都是合法的HTML,所以可以被遵循规范的浏览器和HTML解析器解析. 在底层的实现上,Vue将模板编译成虚拟DOM渲染函数.结合响应系统,在应用系统改变时,Vue能够智能计算出重新渲染组件的最小代价并应用到DOM操作上. 插值 #文本 数据绑定最常见的形式就是使用"Mustache"语法(双大括号)的文本插值: {{msg}} 通过使用v-once指令,你也能执

Vue常用模板语法

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

angular2的模板语法

Angular 应用管理着用户之所见和所为,并通过 Component 类的实例(组件)和面向用户的模板来与用户交互. 从使用模型-视图-控制器 (MVC) 或模型-视图-视图模型 (MVVM) 的经验中,很多开发人员都熟悉了组件和模板这两个概念. 在 Angular 中,组件扮演着控制器或视图模型的角色,模板则扮演视图的角色. 来看看写视图的模板都需要什么.本章将覆盖模板语法中的下列基本元素 HTML 是 Angular 模板的语言.快速起步应用的模板是纯 HTML 的: <h1>Hello

discuz门户首页-header文件模板语法详解和注释

header文件引用了跟多通用模板,所以整个文章会很长,现在比较忙,注释工作会不定期进行 首先开下门户首页的文件 portal里面的index.htm <!--{template common/header}--> //引用common文件下的header.htm这个也是引用模板文件的一种常用方法 <style id="diy_style" type="text/css"></style> //没什么用 <div class

angular2系列教程(二)模板语法

今天我们要讲的是angualr2的模板语法,官网写的很清楚,但我也用通俗易懂的讲法再罗列一下吧! 例子 源代码 运行方法: npm install npm run play 打开8080端口.这个例子是我写的小demo,介绍了常用的几种模板语法. 属性绑定 不需要特别的指令,只需要用[value]就可以了,并不只有value,[]里面可以是任何常用的html元素的属性! src/app.html <input [value]="firstName" [placeholder]=&

Django 模板语法取值

1.models.py class Business(models.Model):     prodline = models.CharField(max_length=32)     code =models.CharField(max_length=32,null=True,blank=True) class Host(models.Model):     nid = models.IntegerField(primary_key=True)     hostname = models.Ch