likes
comments
collection
share

（2）Vue 初识——② 简易 TodoList | Vue 基础理论实操

作者站长头像
站长
· 阅读数 17
本文版权归 “公众号 | 前端一万小时” 所有，欢迎转载！

转载请注明出处，未经同意，不可修改文章内容。

🔥🔥🔥本系列文章已在“公众号 | 前端一万小时”更新完毕，有需要的小伙伴可按需前往查看。

🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。

（2）Vue 初识——② 简易 TodoList | Vue 基础理论实操

涉及面试题：
1. v-model 的使用？
2. v-on 可以监听多个方法吗？
3. 如何使用事件处理程序？
4. 如何实现双向绑定？
5. v-model 支持什么修饰符？

[编号：vue_02]

🔗本阶段对应的“官方文档”阅读“介绍”章节

1 要实现的效果

我们要使用 Vue 实现一个简易的 TodoList：输入内容点击“添加”后，可以新增内容至列表中，同时清空输入框。

（2）Vue 初识——② 简易 TodoList | Vue 基础理论实操

2 Vue 中的循环

通过效果展示，我们知道其实要实现的内容不多，结构非常简单，只有一个 input 框、一个“添加”按钮和一个列表项。

打开编辑器，跟着我一步步来熟悉 Vue 的代码编写。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>前端一万小时-开发 TodoList</title>
    <script src="./vue.js"></script> <!-- 2️⃣引入 Vue.js 库； -->
  </head>
  <body>

    <!-- 1️⃣写出页面的结构； -->
    <div id="app">
      <input type="text">
      <button>添加</button>

      <ul> <!-- ❗️ul 中 li 标签的内容，实际应是根据数据循环显示出来的内容。 -->
        <li>Oli</li>
        <li>qdywxs</li>
      </ul>

    </div>

    <script>
      var app = new Vue({ // 3️⃣创建一个 Vue 的实例；
        el: '#app' // 4️⃣指定使用 Vue 接管 #app 的 DOM 区域；
      })
    </script>
  </body>
</html>

（2）Vue 初识——② 简易 TodoList | Vue 基础理论实操

❓Vue 中如何对列表进行循环？

答：Vue 中使用 v-for 指令将数组渲染成列表。

所以既然 li 标签的内容是数据，我们就将其定义在实例的 data 内：

<div id="app">
  <input type="text">
  <button>添加</button>

  <ul> <!-- ❗️当我们定义了 list 数据后，借助 v-for 指令把数据内容渲染在页面上！ -->
    
    <li v-for="item in list">{{item}}</li> <!-- 3️⃣保留一个 li 标签，写上 v-for 指令；

																						3️⃣-①：item in list 指的是循环 data 里的
																						list 数据，循环的每一项放入 item；

																						3️⃣-②：li 标签内用 {{}} 调用 item，
																						即渲染 list 中的每一项内容。 -->
  </ul>

</div>

<script>
  var app = new Vue({
    el: '#app',
    
    data: { // 1️⃣data 是固定的写法，指的是这个 Vue 实例里具体的数据；
      
      list: ['Oli', 'qdywxs', '666'] // 2️⃣data 中定义 list 的数据，其中有三组内容；
    }
  })
</script>

保存后，刷新页面查看效果，三组内容都显示在了页面上： （2）Vue 初识——② 简易 TodoList | Vue 基础理论实操

3 Vue 中绑定事件

接下来我们给 button 绑定事件。

❓Vue 中如何绑定事件？

答：Vue 中使用 v-on 指令绑定事件。

<div id="app">
  <input type="text">

  <button v-on:click="handleBtnClick">添加</button> <!-- 1️⃣：在 button 标签写上 v-on 指令；

																										1️⃣-①：v-on 后面以冒号分隔监听的
																										DOM 事件 click；
																										
																										1️⃣-②：当点击“添加”按钮，即 click 事
																										件触发后执行 handleBtnClick 方法； -->

  <ul>
    <li v-for="item in list">{{item}}</li>
  </ul>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      list: ['Oli', 'qdywxs', '666']
    },
    
    methods: { // ❗️Vue 中的方法都定义在实例的 methods 内，methods 中文即译为“方法”！

      handleBtnClick() { // 2️⃣我们在 handleBtnClick 方法中让它 alert 出“click”。
        alert('click')
      }
    }
  })
</script>

（2）Vue 初识——② 简易 TodoList | Vue 基础理论实操

我们再梳理一次 v-on 绑定事件的整个流程：因为我们在这个名为 app 的 Vue 实例中传入的 DOM 元素是 #app 这个 div，所以当点击它里面的“添加”按钮要执行 handleBtnClick 方法时，Vue 会自动到实例的 methods 中找到 handleBtnClick 这个方法并执行，最终页面弹出“click”。

4 Vue 中的双向绑定数据

搞定了事件绑定，我们就可以让 input 框里输入的内容在点击按钮后，显示在列表里了。

❓在点击按钮后，如何拿到 input 框里输入的内容？

答：使用 Vue 中的指令 v-model 实现双向数据绑定（即当 input 框里的内容发生变化时，Vue 实例中 data 的 inputValue 就会发生变化，反之亦然）。

    <div id="app">

      <input type="text" v-model="inputValue"> <!-- 1️⃣在 input 上写 v-model 指令，
												它等于 inputValue 这个数据； -->

      <button v-on:click="handleBtnClick">添加</button>
      <ul>
        <li v-for="item in list">{{item}}</li>
      </ul>
    </div>

    <script>
      var app = new Vue({
        el: '#app',
        data: {

          list: [], // ❗️将 list 里的内容清除，默认为空数组！

          inputValue: '' // 2️⃣把数据 inputValue 写入 data 内，默认为空字符串；
        },

        methods: {
          handleBtnClick() {
            
            // 3️⃣通过 push 把 input 框里的内容放入 list 中；
            this.list.push(this.inputValue)

            // 4️⃣当输入内容放入 list 后，让 inputValue 为空，清空输入框里的内容。
            this.inputValue = '' 
          }
        }
      })
    </script>

v-model 负责监听用户的输入事件以更新数据 inputValue 。当数据更新后，通过 this.inputValue 获取输入的内容放入 list 中。与此同时让 inputValue 变为空字符串，以清空输入框。

（2）Vue 初识——② 简易 TodoList | Vue 基础理论实操

祝好，qdywxs ♥ you！

转载自:https://juejin.cn/post/7212492075551064119
评论
请登录