vue3.0 模板语法

前言：

• Vue 使用一种基于HTML的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上

---

1. 内容渲染指令

• 内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容

1.1 v-text

使用v-text指令，将数据采用纯文本方式填充其空元素中

<script setup>

    import {
    reactive } from 'vue'

    let student = reactive({
   
        name: 'Jack',
        desc: '<h3>我是来自中国的小朋友！</h3>'
    })
    
</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>

1.2 { { }}插值表达式

在元素中的某一位置采用纯文本的方式渲染数据

<script setup>

import {
    reactive } from 'vue'

let student = reactive({
   
    name: 'Jack',
    desc: '<h3>我是来自中国的小朋友！</h3>'
})

</script>

<template>

    <!-- 插值表达式：在元素中的某一位置采用纯文本的方式渲染数据 -->
    <div>这是一个 DIV 元素，{
   {
    student.name }}，{
   {
    student.desc }}</div>

</template>

1.3 v-html

使用v-html指令，将数据采用HTML语法填充其空元素中

<script setup>

import {
    reactive } from 'vue'

let student = reactive({
   
    name: 'Jack',
    desc: '<h3>我是来自中国的小朋友！</h3>'
})


</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>

2. 双向绑定指令

2.1 v-model

v-model双向数据绑定指令，视图数据和数据源同步
一般情况下v-model指令用在表单元素中：
	1. 文本类型的<input>和<textarea>元素会绑定value属性并侦听input事件
	2. <input type="checkbox">和<input type="radio">会绑定checked属性并侦听change事件
	3. <select>会绑定value属性并侦听change事件

<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>

2.2 v-model的修饰符

<script setup>

import {
    ref } from 'vue' 

let age = ref(20)
let nickname = ref('')

</script>

<template>
    
    <p>将用户输入的值转成数值 .number，懒更新 .lazy</p>
    <!-- 。number 将用户输入的值转成数值，如果用户输入的内容无法转成数字，将不会更新数据源 --