1、打开上次初始化的项目

打开app.vue,删除内容，得到一个空白的项目

2、模板语法

<script setup>
  //1、普通字符串，使用模板语法，显示变量内容到div 中
  const message = 'hello world';
  //2、html字符串, 观察效果
  const html = "<span style='color:red'>白日依山尽</span>"
  //3、Attribute 绑定
  let id1 = 'xiaobai1'  // v-bind指令
  let id2 = "xiaobai2"  // 简写
  let speed = "速度"    // 属性名称一致，简写
  //4、布尔值绑定
  const isOpen = true;
  //5、对象绑定 v-bind="user"
  const user = {
    id:"v001",
    name:"zhangsan",
    style:"background-color:green"
  }
  //6、表达式
  let numb = 1;
  //7、
</script>

<template>
  <div>{{ message }}</div>
  <div>{{html}}</div>
  <div v-html="html"></div>
  <div v-bind:id="id1">小白1</div>
  <div :id="id2">小白2</div>
  <div :speed>小白3</div>
  <button :disabled="isOpen">打开</button>
  <div v-bind="user">张三</div>
  <div>{{ numb + 1 }}</div>
</template>

<style scoped>

</style>