likes
comments
collection
share

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

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

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

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

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

(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
评论
请登录