这一节我们来学一下vue的模板语法，在vue中有很多模版语法。那么从这几课开始我们来详细说一下vue中常用的模板语法。

插值表达式

{{}} 插值表达式，它得作用是将一些js表达式解析之后以文本形式渲染到模板中。

大家来看一下代码，在 template 中message 它是一个js的变量，也可以说是一个js表达式。这段代码简单理解就是它把message这个变量解析成变量实际值后，放到的template中。

<script>
  const App=Vue.createApp({
    data() {
      return {
        message:"hellow world!"
      }
    },
    template: `<div>{{message}}</div>`
  })
  const vm = App.mount("#app")
</script> 

那么，插值表达式它除了可以写变量，它支持其他的js表达式。比如：

<!--字符串拼接-->
<div>{{"Hello"+"World"}}</div>   结果：=》hellowolrd
<!--数值运算-->
<div>{{1+2}}</div>               结果：=》 3


<!--三元的表达式-->
<script>
  const App=Vue.createApp({
    data() {
      return {
        count:1
      }
    },
    template: `<div>{{count==1?"true":"false"}}</div>` 结果：=》true
  })
  const vm = App.mount("#app")
</script>

<!--方法调用-->
<div>{{ Math.round(3.14) }}</div>  结果： =》3

以上这些写法都是可以的，但是有个限制就是不能写语句 , 比如：

<div>{{ var a=10 }}</div>  ❌
<div>{{ if (true) { console.log(5) } }}</div> ❌

模板编译错误：解析JavaScript表达式错误：避免使用JavaScript关键字作为属性名称：“var”1 |

这些都是不允许的。

v-once指令

那么关于表达式我们先说到这里。现在我们恢复到hello world，我们知道vue它是数据驱动界面的，当我们改变message值时候，界面就会跟着渲染。 那么假设我不只想渲染一次message后面它改变了我界面不再渲染了。 那么我们改如何去做呢，这会儿我们只需要给message所在的这个dom节点上，添加一个 v-once指令就可以实现了，在vue中这种带v的都被称之为 指令，我们刷新一下浏览器修改一下 ,在控制台输入 vm.$data.message="abc"

来改变message为abc，这样界面就不会再更新了。

<div v-once>{{message}}</div>

v-html指令

那么，现在我们知道 {{}} 插值表达式的用法之后，我们把message变量的值修改成一段html代码“<b>hellow world!</b>”，我们希望hello world能在b标签作用下加粗。那么这样其实完全是没有效果的，因为我们刚才也说过插值表达它只会以文本形式渲染。想要让它解析渲染一段html的话，我需要使用 v-html 指令。

 const App=Vue.createApp({
    data() {
      return {
        message:"<b>hello world</b>"
      }
    },
    template: `<div v-html="message"></div>`
  })

v-bind指令

如果我们想要给html元素节点的属性上绑定一个变量，比如我们想给 div 加上一个title属性并且想给这个属性绑定成我们的message变量的值。那么我就会使用到 v-bind 指令 ，它就是专注所有属性绑定的指令。

 template: `<div v-bind:title="message"><b>hello world</b></div>`

v-bind 还能简写成 : 相当与忽略关键字 v-bind，可以不用写。

template: `<div :title="message"><b>hello world</b></div>`

这两种写法是一样的。

v-if指令

v-if指令前几课我们已经接触过了，它可以根据条件控制html元素的展示和不展示。

const App=Vue.createApp({
    data() {
      return {
        message:"hello world",
        show:false
      }
    },
    template: `<div v-if="show" :title="message"><b>hello world</b></div>`
  })

比如当show为false时 div元素是不会显示的，当show为true时 div元素才会显示。

我们在浏览器的控制台来看一下，当我们show为false时，我们发现 hello world 这个dom元素都直接不存在。

当我们 show 为true时，我们发现 hello world 这个 dom 元素都直接不存在。

所以我们可以得出一个结论 v-if 它不是简单的能控制一个元素的显示和隐藏它是完成能控制一个元素的渲染和不渲染。