模版语法(vue笔记)

92 阅读1分钟

插值

文本

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

v-once

可以执行一次性的插值,当数据改变时,插值处的内容不会更新。

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

原始HTML

v-html

<p>{{ rawHtml }}</p>  
<p>使用v-html指令: <span v-html="rawHtml"></span></p>

Attribute(属性)

v-bind

布尔attribute(他们只要存在就意味着值为true),例如:

<button v-bind:disabled="isBtnDisabled">Button</button>

如果isBtnDisabled的值是null,undefined,false, 则disabled attribute 甚至不会被包含在渲染出来的 <button> 元素中

指令

指令 是带有 v- 前缀的特殊 attribute。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
参数 一些指令能够接受一个“参数”,在指令名称之后以冒号表示,例:

<a v-bind:href="url">...</a>

href就是参数

动态参数

可以用方括号括起来的javascript表达式作为一个指令的参数:

<a v-bind:[attributeName]="url"> ... </a>

这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值,求得的值将会作为最终的参数来使用。
避免使用大写字符来命名键名

修饰符

修饰符是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定,例:

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

缩写

v-bind 缩写

<!-- 完整语法 -->  
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>  
<!-- 动态参数的缩写 (2.6.0+) -->  
<a :[key]="url"> ... </a>

v-on 缩写

<!-- 完整语法 -->  
<a v-on:click="toto">...</a>  
<!-- 缩写 -->  
<a @click="todo">...</a>  
<!-- 动态参数的缩写 (2.6.0+) -->  
<a @[event]="todo"> ... </a>