新建一個(gè) index.html 文件,然后完成以下初步編輯

<div id="app">
    <input v-model="inputValue" type="text" />
    <button v-on:click="handleAddBtn">提交</button>
    <ul>
        <li v-for="item in list">{{ item }}</li>
    </ul>
</div>

通過(guò) script 標(biāo)簽引入 Vue

<script src="https://cdn.staticfile.org/vue/2.6.2/vue.js"></script>

編輯 js 內(nèi)容

let app = new Vue({
    el: '#app',
    data: {
        list: ['1', '2'],   // 初識(shí)值, 也可以不填
        inputValue: ''      // 和 input 的 inputValue 雙向綁定
    },
    methods: {
            // 添加事件
        handleAddBtn() {
            this.list.push(this.inputValue)
            this.inputValue = ''
        }
    },
})

效果展示

效果展示