03-vue.js基础-vue模板语法

1.插值

1.1文本

<span>{{msg}}</span>

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：
rawHtml:<span style="color:red">hello</span>
<p>Using mustaches: {{ rawHtml }}</p>
// <p><span style="color:red">hello</span></p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
//hello(红色)

1.2使用 JavaScript 表达式

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

2.指令

2.1单个指令

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

v-html
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
//hello(红色)

v-text

v-if
<p v-if="seen">现在你看到我了</p>

2.2参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示
v-bind: <a v-bind:href="url">...</a>
缩写---><a :href="url">...</a>
v-on: <a v-on:click="doSomething">...</a>
缩写---><a @click="doSomething">...</a>

2.3动态参数

<a v-on:[eventName]="doSomething"> ... </a>