如何使用Vue3的模板语法？

// 组合式<script setup>    import { reactive } from 'vue'    let student = reactive({        name: 'Jack',        desc: '<h4>我是来自中国的小朋友！</h4>'    })    </script><template>  <!-- 使用v-text指令，将数据采用纯文本方式填充其空元素中 -->    <div v-text="student.name"></div>  <!-- v-text：以纯文本的方式显示数据 -->  <div v-text="student.desc"></div>  <!-- 下面的代码会报错：div 元素不是空元素 -->  <!-- <div v-text="student.name">这是原始的div数据</div> -->   </template>

// 组合式<script setup>import { reactive } from 'vue'let student = reactive({    name: 'Jack',    desc: '<h4>我是来自中国的小朋友！</h4>'})</script><template>    <!-- 插值表达式：在元素中的某一位置采用纯文本的方式渲染数据 -->    <div>这是一个 DIV 元素，{{ student.name }}，{{ student.desc }}</div></template>

// 组合式<script setup>import { reactive } from 'vue'let student = reactive({    name: 'Jack',    desc: '<h4>我是来自中国的小朋友！</h4>'})</script><template>    <!-- 使用v-html指令，将数据采用HTML语法填充其空元素中 -->    <div v-html="student.name"></div>    <!-- v-html：以 HTML 语法显示数据 -->    <div v-html="student.desc"></div>    <!-- 下面的代码会报错：div 元素不是空元素 -->    <!-- <div v-html="student.name">这是原始的div数据</div> --></template>

// 组合式<script setup>import { ref } from 'vue' let inputText = ref('ABC')  // 单行文本框let message = ref('本次更新有以下几点：……') // 多行文本框let open = ref(true) // 开灯（复选框）let determine = ref('不确定') // 是否确定（复选框）let likes = ref(['YMQ']) // 兴趣爱好（复选框）let sex = ref('woman') // 性别（单选按钮）let level = ref('B') //  // 证书等级（单选下拉框）let city = ref(['苏C', '苏B']) // 去过的城市（多选下拉框）</script><template>    <!-- 单行文本框 -->    <input type="text" v-model="inputText">    <hr>    <!-- 多行文本框 -->    <textarea v-model="message"></textarea>    <hr>    <!-- 默认情况下，复选框的值：true/false -->    <input type="checkbox" v-model="open"> 灯    <hr>    <!-- 自定义复选框值： true-value/false-value -->    <input type="checkbox" true-value="确定" false-value="不确定" v-model="determine"> 是否确定    <hr>    <input type="checkbox" value="LQ" v-model="likes"> 篮球    <input type="checkbox" value="ZQ" v-model="likes"> 足球    <input type="checkbox" value="YMQ" v-model="likes"> 羽毛球    <input type="checkbox" value="PPQ" v-model="likes"> 乒乓球    <hr>    <input type="radio" value="man" v-model="sex"> 男    <input type="radio" value="woman" v-model="sex"> 女    <hr>    证书等级：    <select v-model="level">        <option value="C">初级</option>        <option value="B">中级</option>        <option value="A">高级</option>    </select>    <hr>    去过的城市：    <select multiple v-model="city">        <option value="苏A">南京</option>        <option value="苏B">无锡</option>        <option value="苏C">徐州</option>        <option value="苏D">常州</option>    </select></template>

// 组合式<script setup>import { ref } from 'vue' let age = ref(20)let nickname = ref('')</script><template>        <p>将用户输入的值转成数值 .number，懒更新 .lazy</p>    <!-- 。number 将用户输入的值转成数值，如果用户输入的内容无法转成数字，将不会更新数据源 -->    <!-- .lazy 在 change 跟新数据源，而不是 input  -->    <input type="text" v-model.lazy.number="age">    <hr>    <p>去掉首尾空白字符</p>    <input type="text" v-model.trim="nickname"></template>

// 组合式<script setup>import { reactive } from 'vue'let picture = reactive({    src: 'https://cache.yisu.com/upload/information/20230306/112/35391.jpg', // 图像地址    width: 200 // 显示宽度})</script><template>    <input type="range" min="100" max="500" v-model="picture.width">    <hr>    <!-- v-bind: 为 src 属性绑定指定的数据源 -->    <img v-bind:src="picture.src" v-bind:width="picture.width">    <hr>    <!-- : 是 v-bind: 的缩写形式 -->    <img :src="picture.src" :width="picture.width">    <hr>    <!-- 如果绑定的值是 null 或者 undefined，那么该属性将会从渲染的元素上移除 -->    <button @click="picture.width = null">设置宽度为NULL</button></template>

// 组合式<script setup>import {reactive} from 'vue'let attrs = reactive({    class: 'error',    id: 'borderBlue'})</script><template>        <!-- 直接使用 v-bind 来为元素绑定多个属性及其值 -->    <button v-bind="attrs">我是一个普通的按钮</button></template><style>    .error {        background-color: rgb(167, 58, 58);        color: white;    }    #borderBlue {        border: 2px solid rgb(44, 67, 167);    }</style>

// 组合式<script setup>import { ref, reactive } from 'vue'let btnClassObject = reactive({    error: false, // 主题色    flat: false // 阴影})let capsule = ref(false)// 胶囊let block = ref(false)// 块</script><template>    <input type="checkbox" v-model="btnClassObject.error"> error    <input type="checkbox" v-model="btnClassObject.flat"> flat    <br>    <br>    <button :class="btnClassObject">我是一个普通的按钮</button>    <hr>    <input type="checkbox" v-model="capsule"> 胶囊    <input type="checkbox" v-model="block"> 块    <br>    <br>    <button :class="{ 'rounded': capsule, 'fullWidth':  block }">我是一个普通的按钮</button></template><style>button {    border: none;    padding: 15px 20px;    background-color: rgb(179, 175, 175);}.error {    background-color: rgb(167, 58, 58);    color: white;}.flat {    box-shadow: 0 0 8px gray;}.rounded {    border-radius: 100px;}.fullWidth {    width: 100%;}</style>

// 组合式<script setup>import { ref, reactive } from 'vue'let btnTheme = ref([]) // 按钮class数组let capsule = ref(false)// 胶囊let widthTheme = ref([])// 宽度数组</script><template>    <input type="checkbox" value="error" v-model="btnTheme"> error    <input type="checkbox" value="flat" v-model="btnTheme"> flat    <br>    <br>    <!-- 直接使用数组数据源，数组中有哪些值，直接在该元素的class里出现对应的类名 -->    <button :class="btnTheme">我是一个普通的按钮</button>    <hr>    <input type="checkbox" v-model="capsule"> 胶囊    <input type="checkbox" value="fullWidth" v-model="widthTheme"> 块    <br>    <br>    <!-- 数组和对象一起使用 -->    <button :class="[{ 'rounded': capsule }, widthTheme]">我是一个普通的按钮</button></template><style>button {    border: none;    padding: 15px 20px;    background-color: rgb(179, 175, 175);}.error {    background-color: rgb(167, 58, 58);    color: white;}.flat {    box-shadow: 0 0 8px gray;}.rounded {    border-radius: 100px;}.fullWidth {    width: 100%;}</style>

// 组合式<script setup>import { reactive, ref } from 'vue'let btnTheme = reactive({    backgroundColor: '#FF0000', // 背景色    color: '#000000' // 文本色})let backColor = ref('#0000FF')  // 背景色let color = ref('#FFFFFF')  // 文本色let borRadius = ref(20) // 边框圆角</script><template>    背景色：<input type="color" v-model="btnTheme.backgroundColor">    文本色：<input type="color" v-model="btnTheme.color">    <br>    <br>    <!-- style：可以直接绑定对象数据源，但是对象数据源的属性名当样式属性（驼峰命名法，kebab-cased形式） -->    <button :>我是一个普通的按钮</button>    <hr>    背景色：<input type="color" v-model="backColor">    文本色：<input type="color" v-model="color">    边框圆角：<input type="range" min="0" max="20" v-model="borRadius">    <br>    <br>    <!-- style：可以直接写对象，但是对象的属性名当样式属性（驼峰命名法，kebab-cased形式） -->    <button :style="{        backgroundColor: backColor,        color,        'border-radius': borRadius + 'px'    }">我是一个普通的按钮</button></template><style>button {    border: none;    padding: 15px 20px;    background-color: rgb(179, 175, 175);}</style>

// 组合式<!-- 脚本区域 --><script setup>import { ref, reactive } from 'vue'const btnTheme = ref([    {        backgroundColor: '#FF0000', // 背景色        color: '#FFFFFF' // 文本色    },    {        borderRadius: 0 // 边框圆角    }])const colorTheme = reactive({    backgroundColor: '#000000', // 背景色    color: '#FFFFFF' // 文本色})const radiusTheme = reactive({    borderRadius: 0 // 边框圆角})</script><!-- 视图区域 --><template>    背景色：<input type="color" v-model="btnTheme[0].backgroundColor">    文本色：<input type="color" v-model="btnTheme[0].color">    胶囊：<input type="checkbox" true-value="5px" false-value="0" v-model="btnTheme[1].borderRadius">    <br>    <br>    <!-- 直接传入数组 -->    <button :>我是一个普通按钮</button>    <hr>    背景色：<input type="color" v-model="colorTheme.backgroundColor">    文本色：<input type="color" v-model="colorTheme.color">    胶囊：<input type="checkbox" true-value="5px" false-value="0" v-model="radiusTheme.borderRadius">    <br>    <br>    <!-- 直接写数组 -->    <button :>我是一个普通按钮</button></template><style>button {    padding: 15px 20px;    border: none;}</style>

// 组合式<script setup>import { ref } from 'vue'let isShow = ref(false)  // 是否显示let age = ref(20)  // 年龄let week = ref(3)  // 周几</script><template>    是否显示：<input type="checkbox" v-model="isShow">    <!--         v-if：指令表达式为真时才会渲染该元素         为true时会创建该元素，为false时会销毁该元素    -->    <h4 v-if="isShow">这是一个普通的标题标签</h4>    <hr>    年龄: <input type="range" min="0" max="100" v-model="age"> {{ age }}    <!--         v-if：可以配合 v-else-if 和 v-else 来搭建多重判断条件，他们中间不要参杂无关紧要的元素     -->    <h2 v-if="age < 18">未成年</h2>    <!-- <span>无关紧要的元素</span> -->    <h3 v-else-if="age < 35">青年</h3>    <h4 v-else-if="age < 50">中年</h4>    <h5 v-else>老年</h5>    <hr>    周几: <input type="range" min="1" max="7" v-model="week"> {{ week }}    <!-- v-if：可以配合 template 元素使用，最后渲染的结果并不会包含这个 <template>元素 -->    <template v-if="week == 1 || week == 3 || week == 5 || week == 7">        <h2>可以游泳</h2>    </template>    <template v-else>        <h2>不可以游泳</h2>    </template></template>

// 组合式<script setup>import { ref } from 'vue'let isShow = ref(false)  // 是否显示let age = ref(20)  // 年龄let week = ref(3)  // 周几</script><template>    是否显示：<input type="checkbox" v-model="isShow">    <!--         v-show：指令表达式为真时才会渲染该元素         无论该指令的表达式是否 true 或 false，该元素在元素中是保留该元素的        为 true 时会删除该元素的 display:none 样式，为 false 时会给该元素添加 display:none 样式    -->    <h4 v-show="isShow">这是一个普通的标题标签</h4>    <hr>    年龄: <input type="range" min="0" max="100" v-model="age"> {{ age }}    <h2 v-show="age < 18">未成年</h2>    <h3 v-show="age >= 18 && age < 35">青年</h3>    <h4 v-show="age >= 35 && age < 50">中年</h4>    <h5 v-show="age >= 50">老年</h5>    <hr>    周几: <input type="range" min="1" max="7" v-model="week"> {{ week }}    <!-- v-show：不可以配合 template 元素使用 -->    <!-- <template v-show="week == 1 || week == 3 || week == 5 || week == 7">        <h2>可以游泳</h2>    </template>    <template v-shw="week == 12 || week == 4 || week == 6">        <h2>不可以游泳</h2>    </template> --></template>

// 组合式<script>export default {    data: () => ({        volume: 5  // 音量[0, 10]    }),    methods: {        // 添大音量        addVolume() {            // 如果音量没有在最高值，则添加音量            if (this.volume !== 10) {                this.volume++            }        },        // 减小音量        subVolume() {            // 如果音量没有在最小值，则减小音量            if (this.volume !== 0) {                this.volume--            }        },        // 设置音量        setVolume(value) {            // 判断音量是否在取值范围之间            if (value >= 0 && value <= 10) {                this.volume = value            }        }    }}</script><template>    <h4>当前音量：{{ volume }}</h4>    <!-- v-on: 事件绑定 -->    <button v-on:click="addVolume">添加音量</button>    <button v-on:click="subVolume">减小音量</button>    <hr>    <!-- @ 是 v-on: 的缩写 -->    <button @click="setVolume(0)">静音</button>    <button @click="setVolume(5)">音量适中</button>    <button @click="setVolume(10)">音量最大</button></template>

// 组合式<script setup>// 打招呼function say(name) {    window.alert('你好：' + name)}</script><template>    <!-- .prevent 修饰符阻止了超链接的默认行为（跳转到百度页） -->    <a href="http://www.baidu.com" rel="external nofollow"  rel="external nofollow"  @click.prevent="say('baiDu')">百度</a></template>

// 组合式<script setup>// 打招呼function say(name) {    console.log('你好：' + name)}</script><template>    <div class="divArea" @click="say('DIV')">        <!-- .stop：阻止产生冒泡事件 -->        <button @click.stop="say('BUTTON')">冒泡按钮</button>    </div></template><style>.divArea {    padding: 30px;    border: 2px solid blue;}</style>

// 组合式<script setup>// 打招呼function say(name) {    window.alert('你好：' + name)}</script><template>    <!-- .once：绑定的事件只触发一次 -->    <button @click.once="say('BUTTON')">点我试一下</button></template>

// 组合式<script setup>// 打招呼function say(name) {    window.alert('你好：' + name)}</script><template>    <!-- .self：只在该元素上触发事件有效，其子元素无效 -->    <div class="divArea" @click.self="say('DIV')">        <button>我是一普通的按钮</button>    </div></template><style>.divArea {    padding: 30px;    border: 2px solid blue;}</style>

// 组合式<script setup>// 打招呼function say(name) {    console.log('你好：' + name)}</script><template>    <!--         .capture 给元素添加一个监听器        1：当元素事件产生冒泡时，先触发的是该修饰符的元素的事件        2：如果有多个该修饰符，则由外向内依次触发     -->    <div class="divArea" @click.capture="say('DIV-1')">        <div class="divArea" @click="say('DIV-2')">            <div class="divArea" @click.capture="say('DIV-3')">                <button>我是一普通的按钮</button>            </div>        </div>    </div></template><style>.divArea {    padding: 30px;    border: 2px solid blue;}</style>

// 组合式<script setup>function eventPrevent() {    // 阻止事件默认行为    event.preventDefault()}</script><template>    <!-- .passive：先执行默认行为，不考虑执行的代码中是否包含 event.preventDefault() -->    <a href="http://www.baidu.com" rel="external nofollow"  rel="external nofollow"  @click.passive="eventPrevent">百度</a></template>

// 组合式<script setup>// 弹出消息function showMessage(message) {    window.alert(message)}</script><template>    按下的键中包含 Enter 键事件： <input type="text" @keydown.enter="showMessage('你按下了 Enter 键')">    <hr>    按下的键中包含 Shift Enter 键事件：<input type="text" @keydown.enter.shift="showMessage('你按下了 Shift + Enter 键')"/>    <hr>    按下的键只有 Shift Enter 键事件：<input type="text" @keydown.enter.shift.exact="showMessage('你只按下了 Shift + Enter 键')"/></template>

// 组合式<!-- 脚本区域 --><script setup>    function showTest(text) {        window.alert(text)    }</script><!-- 视图区域 --><template>    <!-- 鼠标右键按下 -->    <button @mousedown.right="showTest('按下的是鼠标右键')">鼠标右键按下</button>    <hr>    <!-- 点击时，采用的是鼠标中键 -->    <button @click.middle="showTest('按下的是鼠标中键')">点击时，采用的是鼠标中键</button>    <hr>    <!-- 鼠标左键按下 -->    <button @mousedown.left="showTest('按下的是鼠标左键')">鼠标左键按下</button></template><!-- 样式区域 --><style>    button {        border: none;        padding: 15px 20px;    }    button:active {        box-shadow: 0 0 5px grey;    }</style>

// 组合式<script setup>import { ref } from 'vue'// 课程let subject = ref([    { id: 1, name: 'Vue' },    { id: 2, name: 'Java' },    { id: 3, name: 'UI设计' },    { id: 4, name: 'Hadoop' },    { id: 5, name: '影视后期' },])</script><template>    <!--         item in itmes        item：值，当前循环的数组值        itmes：循环的数组     -->    <h7>v-for 渲染数组， v-for="item in itmes"</h7>    <ul>        <li v-for="sub in subject">            编号：{{ sub.id }} --- 名称：{{ sub.name }}        </li>    </ul>    <hr>    <!-- 解构对象 -->    <h7>v-for 渲染数组， v-for="{ 解构…… } in itmes"</h7>    <ul>        <li v-for="{ id , name } in subject">            编号：{{ id }} --- 名称：{{ name }}        </li>    </ul>    <hr>    <!--         (value, index) in itmes        value：值        index：索引        itmes：循环的数组     -->    <h7>v-for 渲染数组， v-for="(value, index) in itmes"</h7>    <ul>        <li v-for="(sub, index) in subject">            编号：{{ sub.id }} --- 名称：{{ sub.name }} --- 索引：{{ index }}        </li>    </ul>    <hr>    <!-- 解构对象 -->    <h7>v-for 渲染数组， v-for="({ 解构…… }, index) in itmes"</h7>    <ul>        <li v-for="({ id , name } , index) in subject">            编号：{{ id }} --- 名称：{{ name }} --- 索引：{{ index }}        </li>    </ul></template>

// 组合式<script setup>import { reactive } from 'vue'let student = reactive({    styNum: '007', // 学号    name: 'Jack', // 名字    age: 18 //年龄})</script><template>    <!--         value in object        value：属性值        object：循环的对象     -->    <h7>v-for 渲染对象， v-for="value in object"</h7>    <ul>        <li v-for="value in student">            {{ value }}        </li>    </ul>    <hr>    <!--         (value, name) in object        value：属性值        name：属性名        object：循环的对象     -->    <h7>v-for 渲染对象， v-for="(value, name) in object"</h7>    <ul>        <li v-for="(value, name) in student">            属性名：{{ name }} --- 属性值： {{ value }}        </li>    </ul>    <hr>    <!--         (value, name, index) in object        value：属性值        name：属性名        index: 索引        object：循环的对象     -->    <h7>v-for 渲染对象， v-for="(value, name, index) in object"</h7>    <ul>        <li v-for="(value, name, index) in student">            属性名：{{ name }} --- 属性值： {{ value }} --- 索引：{{ index }}        </li>    </ul></template>

// 组合式<script setup>import { ref } from 'vue'// 课程let subject = ref([    { id: 1, name: 'Vue' },    { id: 2, name: 'Java' },    { id: 3, name: 'Hadoop' }])// 添加课程function addSubject() {    // （数组最前面）添加    subject.value.unshift({ id: 4, name: 'Python' })}</script><template>    <button @click.once="addSubject">添加课程（数组最前面）</button>    <h4>不使用key值</h4>    <ul>        <li v-for="sub in subject">            <input type="checkbox">            {{ sub }}        </li>    </ul>    <hr>    <h4>使用索引当key值</h4>        <ul>        <li v-for="(sub, index) in subject" :key="index">            <input type="checkbox">            {{ sub }}        </li>    </ul>    <hr>    <h4>使用列表属性当key值（该属性必须再此列表中唯一）</h4>        <ul>        <li v-for="sub in subject" :key="sub.id">            <input type="checkbox">            {{ sub }}        </li>    </ul></template>