vue模板语法

Posted 2020-10-24 ArcheWong

[TOC]

模板，组件中template的内容？

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 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

//带有变量的字符串拼接
<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>