Vue3基础-CSDN博客

本文链接：https://blog.csdn.net/weixin_40746230/article/details/124587575

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@next"></script>
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    

</body>
<script>
    Vue.createApp({
        data(){
            return{
                 counter:1 
            }
        },
        mounted(){
             console.log('页面加载完成后-自动执行')
             setInterval(() => {
                 this.counter += 1
             }, 1000);
        },
        template:'<div>{{counter}}</div>'
    }).mount("#app")
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue@next"></script>
    <title>洗脚</title>
</head>
<body>
    <div id="app"></div>
    
</body>
<script>
   Vue.createApp({
       data() {
           return {
               content:'',
               setMeal:'真空套餐 学生套餐',
               isShowMeal:false
               
           }
       },
       methods:{
           wecomeBtnClick(){
               this.content="欢迎你的光临 贵宾一位!"
           },
           byeBtnClick(){
                this.content="欢迎下次光临，真空套餐"
           },
           showOrhideBtnClick(){
               this.isShowMeal=!this.isShowMeal
           }

       },
       
       template: `<div>
                        <div>{{content}}</div>
                        <button v-on:click="wecomeBtnClick">有顾客来</button>&nbsp;
                        <button v-on:click="byeBtnClick">顾客离开</button>
                        <div>
                            <div v-if="isShowMeal" >{{setMeal}}</div>

                            <button v-on:click="showOrhideBtnClick">显示/隐藏套餐</button>
                        </div>
                   </div>`
   }).mount("#app")

</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@next"></script>
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    

</body>
<script>
    Vue.createApp({
        data() {
            return {
                //---此处修改
                inputValue: '',  
                list: []   
            }
        },
        methods: {
            handleAddItem() {
                //----此处修改
                if(this.inputValue){
                    this.list.push(this.inputValue)
                this.inputValue=''
                }
               
            }
        },
        template: `
            <div>
                <!--此处修改-->
                <input v-model="inputValue" />
                <button v-on:click="handleAddItem">增加佳丽</button>
                <ul>
                    <li v-for="(item,index) of list">[{{index}}]{{item}}</li>
                </ul>
            </div>

        `
    }).mount("#app")
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@next"></script>
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    

</body>
<script>
    const app=Vue.createApp({
        data() {
            return {
                //---此处修改
                inputValue: '',  
                list: []   
            }
        },
        methods: {
            handleAddItem() {
                //----此处修改
                if(this.inputValue){
                    this.list.push(this.inputValue)
                this.inputValue=''
                }
               
            }
        },
        template: `
            <div>
                <my-title />
                <input v-model="inputValue" />
                <button v-on:click="handleAddItem">增加佳丽</button>
                <ul>
                    <my-jiali 
                        v-for="(item,index) of list"  
                        v-bind:item="item" 
                        v-bind:index="index"  
                    />
                </ul>
            </div>

        `
    })

    app.component('my-title',{
        template:'<h1 style="text-align:center">洗脚</h1>'
    })
    app.component('my-jiali',{
        props:['item','index'],
        template:`<li>[{{index}}]-{{item}}</li>`
    })
    app.mount('#app')
</script>
</html>