vue实现一个带搜索功能的列表_（Vue起步）2.模板指令：v-for / v-on / v-model

①公众号：王酱酱记
②记录跟着文档学习Vue的一些关键点，持续更新。感兴趣的小白建议关注一下
③Vue当中有几个常见的指令，看看是怎么用的，强烈建议你自己在编辑器里打一遍，你就更明白Vue为什么是数据驱动型的一款框架啦！

关键词：v-for、 v-on 、v-model
实现需求：循环数据、绑定事件、数据的双向绑定
了解：Vue.js 设计思想、Vue.js 的基础语法
注意：v-on:click 用 @click代替

一、实现通过 input 框向“正在进行”的列表中增加列表项内容

使用：v-for 帮助去循环多行数据

//创建一个Vue实例，加上对应的 el 和 data 数据
//在dom元素加上vue的一个指令 v-for 用于循环多列数据<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>TodoList</title><script src='./vue.js'></script>
</head>
<body><div id = "app"><input type="text" /><button>提交</button><ul><li v-for="item in list">{{item}}</li></ul></div> <script>var app = new Vue ({el: '#app',data: {list: ['第一课内容' , '第二课内容' , '33333']}})</script></body>
</html>

list：需要循环数据
item: 指的是循环过程中循环的每一项内容

假设，在list再任意假如一个字符串，如'33333' ，那么此时浏览器页面上也会相应出现列表内容为 33333 的效果

二、实现在输入框输入内容提交后，提交功能出现弹出框效果

分析需求：点击“提交”按钮，需要用绑定事件实现
使用：v-on Vue 用于绑定事件的模板指令（如点击事件，v-on:click="handleBtnClick"，这里的 handleBtnClick 是一个函数（一种方法），对应地在 Vue 实例中也要相应地映射这种方法）
注意：v-on:click 可以写成 @click

<body><div id = "app"><input type="text" /><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: ['第一课内容' , '第二课内容' , '33333']},methods: {handleBtnClick : function(){alert('click')}}})</script>
</body>

只要点击 dom 元素中的 button ，就会执行 handleBtnClick 这个方法。而 Vue 的实例接管了页面的 dom 元素，执行 handleBtnClick 则会自动到这个实例中对应地找到这个方法。

试一下：点击页面上的 “提交” ，会不会弹出含有 “click” 内容的弹窗

三、实现输入内容，在页面上展示输入的内容

使用：v-model 用于实现数据的双向绑定。它的值等于一个数据。

<body><div id = "app"><input type="text" 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: [],inputValue: ''},methods: {handleBtnClick : function(){alert('click')}}})</script>
</body>

dom 元素里用 v-model 绑定数据。当 dom 元素中的内容发生变化时，Vue 实例中 data 数据中对应 v-model 的数据值也会相应地发生变化；反之，data 的对应数据值发生变化，页面也会发生变化

试一下：控制台测试一下 v-model 双向的数据绑定效果吧（如图）

四、实现在点击“提交”后将input里的value值输出展示在页面中

实现需求： “提交” 和 输入进去的内容 结合

<body><div id = "app"><input type="text" 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: [],inputValue: ''},methods: {handleBtnClick : function(){alert(this.inputValue) //实现输入+提交的结合}}})</script>
</body>

试一下：输入框空白时，点击 “提交”，弹出空白内容框。输入内容时，输入框（页面）数据变化，实例 data 中 inputValue 也跟着变化（数据的双向绑定），点击 “提交” ，弹出有内容框。

五、实现每当在输入框中输入东西，页面列表中也会增加相应的东西

分析需求：先分析列表增加的方式就是在 data 中的 list 操作，每添加一个数据，就会在页面出现一个列表；然后实现输入框输入值，使用 data 中的 inputValue 来代表每次输入框输入的值；点击之后出结果

<body><div id = "app"><input type="text" 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: [],inputValue: ''},methods: {handleBtnClick : function(){this.list.push(this.inputValue) //实现列表+输入+点击              }}})</script>
</body>

六、实现每次输入完都清空输入框内容

分析需求：让输入框的值 inputValue 为变成空字符串，数据的双向绑定起作用。数据变了，页面也就跟着变了

<body><div id = "app"><input type="text" 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: [],inputValue: ''},methods: {handleBtnClick : function(){this.list.push(this.inputValue), //实现列表+输入+点击this.inputValue = '' //实现输入后框内变空}}})</script>
</body>

所以知道了原生JS操作 & Vue.js操作的区别了吗？

原生JS：都是在操作dom
Vue.js: 操作的都是数据