Template syntax summary in Vue3

// Combination<script setup>

    import { reactive } from 'vue'

    let student = reactive({
        name: 'Jack',
        desc: '<h3>I am a child from China!  </h3>'
    })
    
&lt;/script&gt;

&lt;template&gt;

  &lt;!-- usev-textinstruction，Fill data into empty elements in plain text --&gt;
  
  &lt;div v-text=""&gt;&lt;/div&gt;

  &lt;!-- v-text：Display data in plain text --&gt;
  &lt;div v-text=""&gt;&lt;/div&gt;

  &lt;!-- The following code will report an error：div Elements are not empty elements --&gt;
  &lt;!-- &lt;div v-text=""&gt;This is originaldivdata&lt;/div&gt; --&gt;
   
&lt;/template&gt;

// Combination<script setup>

import { reactive } from 'vue'

let student = reactive({
    name: 'Jack',
    desc: '<h3>I am a child from China!  </h3>'
})

&lt;/script&gt;

&lt;template&gt;

    &lt;!-- Interpolation expressions：Render data in plain text at a certain location in the element --&gt;
    &lt;div&gt;This is a DIV element，{{  }}，{{  }}&lt;/div&gt;

&lt;/template&gt;

// Combination<script setup>

import { reactive } from 'vue'

let student = reactive({
    name: 'Jack',
    desc: '<h3>I am a child from China!  </h3>'
})


&lt;/script&gt;

&lt;template&gt;

    &lt;!-- usev-htmlinstruction，Use dataHTMLSyntax fills its empty elements --&gt;

    &lt;div v-html=""&gt;&lt;/div&gt;

    &lt;!-- v-html：by HTML Syntax display data --&gt;
    &lt;div v-html=""&gt;&lt;/div&gt;

    &lt;!-- The following code will report an error：div Elements are not empty elements --&gt;
    &lt;!-- &lt;div v-html=""&gt;This is originaldivdata&lt;/div&gt; --&gt;

&lt;/template&gt;

// Combination<script setup>

import { ref } from 'vue' 

let inputText = ref('ABC')  // Single line text boxlet message = ref('The following points are available in this update:...') // Multi-line text boxlet open = ref(true) // Turn on the light (check box)let determine = ref('uncertain') // Is it OK (check box)let likes = ref(['YMQ']) // Hobbies (check box)let sex = ref('woman') // Gender (radio button)let level = ref('B') // // Certificate level (single-select drop-down box)let city = ref(['Su C', 'Su B']) // City you have been to (multiple-select drop-down box)
</script>

<template>

    <!-- Single line text box -->
    <input type="text" v-model="inputText">

    <hr>
    <!-- Multi-line text box -->
    <textarea v-model="message"></textarea>

    <hr>
    <!-- By default，Value of the check box：true/false -->
    <input type="checkbox" v-model="open"> lamp

    <hr>
    <!-- Custom checkbox values： true-value/false-value -->
    <input type="checkbox" true-value="Sure" false-value="uncertain" v-model="determine"> Is it sure

    <hr>
    <input type="checkbox" value="LQ" v-model="likes"> basketball
    <input type="checkbox" value="ZQ" v-model="likes"> football
    <input type="checkbox" value="YMQ" v-model="likes"> badminton
    <input type="checkbox" value="PPQ" v-model="likes"> table tennis

    <hr>
    <input type="radio" value="man" v-model="sex"> male
    <input type="radio" value="woman" v-model="sex"> female

    <hr>
    Certificate Level：
    <select v-model="level">
        <option value="C">primary</option>
        <option value="B">intermediate</option>
        <option value="A">advanced</option>
    </select>

    <hr>
    Cities I've been to：
    <select multiple v-model="city">
        <option value="Su A">Nanjing</option>
        <option value="Su B">Wuxi</option>
        <option value="Su C">Xuzhou</option>
        <option value="Su D">Changzhou</option>
    </select>

</template>

// Combination<script setup>

import { ref } from 'vue' 

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

</script>

<template>
    
    <p>Convert the user input value to a numeric value .number，Lazy update .lazy</p>
    <!-- 。number Convert the user input value to a numeric value，If the content entered by the user cannot be converted into numbers，The data source will not be updated -->
    <!-- .lazy exist change Update data source，Instead input  -->
    <input type="text" ="age">

    <hr>
    <p>Remove the beginning and end blank characters</p>
    <input type="text" ="nickname">

</template>

// Combination<script setup>

import { reactive } from 'vue'

let picture = reactive({
    src: '/2015/0424/', // Image address    width: 200 // Display width})

</script>

<template>

    <input type="range" min="100" max="500" v-model="">

    <hr>
    <!-- v-bind: for src Properties binding specified data source -->
    <img v-bind:src="" v-bind:width="">

    <hr>
    <!-- : yes v-bind: Abbreviation form -->
    <img :src="" :width="">

    <hr>

    <!-- 如果绑定的值yes null or undefined，Then this property will be removed from the rendered element -->
    <button @click=" = null">设置宽度forNULL</button>

</template>

// Combination<script setup>

import {reactive} from 'vue'

let attrs = reactive({
    class: 'error',
    id: 'borderBlue'
})

</script>

<template>
    
    <!-- Use directly v-bind To bind multiple attributes and their values ​​to elements -->
    <button v-bind="attrs">I'm a normal button</button>

</template>

<style>
    .error {
        background-color: rgb(167, 58, 58);
        color: white;
    }

    #borderBlue {
        border: 2px solid rgb(44, 67, 167);
    }
</style>

// Combination<script setup>

import { ref, reactive } from 'vue'

let btnClassObject = reactive({
    error: false, // Theme color    flat: false // Shadow})

let capsule = ref(false)// Capsuleslet block = ref(false)// piece
</script>

<template>

    <input type="checkbox" v-model=""> error
    <input type="checkbox" v-model=""> flat
    <br>
    <br>
    <button :class="btnClassObject">I'm a normal button</button>


    <hr>
    <input type="checkbox" v-model="capsule"> capsule
    <input type="checkbox" v-model="block"> piece
    <br>
    <br>
    <button :class="{ 'rounded': capsule, 'fullWidth':  block }">I'm a normal button</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>

// Combination<script setup>

import { ref, reactive } from 'vue'

let btnTheme = ref([]) // Button class array
let capsule = ref(false)// Capsuleslet widthTheme = ref([])// Width array
</script>

<template>

    <input type="checkbox" value="error" v-model="btnTheme"> error
    <input type="checkbox" value="flat" v-model="btnTheme"> flat
    <br>
    <br>
    <!-- Directly use array data sources，What are the values ​​in the array，Directly in the elementclassThe corresponding class name appears in -->
    <button :class="btnTheme">I'm a normal button</button>


    <hr>
    <input type="checkbox" v-model="capsule"> capsule
    <input type="checkbox" value="fullWidth" v-model="widthTheme"> piece
    <br>
    <br>
    <!-- Use arrays and objects together -->
    <button :class="[{ 'rounded': capsule }, widthTheme]">I'm a normal button</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>

// Combination<script setup>

import { reactive, ref } from 'vue'

let btnTheme = reactive({
    backgroundColor: '#FF0000', // Background color    color: '#000000' // Text color})

let backColor = ref('#0000FF') // Background colorlet color = ref('#FFFFFF') // Text colorlet borRadius = ref(20) // Border rounded corners
</script>

<template>

    Background color：<input type="color" v-model="">
    Text color：<input type="color" v-model="">
    <br>
    <br>
    <!-- style：You can directly bind the object data source，But the attribute name of the object data source is the style attribute（Hump ​​nomenclature，kebab-casedform） -->
    <button :style="btnTheme">I'm a normal button</button>

    <hr>

    Background color：<input type="color" v-model="backColor">
    Text color：<input type="color" v-model="color">
    Border rounded corners：<input type="range" min="0" max="20" v-model="borRadius">
    <br>
    <br>
    <!-- style：Can write objects directly，But the object's attribute name is the style attribute（Hump ​​nomenclature，kebab-casedform） -->
    <button :style="{
        backgroundColor: backColor,
        color,
        'border-radius': borRadius + 'px'
    }">I'm a normal button</button>

</template>

<style>
button {
    border: none;
    padding: 15px 20px;
    background-color: rgb(179, 175, 175);
}
</style>

// Combination<!-- Script area -->
<script setup>
import { ref, reactive } from 'vue'

const btnTheme = ref([
    {
        backgroundColor: '#FF0000', // Background color        color: '#FFFFFF' // Text color    },
    {
        borderRadius: 0 // Border rounded corners    }
])

const colorTheme = reactive({
    backgroundColor: '#000000', // Background color    color: '#FFFFFF' // Text color})

const radiusTheme = reactive({
    borderRadius: 0 // Border rounded corners})
</script>

<!-- View area -->
<template>

    Background color：<input type="color" v-model="btnTheme[0].backgroundColor">
    Text color：<input type="color" v-model="btnTheme[0].color">
    capsule：<input type="checkbox" true-value="5px" false-value="0" v-model="btnTheme[1].borderRadius">
    <br>
    <br>
    <!-- Pass directly into the array -->
    <button :style="btnTheme">I'm a normal button</button>

    <hr>

    Background color：<input type="color" v-model="">
    Text color：<input type="color" v-model="">
    capsule：<input type="checkbox" true-value="5px" false-value="0" v-model="">
    <br>
    <br>
    <!-- Write arrays directly -->
    <button :style="[colorTheme, radiusTheme]">I'm a normal button</button>
</template>

<style>
button {
    padding: 15px 20px;
    border: none;
}
</style>

// Combination<script setup>

import { ref } from 'vue'

let isShow = ref(false)  // Whether to displaylet age = ref(20)  // agelet week = ref(3)  // Weekly
</script>


<template>

    Whether to display：<input type="checkbox" v-model="isShow">
    <!-- 
        v-if：The element will be rendered only when the instruction expression is true. 
        fortrueThis element is created when，forfalseThis element will be destroyed when
    -->
    <h3 v-if="isShow">This is a normal title tag</h3>

    <hr>

    age: <input type="range" min="0" max="100" v-model="age"> {{ age }}
    <!-- 
        v-if：Can cooperate v-else-if and v-else To build multiple judgment conditions，Don't mix irrelevant elements between them 
    -->
    <h1 v-if="age < 18">Minor</h1>
    <!-- <span>Insignificant elements</span> -->
    <h2 v-else-if="age < 35">youth</h2>
    <h3 v-else-if="age < 50">middle aged</h3>
    <h4 v-else>elderly</h4>

    <hr>

    What day of the week: <input type="range" min="1" max="7" v-model="week"> {{ week }}

    <!-- v-if：Can cooperate template Element use，The final rendering result does not include this <template>element -->
    <template v-if="week == 1 || week == 3 || week == 5 || week == 7">
        <h1>Can swim</h1>
    </template>
    <template v-else>
        <h1>不Can swim</h1>
    </template>

</template>

// Combination<script setup>

import { ref } from 'vue'

let isShow = ref(false)  // Whether to displaylet age = ref(20)  // agelet week = ref(3)  // Weekly
</script>


<template>

    Whether to display：<input type="checkbox" v-model="isShow">
    <!-- 
        v-show：The element will be rendered only when the instruction expression is true. 
        Regardless of whether the expression of the directive is true or false，This element is retained in the element
        for true The element's display:none style，for false This element will be added display:none style
    -->
    <h3 v-show="isShow">This is a normal title tag</h3>

    <hr>

    age: <input type="range" min="0" max="100" v-model="age"> {{ age }}

    <h1 v-show="age < 18">Minor</h1>
    <h2 v-show="age >= 18 && age < 35">youth</h2>
    <h3 v-show="age >= 35 && age < 50">middle aged</h3>
    <h4 v-show="age >= 50">elderly</h4>

    <hr>

    What day of the week: <input type="range" min="1" max="7" v-model="week"> {{ week }}

    <!-- v-show：Can't cooperate template Element use -->
    <!-- <template v-show="week == 1 || week == 3 || week == 5 || week == 7">
        <h1>Can swim</h1>
    </template>
    <template v-shw="week == 12 || week == 4 || week == 6">
        <h1>不Can swim</h1>
    </template> -->

</template>

// Combination<script>
export default {
    data: () => ({
        volume: 5  // Volume [0, 10]    }),
    methods: {
        // Add volume        addVolume() {
            // If the volume is not at the highest value, add the volume            if ( !== 10) {
                ++
            }
        },
        // Reduce the volume        subVolume() {
            // If the volume is not at the minimum value, reduce the volume            if ( !== 0) {
                --
            }
        },
        // Set the volume        setVolume(value) {
            // Determine whether the volume is between the value range            if (value >= 0 && value <= 10) {
                 = value
            }

        }
    }
}
</script>
<template>

    <h3>Current volume：{{ volume }}</h3>

    <!-- v-on: Event binding -->
    <button v-on:click="addVolume">Add volume</button>
    <button v-on:click="subVolume">Reduce the volume</button>

    <hr>

    <!-- @ yes v-on: Abbreviation of -->
    <button @click="setVolume(0)">Mute</button>
    <button @click="setVolume(5)">Moderate volume</button>
    <button @click="setVolume(10)">Maximum volume</button>

</template>

// Combination<script setup>

// Say hellofunction say(name) {
    ('Hello:' + name)
}

</script>


<template>

    <!-- .prevent Modifier blocks the default behavior of hyperlinks（Jump to Baidu page） -->
    <a href="" rel="external nofollow"  rel="external nofollow"  @="say('baiDu')">Baidu</a>

</template>

// Combination<script setup>
// Say hellofunction say(name) {
    ('Hello:' + name)
}
</script>

<template>
    <div class="divArea" @click="say('DIV')">
        <!-- .stop：Prevent bubbling events -->
        <button @="say('BUTTON')">Bubble button</button>
    </div>
</template>

<style>
.divArea {
    padding: 30px;
    border: 2px solid blue;
}
</style>

// Combination<script setup>
// Say hellofunction say(name) {
    ('Hello:' + name)
}
</script>

<template>
    <!-- .once：The bound event is only triggered once -->
    <button @="say('BUTTON')">Click me to try</button>
</template>

// Combination<script setup>
// Say hellofunction say(name) {
    ('Hello:' + name)
}
</script>

<template>
    <!-- .self：Only trigger events on this element are valid，Its child elements are invalid -->
    <div class="divArea" @="say('DIV')">
        <button>I'm a normal button</button>
    </div>
</template>

<style>
.divArea {
    padding: 30px;
    border: 2px solid blue;
}
</style>

// Combination<script setup>
// Say hellofunction say(name) {
    ('Hello:' + name)
}
</script>

<template>
    <!-- 
        .capture Add a listener to the element
        1：When element events bubble，The event that triggers the element of the modifier first
        2：If there are multiple modifiers，Then it is triggered from the outside to the inside
     -->
    <div class="divArea" @="say('DIV-1')">
        <div class="divArea" @click="say('DIV-2')">
            <div class="divArea" @="say('DIV-3')">
                <button>I'm a normal button</button>
            </div>
        </div>
    </div>
</template>

<style>
.divArea {
    padding: 30px;
    border: 2px solid blue;
}
</style>

// Combination<script setup>
function eventPrevent() {
    // Block event default behavior    ()
}
</script>

<template>
    <!-- .passive：Execute the default behavior first，Do not consider whether the executed code contains () -->
    <a href="" rel="external nofollow"  rel="external nofollow"  @="eventPrevent">Baidu</a>
</template>

// Combination<script setup>
// Popup messagefunction showMessage(message) {
    (message)
}
</script>

<template>
    The key pressed contains Enter Key Events： <input type="text" @="showMessage('You pressed the Enter key')">
    <hr>
    The key pressed contains Shift Enter Key Events：<input type="text" @="showMessage('You pressed the Shift + Enter key')"/>
    <hr>
    The keys pressed are only Shift Enter Key Events：<input type="text" @="showMessage('You only pressed the Shift + Enter key')"/>
</template>

// Combination<!-- Script area -->
<script setup>
    function showTest(text) {
        (text)
    }
</script>

<!-- View area -->
<template>
    <!-- Right-click the mouse -->
    <button @="showTest('The right mouse button is pressed')">Right-click the mouse</button>

    <hr>
    <!-- When clicked，The middle mouse button is used -->
    <button @="showTest('The middle mouse button is pressed')">When clicked，The middle mouse button is used</button>

    <hr>
    <!-- Press the left mouse button -->
    <button @="showTest('The left mouse button is pressed')">Press the left mouse button</button>
</template>

<!-- Style area -->
<style>
    button {
        border: none;
        padding: 15px 20px;
    }

    button:active {
        box-shadow: 0 0 5px grey;
    }
</style>

// Combination<script setup>
import { ref } from 'vue'
// courselet subject = ref([
    { id: 1, name: 'Vue' },
    { id: 2, name: 'Java' },
    { id: 3, name: 'UI Design' },
    { id: 4, name: 'Hadoop' },
    { id: 5, name: 'Later film and television' },
])
</script>

<template>
    <!-- 
        item in itmes
        item：value，当前Looping arrayvalue
        itmes：Looping array
     -->
    <h6>v-for Rendering array， v-for="item in itmes"</h6>
    <ul>
        <li v-for="sub in subject">
            serial number：{{  }} --- name：{{  }}
        </li>
    </ul>

    <hr>

    <!-- Deconstructing objects -->
    <h6>v-for Rendering array， v-for="{ Deconstruction…… } in itmes"</h6>
    <ul>
        <li v-for="{ id , name } in subject">
            serial number：{{ id }} --- name：{{ name }}
        </li>
    </ul>

    <hr>
    <!-- 
        (value, index) in itmes
        value：value
        index：index
        itmes：Looping array
     -->
    <h6>v-for Rendering array， v-for="(value, index) in itmes"</h6>
    <ul>
        <li v-for="(sub, index) in subject">
            serial number：{{  }} --- name：{{  }} --- index：{{ index }}
        </li>
    </ul>

    <hr>

    <!-- Deconstructing objects -->
    <h6>v-for Rendering array， v-for="({ Deconstruction…… }, index) in itmes"</h6>
    <ul>
        <li v-for="({ id , name } , index) in subject">
            serial number：{{ id }} --- name：{{ name }} --- index：{{ index }}
        </li>
    </ul>
</template>

// Combination<script setup>
import { reactive } from 'vue'
let student = reactive({
    styNum: '007', // Student ID    name: 'Jack', // name    age: 18 //age})
</script>

<template>
    <!-- 
        value in object
        value：Attribute value
        object：Looping object
     -->
    <h6>v-for Rendering objects， v-for="value in object"</h6>
    <ul>
        <li v-for="value in student">
            {{ value }}
        </li>
    </ul>

    <hr>

    <!-- 
        (value, name) in object
        value：Attribute value
        name：Attribute name
        object：Looping object
     -->
    <h6>v-for Rendering objects， v-for="(value, name) in object"</h6>
    <ul>
        <li v-for="(value, name) in student">
            Attribute name：{{ name }} --- Attribute value： {{ value }}
        </li>
    </ul>

    <hr>

    <!-- 
        (value, name, index) in object
        value：Attribute value
        name：Attribute name
        index: index
        object：Looping object
     -->
    <h6>v-for Rendering objects， v-for="(value, name, index) in object"</h6>
    <ul>
        <li v-for="(value, name, index) in student">
            Attribute name：{{ name }} --- Attribute value： {{ value }} --- index：{{ index }}
        </li>
    </ul>
</template>

// Combination<script setup>
import { ref } from 'vue'
// courselet subject = ref([
    { id: 1, name: 'Vue' },
    { id: 2, name: 'Java' },
    { id: 3, name: 'Hadoop' }
])

// Add coursesfunction addSubject() {
    // (front of the array)    ({ id: 4, name: 'Python' })
}
</script>

<template>

    <button @="addSubject">Add courses（Front of the array）</button>

    <h3>Not usedkeyvalue</h3>
    <ul>
        <li v-for="sub in subject">
            <input type="checkbox">
            {{ sub }}
        </li>
    </ul>

    <hr>

    <h3>Use indexkeyvalue</h3>
    
    <ul>
        <li v-for="(sub, index) in subject" :key="index">
            <input type="checkbox">
            {{ sub }}
        </li>
    </ul>

    <hr>

    <h3>Use list attributeskeyvalue（This property must be unique in this list）</h3>
    
    <ul>
        <li v-for="sub in subject" :key="">
            <input type="checkbox">
            {{ sub }}
        </li>
    </ul>

</template>