Vue学习入门----实现一个todoList案例

最新推荐文章于 2022-11-13 16:36:41 发布

原创

最新推荐文章于 2022-11-13 16:36:41 发布 · 880 阅读

1 ·

CC 4.0 BY-SA版权

本文是一篇Vue入门教程，通过创建一个todoList案例来介绍Vue的基础用法。讲解了如何添加vue.js依赖，设置HTML结构，并利用v-model进行双向数据绑定，v-for进行列表渲染，以及v-on:click处理点击事件。

关于vue的优点就不讨论了，这里直接上项目。

1、添加vue.js的依赖库

2、编写html网页

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>TodoList</title>
      <script src="../Vue/vue.min.js"></script>
</head>
<body>
      <div id="app">
            <!-- v-model代表数据的双向绑定,意思就是input输入的内容改变时，inputValue的值会变
            当inputValue的值改变时，input输入框的内容也会改变 -->
            <input type="text" v-model="inputValue">
            <button v-on:click="handleSubmit">提交</button>
            <ul>
                  <!-- v-for的功能：去循环list里面的数据，循环得到的每一个数据都放到item里面 -->
                  <li v-for="item in list">{
  
  {item}}</li>
            </ul>
      </div>