【IMWeb训练营作业】---Vue2.0 学习（一）

最新推荐文章于 2025-08-20 10:35:34 发布

原创最新推荐文章于 2025-08-20 10:35:34 发布 · 238 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#node.js #mvvm

vue-js 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了使用Vue2.0创建一个简易的TodoList应用的过程。通过简单的项目结构，演示了如何利用Vue的指令和MVVM模式实现任务的添加与删除功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue2.0起步

就不介绍vue 了，大家都知道了，我盗个图先撑个门面

这就是vue的核心思想，传说中的 `MVVM`模式自行百度，O(∩_∩)O~！

这里写图片描述

我使用node.js 的npm进行安装下载，
安装好node.js ，命令：npm install vue 下载最新稳定版

第一天简单，项目结构也没怎么规划，直接一个index.html + app.js,
自己花了几分钟写一下一个极其简单的demo，勿喷！！！
上图
这里写图片描述

目前只实现简单的，添加任务，删除任务，后续将继续完善这个todolist，以下是涉及到的代码：

html结构

 <div id="app">
         <p>
            <input type="text" @keyup.enter="setList" value="" autofocus placeholder="提示：吃饭，睡觉，打豆豆等任务。。。">       
         </p>
        <hr>
<h2 v-show="!lists.length">暂无事件任务...</h2>
        <ol>
            <li v-for="(item,index) in lists">{{item}} <button @click = "removeList(index)">X</button></li>
        </ol>
     </div>

js部分

var list = ['吃饭', '睡觉'];

new Vue({
    el:'#app',
    data: {
      lists : [], 
    },

    //写个方法
    methods: {
        setList(event) {
            this.lists.push(event.target.value);
            event.target.value = ''
        },
        removeList(index) {
            this.lists.splice(index,1)
        }

    }

})