pnpm第三课

一、五个小案例

<script setup lang="ts">
import {ref,computed,watch,onMounted} from 'vue';
    const weather = ref(true);
    // 变量
    const name = ref("");
    const company = ref("");
    const name1 = ref("");
    const company1 = ref("");

    // 计算属性
    const email = computed(()=>{
        return name1.value + "@" + company1.value + ".com"
    })

    // 监视属性
    const musicName = ref("");
    watch(musicName,(nv, ov) => {
        console.log("wer",nv);
        console.log("wer1",ov);
    })
    // 生命周期
    onMounted(()=>{
        console.log("加载完成")
    })
</script>

<template>
    1.天气小案例<br>
    当前天气是：{{weather?"炎热":"凉爽"}}
    <button @click="weather =! weather">切换</button><br>

    <p>2.案例二</p>
    姓名拼音：<input type="text" v-model="name"><br>
    公司拼音：<input type="text" v-model="company"><br>
    邮箱：{{name}} @ {{company}}.com

    <p>3.计算属性</p>
    姓名拼音：<input type="text" v-model="name1"><br>
    公司拼音：<input type="text" v-model="company1"><br>
    邮箱：{{email}}

    <p>4.音乐搜索</p>
    音乐名：<input type="text" v-model="musicName">
    
    <p>5.监视属性console见</p>
</template>