vue 模板语法
栏目: JavaScript · 发布时间: 5年前
内容简介:Vue.js 允许开发者声明式地将DOM绑定至底层Vue实例的数据在底层的实现上,Vue将模板编译成虚拟DOM渲染函数。结合响应系统,Vue能够只能地计算出最少需要重新玄滩多少组件,并把DOM操作次数减到最少也可不用模板,直接写渲染(render)函数,使用可选的JSX语法
Vue.js 允许开发者声明式地将DOM绑定至底层Vue实例的数据
在底层的实现上,Vue将模板编译成虚拟DOM渲染函数。结合响应系统,Vue能够只能地计算出最少需要重新玄滩多少组件,并把DOM操作次数减到最少
也可不用模板,直接写渲染(render)函数,使用可选的JSX语法
插值
**文本**
数据绑定: {{ }} > ` Message: {{ msg }} ` >
> // 无论何时,绑定的数据对象上的属性发生了改变,插值处的内容都会更新
-
v-once
指令,执行一次性的插值,当数据发生改变时,插值处的内筒不会更新。
原始HTML
-
v-html
指令,输出真正的HTML 例子:
<p>Using mustaches: {{ rawHtml }}</p> <p>Using v-html directive: <span v-html="rawHtml"></span></p> 复制代码
输出显示:
注意,不能使用 v-html
来符合局部模板,因为Vue不是基于字符串的模板引擎。
反之,对于用户界面(UI),组件更实用作为可重用和可组合的基本单位
你的站点上动态渲染的任意HTML可能会非常危险,因为它很容易导致 XXS攻击
。只对可信内容使用HTML插值,绝对不要对用户提供的内容使用插值
特性
模板表达式都被凡在沙盒中,只能访问全局变量的一个白名单,如 Math
和 Date
. 不应该在模板表达式中试图访问用户定义的全局变量
指令
指令(Directives)是带有` v-`前缀的特殊特性。指令特性的值预期是**单个JavaScript表达式**
` v-for`是例外情况
参数
一些指令能够接收一个“参数",在指令名称之后以冒号表示。
<a v-bind:href="url"> ...</a>
在这里 href
是参数,告知 v-bind
指令将该元素的 href
特性与表达式 url
的值绑定。另一个例子是 v-on
指令,它用于监听DOM事件: <a v-on:click="doFunction">...</a>
修饰符
修饰符(modifiers)是以半角句号 .
指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。 例如, .prevent
修饰符告诉 v-on
指令对于触发的事件调用 event.preventDefault()
:
<form v-on:submit.prevent="onSubmit">..</form>
缩写
v-
前缀作为一种视觉提醒,用来识别模板中vue特性。当你在使用Vue.js为现有标签添加动态行为(dynamic behavior)时, v-
前缀很有帮助。
同时,在构建由 Vue.js 管理所有模板的单页面应用程序 (SPA - single page application) 时,v- 前缀也变得没那么重要了。因此,Vue.js 为 v-bind 和 v-on 这两个最常用的指令,提供了特定简写:
# v-bind
缩写
<!-- 完整语法 --> <a v-bind:href="url">...</a> <!-- 缩写语法 --> <a :href="url">...</a> 复制代码
# v-on
缩写
<!-- 完整语法 --> <a v-on:click="onClick">...</a> <!-- 缩写语法 --> <a @click="onClick">...</a> 复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- [原]模板语法
- 60行代码实现简单模板语法
- Vue:学习笔记(三)-模板语法(1)
- 模板引擎 Jinja2 语法介绍
- 模板引擎 Jinja2 语法介绍
- golang 模板(template)的常用基本语法
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
The Book of CSS3
Peter Gasston / No Starch Press / 2011-5-13 / USD 34.95
CSS3 is the technology behind most of the eye-catching visuals on the Web today, but the official documentation can be dry and hard to follow. Luckily, The Book of CSS3 distills the heady technical la......一起来看看 《The Book of CSS3》 这本书的介绍吧!