vue笔记1-模板语法-vue-ArcherWong博客

[TOC]

# 1. 插值

## 1.1. 文本

```
//使用双大括号形式
<span>Message: {{ msg }}</span>

//使用v-once会只执行一次，不会被更新
<span v-once>这个将不会改变: {{ msg }}</span>
```

## 1.2. 原始HTML

双大括号会将数据解释为纯文本，如果想要输出纯html则需要使用v-html

```
//rawnhtml内容：
<sapn style="color:red"> 样式生效则为红色 </span>

//两种不同的使用方法
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

```

使用双大括号

<sapn style="color:red"> 样式生效则为红色 </span>
使用v-html指令，文字显示为红色

样式生效则为红色

注意，使用v-html的时候要注意xss攻击，只对可信内容使用v-html

## 1.3.  特性

双大括号语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：
```
//使用v-bind 在html的特性上
<div v-bind:id="dynamicId"></div>

//下面这种写法，是不存在的
<div id="{{ dynamicId }}"></div>
```

## 1.4. 使用js表达式

支持单个表达式

```
{{ number + 1 }}

//带有变量的字符串拼接
<div v-bind:id="'list-' + id"></div>
```

下面列子不会生效

```

{{ var a = 1 }}

{{ if (ok) { return message } }}
```

# 2. 指令

指令 (Directives) 是带有 v- 前缀的特殊属性

# 3. 缩写
## 3.1 v-bind 缩写
```

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

<a :href="url">...</a>
```
## 3.2. v-on 缩写
```

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

<a @click="doSomething">...</a>
```

标签：