// 組合式
<script setup>

    import { reactive } from 'vue'

    let student = reactive({
        name: 'Jack',
        desc: '<h3>我是來自中國(guó)的小朋友！</h3>'
    })
    
</script>

<template>

  <!-- 使用v-text指令，將數(shù)據(jù)采用純文本方式填充其空元素中 -->
  
  <div v-text="student.name"></div>

  <!-- v-text：以純文本的方式顯示數(shù)據(jù) -->
  <div v-text="student.desc"></div>

  <!-- 下面的代碼會(huì)報(bào)錯(cuò)：div 元素不是空元素 -->
  <!-- <div v-text="student.name">這是原始的div數(shù)據(jù)</div> -->
   
</template>

// 組合式
<script setup>

import { reactive } from 'vue'

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

</script>

<template>

    <!-- 插值表達(dá)式：在元素中的某一位置采用純文本的方式渲染數(shù)據(jù) -->
    <div>這是一個(gè) DIV 元素，{{ student.name }}，{{ student.desc }}</div>

</template>

// 組合式
<script setup>

import { reactive } from 'vue'

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


</script>

<template>

    <!-- 使用v-html指令，將數(shù)據(jù)采用HTML語(yǔ)法填充其空元素中 -->

    <div v-html="student.name"></div>

    <!-- v-html：以 HTML 語(yǔ)法顯示數(shù)據(jù) -->
    <div v-html="student.desc"></div>

    <!-- 下面的代碼會(huì)報(bào)錯(cuò)：div 元素不是空元素 -->
    <!-- <div v-html="student.name">這是原始的div數(shù)據(jù)</div> -->

</template>

// 組合式
<script setup>

import { ref } from 'vue' 

let inputText = ref('ABC')  // 單行文本框
let message = ref('本次更新有以下幾點(diǎn)：……') // 多行文本框
let open = ref(true) // 開燈（復(fù)選框）
let determine = ref('不確定') // 是否確定（復(fù)選框）
let likes = ref(['YMQ']) // 興趣愛好（復(fù)選框）
let sex = ref('woman') // 性別（單選按鈕）
let level = ref('B') //  // 證書等級(jí)（單選下拉框）
let city = ref(['蘇C', '蘇B']) // 去過的城市（多選下拉框）

</script>

<template>

    <!-- 單行文本框 -->
    <input type="text" v-model="inputText">

    <hr>
    <!-- 多行文本框 -->
    <textarea v-model="message"></textarea>

    <hr>
    <!-- 默認(rèn)情況下，復(fù)選框的值：true/false -->
    <input type="checkbox" v-model="open"> 燈

    <hr>
    <!-- 自定義復(fù)選框值： 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>
    證書等級(jí)：
    <select v-model="level">
        <option value="C">初級(jí)</option>
        <option value="B">中級(jí)</option>
        <option value="A">高級(jí)</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>將用戶輸入的值轉(zhuǎn)成數(shù)值 .number，懶更新 .lazy</p>
    <!-- 。number 將用戶輸入的值轉(zhuǎn)成數(shù)值，如果用戶輸入的內(nèi)容無法轉(zhuǎn)成數(shù)字，將不會(huì)更新數(shù)據(jù)源 -->
    <!-- .lazy 在 change 跟新數(shù)據(jù)源，而不是 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://uploadfile.bizhizu.cn/2015/0424/20150424015229741.jpg', // 圖像地址
    width: 200 // 顯示寬度
})

</script>

<template>

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

    <hr>
    <!-- v-bind: 為 src 屬性綁定指定的數(shù)據(jù)源 -->
    <img v-bind:src="picture.src" v-bind:width="picture.width">

    <hr>
    <!-- : 是 v-bind: 的縮寫形式 -->
    <img :src="picture.src" :width="picture.width">

    <hr>

    <!-- 如果綁定的值是 null 或者 undefined，那么該屬性將會(huì)從渲染的元素上移除 -->
    <button @click="picture.width = null">設(shè)置寬度為NULL</button>

</template>

// 組合式
<script setup>

import {reactive} from 'vue'

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

</script>

<template>
    
    <!-- 直接使用 v-bind 來為元素綁定多個(gè)屬性及其值 -->
    <button v-bind="attrs">我是一個(gè)普通的按鈕</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">我是一個(gè)普通的按鈕</button>


    <hr>
    <input type="checkbox" v-model="capsule"> 膠囊
    <input type="checkbox" v-model="block"> 塊
    <br>
    <br>
    <button :class="{ 'rounded': capsule, 'fullWidth':  block }">我是一個(gè)普通的按鈕</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數(shù)組

let capsule = ref(false)// 膠囊
let widthTheme = ref([])// 寬度數(shù)組

</script>

<template>

    <input type="checkbox" value="error" v-model="btnTheme"> error
    <input type="checkbox" value="flat" v-model="btnTheme"> flat
    <br>
    <br>
    <!-- 直接使用數(shù)組數(shù)據(jù)源，數(shù)組中有哪些值，直接在該元素的class里出現(xiàn)對(duì)應(yīng)的類名 -->
    <button :class="btnTheme">我是一個(gè)普通的按鈕</button>


    <hr>
    <input type="checkbox" v-model="capsule"> 膠囊
    <input type="checkbox" value="fullWidth" v-model="widthTheme"> 塊
    <br>
    <br>
    <!-- 數(shù)組和對(duì)象一起使用 -->
    <button :class="[{ 'rounded': capsule }, widthTheme]">我是一個(gè)普通的按鈕</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：可以直接綁定對(duì)象數(shù)據(jù)源，但是對(duì)象數(shù)據(jù)源的屬性名當(dāng)樣式屬性（駝峰命名法，kebab-cased形式） -->
    <button :style="btnTheme">我是一個(gè)普通的按鈕</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：可以直接寫對(duì)象，但是對(duì)象的屬性名當(dāng)樣式屬性（駝峰命名法，kebab-cased形式） -->
    <button :style="{
        backgroundColor: backColor,
        color,
        'border-radius': borRadius + 'px'
    }">我是一個(gè)普通的按鈕</button>

</template>

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

// 組合式
<!-- 腳本區(qū)域 -->
<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>

<!-- 視圖區(qū)域 -->
<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>
    <!-- 直接傳入數(shù)組 -->
    <button :style="btnTheme">我是一個(gè)普通按鈕</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>
    <!-- 直接寫數(shù)組 -->
    <button :style="[colorTheme, radiusTheme]">我是一個(gè)普通按鈕</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：指令表達(dá)式為真時(shí)才會(huì)渲染該元素 
        為true時(shí)會(huì)創(chuàng)建該元素，為false時(shí)會(huì)銷毀該元素
    -->
    <h3 v-if="isShow">這是一個(gè)普通的標(biāo)題標(biāo)簽</h3>

    <hr>

    年齡: <input type="range" min="0" max="100" v-model="age"> {{ age }}
    <!-- 
        v-if：可以配合 v-else-if 和 v-else 來搭建多重判斷條件，他們中間不要參雜無關(guān)緊要的元素 
    -->
    <h1 v-if="age < 18">未成年</h1>
    <!-- <span>無關(guān)緊要的元素</span> -->
    <h2 v-else-if="age < 35">青年</h2>
    <h3 v-else-if="age < 50">中年</h3>
    <h4 v-else>老年</h4>

    <hr>

    周幾: <input type="range" min="1" max="7" v-model="week"> {{ week }}

    <!-- v-if：可以配合 template 元素使用，最后渲染的結(jié)果并不會(huì)包含這個(gè) <template>元素 -->
    <template v-if="week == 1 || week == 3 || week == 5 || week == 7">
        <h1>可以游泳</h1>
    </template>
    <template v-else>
        <h1>不可以游泳</h1>
    </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：指令表達(dá)式為真時(shí)才會(huì)渲染該元素 
        無論該指令的表達(dá)式是否 true 或 false，該元素在元素中是保留該元素的
        為 true 時(shí)會(huì)刪除該元素的 display:none 樣式，為 false 時(shí)會(huì)給該元素添加 display:none 樣式
    -->
    <h3 v-show="isShow">這是一個(gè)普通的標(biāo)題標(biāo)簽</h3>

    <hr>

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

    <h1 v-show="age < 18">未成年</h1>
    <h2 v-show="age >= 18 && age < 35">青年</h2>
    <h3 v-show="age >= 35 && age < 50">中年</h3>
    <h4 v-show="age >= 50">老年</h4>

    <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">
        <h1>可以游泳</h1>
    </template>
    <template v-shw="week == 12 || week == 4 || week == 6">
        <h1>不可以游泳</h1>
    </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--
            }
        },
        // 設(shè)置音量
        setVolume(value) {
            // 判斷音量是否在取值范圍之間
            if (value >= 0 && value <= 10) {
                this.volume = value
            }

        }
    }
}
</script>
<template>

    <h3>當(dāng)前音量：{{ volume }}</h3>

    <!-- 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 修飾符阻止了超鏈接的默認(rèn)行為（跳轉(zhuǎn)到百度頁(yè)） -->
    <a  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：阻止產(chǎn)生冒泡事件 -->
        <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：綁定的事件只觸發(fā)一次 -->
    <button @click.once="say('BUTTON')">點(diǎn)我試一下</button>
</template>

// 組合式
<script setup>
// 打招呼
function say(name) {
    window.alert('你好：' + name)
}
</script>

<template>
    <!-- .self：只在該元素上觸發(fā)事件有效，其子元素?zé)o效 -->
    <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 給元素添加一個(gè)監(jiān)聽器
        1：當(dāng)元素事件產(chǎn)生冒泡時(shí)，先觸發(fā)的是該修飾符的元素的事件
        2：如果有多個(gè)該修飾符，則由外向內(nèi)依次觸發(fā)
     -->
    <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() {
    // 阻止事件默認(rèn)行為
    event.preventDefault()
}
</script>

<template>
    <!-- .passive：先執(zhí)行默認(rèn)行為，不考慮執(zhí)行的代碼中是否包含 event.preventDefault() -->
    <a  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>

// 組合式
<!-- 腳本區(qū)域 -->
<script setup>
    function showTest(text) {
        window.alert(text)
    }
</script>

<!-- 視圖區(qū)域 -->
<template>
    <!-- 鼠標(biāo)右鍵按下 -->
    <button @mousedown.right="showTest('按下的是鼠標(biāo)右鍵')">鼠標(biāo)右鍵按下</button>

    <hr>
    <!-- 點(diǎn)擊時(shí)，采用的是鼠標(biāo)中鍵 -->
    <button @click.middle="showTest('按下的是鼠標(biāo)中鍵')">點(diǎn)擊時(shí)，采用的是鼠標(biāo)中鍵</button>

    <hr>
    <!-- 鼠標(biāo)左鍵按下 -->
    <button @mousedown.left="showTest('按下的是鼠標(biāo)左鍵')">鼠標(biāo)左鍵按下</button>
</template>

<!-- 樣式區(qū)域 -->
<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設(shè)計(jì)' },
    { id: 4, name: 'Hadoop' },
    { id: 5, name: '影視后期' },
])
</script>

<template>
    <!-- 
        item in itmes
        item：值，當(dāng)前循環(huán)的數(shù)組值
        itmes：循環(huán)的數(shù)組
     -->
    <h6>v-for 渲染數(shù)組， v-for="item in itmes"</h6>
    <ul>
        <li v-for="sub in subject">
            編號(hào)：{{ sub.id }} --- 名稱：{{ sub.name }}
        </li>
    </ul>

    <hr>

    <!-- 解構(gòu)對(duì)象 -->
    <h6>v-for 渲染數(shù)組， v-for="{ 解構(gòu)…… } in itmes"</h6>
    <ul>
        <li v-for="{ id , name } in subject">
            編號(hào)：{{ id }} --- 名稱：{{ name }}
        </li>
    </ul>

    <hr>
    <!-- 
        (value, index) in itmes
        value：值
        index：索引
        itmes：循環(huán)的數(shù)組
     -->
    <h6>v-for 渲染數(shù)組， v-for="(value, index) in itmes"</h6>
    <ul>
        <li v-for="(sub, index) in subject">
            編號(hào)：{{ sub.id }} --- 名稱：{{ sub.name }} --- 索引：{{ index }}
        </li>
    </ul>

    <hr>

    <!-- 解構(gòu)對(duì)象 -->
    <h6>v-for 渲染數(shù)組， v-for="({ 解構(gòu)…… }, index) in itmes"</h6>
    <ul>
        <li v-for="({ id , name } , index) in subject">
            編號(hào)：{{ id }} --- 名稱：{{ name }} --- 索引：{{ index }}
        </li>
    </ul>
</template>

// 組合式
<script setup>
import { reactive } from 'vue'
let student = reactive({
    styNum: '007', // 學(xué)號(hào)
    name: 'Jack', // 名字
    age: 18 //年齡
})
</script>

<template>
    <!-- 
        value in object
        value：屬性值
        object：循環(huán)的對(duì)象
     -->
    <h6>v-for 渲染對(duì)象， v-for="value in object"</h6>
    <ul>
        <li v-for="value in student">
            {{ value }}
        </li>
    </ul>

    <hr>

    <!-- 
        (value, name) in object
        value：屬性值
        name：屬性名
        object：循環(huán)的對(duì)象
     -->
    <h6>v-for 渲染對(duì)象， v-for="(value, name) in object"</h6>
    <ul>
        <li v-for="(value, name) in student">
            屬性名：{{ name }} --- 屬性值： {{ value }}
        </li>
    </ul>

    <hr>

    <!-- 
        (value, name, index) in object
        value：屬性值
        name：屬性名
        index: 索引
        object：循環(huán)的對(duì)象
     -->
    <h6>v-for 渲染對(duì)象， v-for="(value, name, index) in object"</h6>
    <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() {
    // （數(shù)組最前面）添加
    subject.value.unshift({ id: 4, name: 'Python' })
}
</script>

<template>

    <button @click.once="addSubject">添加課程（數(shù)組最前面）</button>

    <h3>不使用key值</h3>
    <ul>
        <li v-for="sub in subject">
            <input type="checkbox">
            {{ sub }}
        </li>
    </ul>

    <hr>

    <h3>使用索引當(dāng)key值</h3>
    
    <ul>
        <li v-for="(sub, index) in subject" :key="index">
            <input type="checkbox">
            {{ sub }}
        </li>
    </ul>

    <hr>

    <h3>使用列表屬性當(dāng)key值（該屬性必須再此列表中唯一）</h3>
    
    <ul>
        <li v-for="sub in subject" :key="sub.id">
            <input type="checkbox">
            {{ sub }}
        </li>
    </ul>

</template>