模板语法

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 插值,绝对不要对用户提供的内容使用插值

特性

模板表达式都被凡在沙盒中,只能访问全局变量的一个白名单,如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>

复制代码

  • Vue.js

    Vue.js 是构建 Web 界面的 JavaScript 库,提供数据驱动的组件,还有简单灵活的 API,使得 MVVM 更简单。 主要特性: 可扩展的数据绑定 将普通的 JS 对象作为 model 简洁…

    109 引用
感谢    赞同    分享    收藏    关注    反对    举报    ...