25.Vue3：模板语法

在vue-demo\src\components\HelloWorld.vue下

<!-- template写html -->
<template>
  <div class="hello">
      <h3>Vue3：模板语法</h3>
      <!-- 测试1 -->
      <p>{{msg}}</p>

      <!-- 测试2: -->
      <!-- 输出原始的HTML -->
      <p>{{rawHtml}}</p> 
      <!-- 输出解析过的HTML -->
      <p><span v-html="rawHtml"></span></p>

      <!-- 测试3 -->
      <p v-bind:id="dynamicId"></p>
      <p :id="dynamicId"></p>

      <!-- 测试4 -->
      <p>{{number+10}}</p>
      <p>{{ok?'YES':'NONONO'}}</p>
  </div>
</template>

<!-- src目录介绍 -->
  <!-- assets 文件夹：放静态资源
  cpmmponentes：放组件
  App.vue：根组件
  main.js:程序的入口 -->

<!-- script用于写业务逻辑 -->
<script>
export default {
  name : "HelloWorld",

  // 测试1: 文本
  // 数据绑定最常见的形式是{{}}, 用于给template中传递值.一般配合js中的data()设置数据

  // 测试2: 原始HTML
  // {{}} 只会将数据显示成普通文本(innerText), 为了输出真正的html,需要使用v-html指令 (innerHTML)

  // 测试3:属性, 属性的值需要动态传递,就不可以使用{{}},需要用v-bind,简写:

  // 测试4:使用JS表达式:
  // 每个只能包含单个表达式
  data(){
    return{
      msg:"模板语法1:文本",
      rawHtml:"<a href='https://www.baidu.com'>测试2:显示html</a>",
      dynamicId:'12344',
      number:100,
      ok:true
    }
  }
}
</script>