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>

复制代码

输出显示:

vue 模板语法

注意,不能使用 v-html 来符合局部模板,因为Vue不是基于字符串的模板引擎。

反之,对于用户界面(UI),组件更实用作为可重用和可组合的基本单位

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

特性

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

指令

指令(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>

复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Impractical Python Projects

Impractical Python Projects

Lee Vaughan / No Starch Press / 2018-11 / USD 29.95

Impractical Python Projects picks up where the complete beginner books leave off, expanding on existing concepts and introducing new tools that you’ll use every day. And to keep things interesting, ea......一起来看看 《Impractical Python Projects》 这本书的介绍吧!

html转js在线工具
html转js在线工具

html转js在线工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具