外观
模板语法
文本
数据绑定最常见的形式就是使用“Mustache” (双大括号) 语法的文本插值，和Jinja2的语法相同。
<span>Message: {{ msg }}</span> <!--`{{ msg }}`就是文本插值，类似于Python的Jinja2-->在data()中可以定义变量，然后就可以使用文本插值在文档中渲染了。
export default {
name: 'HelloWorld',
data(){
return{
msg: "消息提示" //这里的msg是一个变量
}
}
}在上方介绍了一个Vue组件包含的基本标签，包含style、template、script三个标签，有时script会包含一个setup属性，这是组合式API，使用时要注意。
原始 HTML
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，我们需要使用v-html 指令。
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p> <!--在v-html内部使用一个变量名称来让这个值渲染成html-->data(){
return{
rawHtml:"<a href='https://www.itbaizhan.com'>百战</a>"
}
}带有v-html的标签内部不能有元素。如下方的语法是错误的。
<template>
<p v-html="html">123</p>
</template>
<script>
export default {
data() {
return {
html: '<a href="https://google.com">超链接</a>'
}
}
}
</script>属性 Attribute
Mustache 语法不能在 HTML 属性中使用，然而，可以使用 v-bind 指令，让属性也随变量动态地变化。
<div v-bind:id="dynamicId"></div> <!--所有标签的属性若要动态的使用双花括号语法表示，就要使用v-bind动态绑定-->data(){
return{
dynamicId:1001
}
}温馨提示
v-bind: 可以简写成 :，如：
<template>
<p :id="id">你好</p>
</template>
<script>
export default {
data() {
return {
id: 'id-attribute'
}
}
}
</script>由于通过Class属性操作元素的方式非常常见，因此Vue给v-bind做了一个增强使用。（更详细的语法请参考https://cn.vuejs.org/guide/essentials/class-and-style.html#binding-html-classes）
我们可以给:class提供一个对象，类似于：
<div :class="{ active: isActive }"></div>上面的语法表示 active 是否存在取决于数据属性 isActive 的真假值。
:class也可以与一般的class属性值共存，如：
data() {
return {
isActive: true,
hasError: false
}
}配合下面的模板语法：
<div
class="static"
:class="{ active: isActive, 'text-danger': hasError }"
></div>渲染出的将是<div class="static active"></div>。
:class也可以绑定一个数组来渲染多个class，但这种方式有些冗余。
v-bind可以使用动态绑定，语法为v-bind:[attrName]="val"，如：
<!--
注意，参数表达式有一些约束，
参见下面“动态参数值的限制”与“动态参数语法的限制”章节的解释
-->
<a v-bind:[attributeName]="url"> ... </a>
<!-- 简写 -->
<a :[attributeName]="url"> ... </a>使用 JavaScript 表达式
在我们的模板中，我们一直都只绑定简单的 property 键值，Vue.js 提供了完全的 JavaScript 表达式支持，文本插值语法可以计算一个正确的单表达式并渲染出来，但不能使用多个逻辑。
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
// 它们只能是单个表达式，类似于Jinja2这些表达式会在当前活动实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。
<!-- 这是语句，不是表达式：-->
{{ var a = 1 }}
<!-- 流程控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}例：
<template>
<p>number+1={{number+1}}</p>
<p>str's words: {{str.split(' ')}}</p>
<p>bool's value is {{ bool ? 'TRUE' : 'FALSE'}}</p>
</template>
<script>
export default {
data() {
return {
number: 1,
str: 'This is a String.',
bool: true
}
}
}
</script>