VUE的模板语法

项目搭建

搭建完项目之后，需要把vue自带的一些配置给删除，方便我们的学习

修改完之后是以下目录

 下面的代码都在APP.vue里面写

模板语法

文本插值

<template>
<!--   用双大括号来容纳需要展示的数据 -->
  <h3>{{ msg }}</h3>
  <h3>{{ student.name }}</h3>
</template>
<script setup>
import { ref, reactive } from "vue";
//ref 定义基本类型,ref 定义的变量使用时需要.value(模板中均可直接使用，vue帮我们判断了是reactive还是ref定义的(通过__v_isRef属性)，从而自动添加了.value)
const msg = ref("123")
//reactive定义引用数据类型,reactive定义的变量直接使用
const student = reactive({
  name: "小明",
  jishu: ["前端", "Java", "python"]
})
</script>

使用 JavaScript 表达式

<template>
<!-- 数据加减 -->
  <h3>{{ number+1 }}</h3>
 <!--  三元表达式 -->
  <h3>{{ flag?'yes':'no' }}</h3>
<!--   对字符串进行操作 -->
  <h3>{{ msg.split('').reverse().join('') }}</h3>
</template>
<script setup>
import { ref, reactive } from "vue";
//ref 定义基本类型,ref 定义的变量使用时需要.value(模板中均可直接使用，vue帮我们判断了是reactive还是ref定义的(通过__v_isRef属性)，从而自动添加了.value)
const number = ref(10)
const flag=ref(true)
const msg=ref("大家好")
</script>

原始 HTML（将html格式的文本以html形式展示）

<template>
<!--   用v-html来绑定原始的html -->
  <p><span v-html="rawHtml"></span></p>
</template>
<script setup>
import { ref, reactive } from "vue";
const rawHtml = ref("<a href='https://www.baidu.com'>百度</a>")
</script>