Vue 小白入门之 Todos 应用实战

大家在学 Vue 的时候，是不是总觉得理论一堆，可真到上手做点东西就犯难？这篇文章就是来给大伙 "救急" 的。通过一个超简单的 Todos 应用，一步步带你看 Vue 到底咋用。不管是数据绑定、任务列表展示，还是事件处理这些关键功能，都掰开了揉碎了讲，看完你就能上手写点 Vue 小应用，感受下 Vue 的厉害之处。

直接切入正题，讲讲 Vue 在这个 Todos 应用里到底有多厉害。

Vue 实例与数据绑定

咱先创建一个 Vue 实例，就像这样const App = { 。在这个实例里，有两个超重要的部分，一个是data，另一个是methods。

data就像是一个小仓库，存着咱们应用要用的数据。这里面有个title，一开始它是空的，就等着咱们输入新任务的标题呢。还有个todos，它是个数组，里面已经放了两个任务对象，一个是 "吃饭"，状态是没完成；另一个是 "睡觉"，已经完成啦。

代码如下：

javascript 复制代码

const App = {
    // vue 2.0 
    data() {
        return {
            title: "",
            todos: [
                {title: '吃饭', done: false },
                {title: '睡觉', done: true}
            ]
        }
    },

在这段代码里，data是一个函数，它返回一个对象。对象中的title属性用于存储用户输入的新任务标题，初始值为空字符串""。todos属性是一个数组，包含了两个任务对象，每个对象都有title和done两个属性。

在 HTML 里，有个<div id="app">的区域，这就是 Vue 要 "大显身手" 的地方。这里面有个<h2>{{title}}</h2> ，这两个大括号{{}}是 Vue 的一种特殊语法，它会把data里的title值显示在这里。比如说，要是你在title里存了 "去跑步"，那这里就会显示 "去跑步"。

还有个输入框<input type="text" v-model="title" @keydown.enter="addTodo"> ，这个输入框用了 Vue 的v - model指令，实现了双向绑定。啥叫双向绑定呢？就是你在输入框里输入东西，data里的title值也会跟着变；反过来，data里的title值变了，输入框里的内容也会变。而且，当你在输入框里按回车键的时候，就会触发@keydown.enter="addTodo"，也就是调用methods里的addTodo方法。

任务列表展示与动态样式

接着看<ul>标签里的内容，<li v-for="todo in todos">这行代码用了v - for指令，它会把data里todos数组里的每个任务，都生成一个<li>标签。比如说，现在todos数组里有两个任务，那它就会生成两个<li>标签。

xml 复制代码

 <style>
  .done {
    color: gray;
    text-decoration: line-through;
  }
  </style>

在每个<li>标签里，有<span v-bind:class="{done: todo.done}">{{todo.title}}</span> 。这里的v - bind:class是用来动态绑定样式的。如果任务的done属性是true，那这个标签就会加上.done这个类，咱们之前定义过这个类，加了之后文字就会变成灰色，还有删除线，这就是动态样式的效果。{{todo.title}}就是显示任务的标题。

对应的代码如下：

xml 复制代码

<ul>
    <li v-for="todo in todos">
        <!-- 动态样式任务，提供了语法支持 -->
        <span v-bind:class="{done: todo.done}">{{todo.title}}</span>
    </li>
</ul>

<li v-for="todo in todos">通过v-for指令遍历data中的todos数组，为每个任务创建一个<li>元素。<span v-bind:class="{done: todo.done}">{{todo.title}}</span>中，v-bind:class根据任务的done属性动态绑定.done类，从而实现任务完成状态的样式区分，{{todo.title}}则用于显示每个任务的标题。

事件处理与任务添加

再看看methods部分，这里面定义了addTodo方法。当你在输入框按回车键触发这个方法时，它会先执行this.todos.push({title: this.title, done: false}) ，这就是在todos数组里添加一个新的任务对象，新任务的标题就是你在输入框输入的内容，而且默认是未完成状态。然后，this.title = ''这行代码会把输入框清空，方便你输入下一个任务。

methods部分的代码如下：

kotlin 复制代码

// 事件处理函数，方法
methods: {
    addTodo() {
        // this.data.todos
        this.todos.push({
            title: this.title,
            done: false
        })
        this.title = ''
    }
}

在这个addTodo方法中，this.todos.push({title: this.title, done: false})将一个新的任务对象添加到todos数组中，新任务的标题取自data中的title值，且初始状态为未完成。this.title = ''则将data中的title值清空，以便用户输入下一个任务。

最后，Vue.createApp(App).mount('#app')这行代码，就是把咱们创建的 Vue 实例，挂载到id为app的 DOM 元素上，这样 Vue 就开始工作啦。

挂载实例的代码为：

scss 复制代码

Vue.createApp(App).mount('#app')

Vue.createApp(App)创建一个 Vue 应用实例，其中App是我们之前定义的包含data和methods等选项的对象。.mount('#app')将这个 Vue 应用实例挂载到id为app的 DOM 元素上，使 Vue 能够控制该元素及其子元素，开始进行数据绑定、事件处理等操作。

通过这个简单的 Vue Todos 应用，能清楚看到 Vue 在数据绑定、事件处理、动态样式这些方面的强大功能。它让咱们能更专心搞业务逻辑，不用再为底层的 DOM 操作头疼，这就是 Vue 框架给咱带来的便利，也是现代前端开发的魅力所在。