老师现在课程中使用的这种vue3写法相对于vue3支持的vue2语法有什么优点？

来源：7-3 PC 端 Header 模块处理分析与简单实现

曹学习

2022-05-18

感觉还是vue2的结构化语法看得更加清楚，理解上也更加快呀，比如下面这种写法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3.1.5/dist/vue.global.js"></script>
</head>

<body>
    <div id="root"></div>
</body>

<script>
    Vue.createApp({
        data() {
            return {
                list: [],
                inputValue: ''
            }
        },
        methods: {
            handleAddItem() {
                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">{{ item }} {{ index }}</li>
                </ul>
            </div>`
    }).mount('#root');
</script>
</html>

写回答

1回答