2. Vue模板语法

Vue 使用一种基于HTML的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的DOM上。所有的Vue模板都是语法层面合法的HTML，可以被符合规范的浏览器和HTML解析器解析。

（1）文本插值

最基本的数据绑定形式是文本插值，它使用的是Mustache语法（即双大括号)：

我们先把项目目录的src/assect和src/components里的文件全部删除，main.js里的import './assets/main.css'也删除掉。同时把App.vue`的代码全部删除。默认代保留如下：

• 基本写法：

  App.vue

  <script>
  export default {
    data() {
      return {
        msg: "hello world"
      }
    }
  }
  </script>
  
  <template>
    <h3>模板语法</h3>
    <p>{{ msg }}</p>
  
  </template>
  

  这个时候我们就可以看到页面结果了

  

• 使用JavaScript表达式

  每个绑定仅支持单一表达式，也就是一段能够被求值的JavaScript代码。一个简单的判断方法是是否可以合法地写在return后面

  <script>
  export default {
    data() {
      return {
        number: 10,
        ok: true,
        message: "大家好"
  
      }
    }
  }
  </script>
  
  <template>
    <h3>模板语法</h3>
    <p>{{ number + 1 }}</p>
    <p>{{ ok ? 'yes' : 'no' }}</p>
    <p>{{ message.split('').reverse().join('') }}</p>
  
  </template>
  

  

• 无效写法

  <!-- 这是一个语句，而非表达式 -->
  <p>{{ var a = 1 }}</p>
  <!-- 条件控制也不支持，请使用三元表达式 -->
  <p>{{ if (ok) { return message } }}</p>

• 原始HTML

  双大括号将会将数据插值为纯文本，而不是HTML。若想插入HTML，你需要使用v-htmI指令

  假设，我们这么写：

  <script>
  export default {
    data() {
      return {
        rawHtml: "<a href='https://www.baidu.com'>百度</a>"
      }
    }
  }
  </script>
  
  <template>
    <h3>模板语法</h3>
    <p>{{ rawHtml }}</p>
  
  </template>
  

  

我们发现，页面并没有识别出来。那改怎么写呢？

<script>
export default {
  data() {
    return {
      rawHtml: "<a href='https://www.baidu.com'>百度</a>"
    }
  }
}
</script>

<template>
  <h3>模板语法</h3>
  <p>{{ rawHtml }}</p>
  <!-- 按照下面方式写就可以了 -->
  <p v-html="rawHtml"></p>

</template>