(2)Vue 初识——② 简易 TodoList | Vue 基础理论实操
本文版权归 “公众号 | 前端一万小时” 所有,欢迎转载!
转载请注明出处,未经同意,不可修改文章内容。
🔥🔥🔥本系列文章已在“公众号 | 前端一万小时”更新完毕,有需要的小伙伴可按需前往查看。
🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”,已于本月大改版,合二为一,干货满满,欢迎点击公众号菜单栏各模块了解。
涉及面试题:
1. v-model 的使用?
2. v-on 可以监听多个方法吗?
3. 如何使用事件处理程序?
4. 如何实现双向绑定?
5. v-model 支持什么修饰符?
[编号:vue_02]
1 要实现的效果
我们要使用 Vue 实现一个简易的 TodoList:输入内容点击“添加”后,可以新增内容至列表中,同时清空输入框。
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>
❓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>
保存后,刷新页面查看效果,三组内容都显示在了页面上:
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>
我们再梳理一次 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
变为空字符串,以清空输入框。
祝好,qdywxs ♥ you!
转载自:https://juejin.cn/post/7212492075551064119