Vue.js 的模板语法

作者: Arvin Chen 分类: vue 来源: Break易站(www.breakyizhan.com)

这篇文章主要讲Vue.js 的模板语法,而Vue.js 使用基于 HTML 的模板语法,允许声明式地将要渲染的 DOM 和 Vue 实例中的 data 数据绑定。所有 Vue.js 的模板都是有效的 HTML,能够被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上,Vue 将模板编译为可以生成 Virtual DOM 的 render 函数。结合响应式系统,在应用程序状态改变时,Vue 能够智能地找出重新渲染的最小数量的组件,并应用最少量的 DOM 操作。

如果你熟悉虚拟 DOM 的概念,并且倾向于使用原生 JavaScript,还可以不使用模板,而是直接编写 render 函数,具备可选的 JSX 语法支持。

对于Vue.js的模板语法使用有包括:

  • 插值:主要有:文本,html,属性,使用javascript, 这四种方式。
  • 指令:参数,修饰符
  • 缩写:v-bind缩写,v-on缩写

Vue.js的模板语法通过更加简单的方式对HTML的DOM进行了操作,这篇文章主要就是来学习和认识Vue.js操作DOM的优势。

Vue.js插值

Vue.js插值主要有文本,html,属性,使用javascript, 这四种方式。

Vue.js文本插值

数据绑定最基本的形式,就是使用 “mustache” 语法(双花括号)的文本插值(text interpolation), 只要绑定的数据对象上的属性发生改变,插值内容也会随之更新。我们来看一下下面这个例子:

     提示:可以修改代码后运行

可以试试修改message再运行,看看插值的内容会不会改变。

也可以通过使用 v-once 指令,执行一次性插值,也就是说,在数据改变时,插值内容不会随之更新。但是这也将影响到同一节点上的其他所有绑定:

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

Vue.js html插值

一般是使用v-html指令进行html插值,可以看如下v-html指令的例子:

     提示:可以修改代码后运行

Vue.js 属性插值

Vue.js 属性插值不能在 Vue 模板中的 HTML 属性上使用双花括号语法,而是应该使用 v-bind 指令:

     提示:可以修改代码后运行

Vue.js 也提供了完全的 JavaScript 表达式支持。

     提示:可以修改代码后运行

Vue.js指令

指令是带v-前缀的特殊属性。指令属性值应该是单个JavaScript表达式(除外v-for,将在后面讨论)。指令用于在表达式的值改变时,将某些行为应用到 DOM 上。

     提示:可以修改代码后运行

Vue.js指令:参数

一些指令能够接收一个“参数”,在指令名称之后以 : 表示。例如,v-bind 指令可以用于响应式地更新 HTML 属性:

     提示:可以修改代码后运行

另一个示例是 v-on 指令,用于监听 DOM 事件:

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

Vue.js指令:修饰符

修饰符(modifier)是以 . 表示的特殊后缀,表明应当以某种特殊方式绑定指令。例如,.prevent 修饰符告诉 v-on 指令,在触发事件后调用 event.preventDefault()

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

稍后我们在探索这些特性时,你就会看到其他修饰符的相关示例,例如 v-on 和 v-model

Vue.js缩写

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

Vue.js缩写:v-bind缩写

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

Vue.js缩写:v-on缩写

 <!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
  •   本文标题:Vue.js 的模板语法 - Break易站
    转载请保留页面地址:https://www.breakyizhan.com/vue/6683.html
    扫描二维码添加微信 
  • ,领取淘宝优惠券,淘宝购物更优惠。现在添加微信,还可以领取机械键盘优惠券!添加微信后,分享淘宝选中的机械键盘给淘宝机器人即可领取!
    支持我们,就用微信淘宝!

    发表笔记

    电子邮件地址不会被公开。 必填项已用*标注

    更多阅读