vue.js教程栏目介绍vue.js学习之二的数据驱动开发 。
–> 登录后复制
在这里，我主要做了如下修改：
首先，在
标签中增加了一个v-show指令，该指令可用于绑定一个布尔类型的数据（即这里的isShow），以此来决定是否显示其所在的标签。然后，在页面中新增了一个按钮标签，并用v-bind指令设置了该标签的value属性，该属性的值是一个条件表达式，它将根据isShow的值显示不同的文本。最后，用v-on指令（@是该指令v-on:前缀的简写形式）为新增的按钮标签注册了一个名为toggleShow的单击事件处理函数。
下面继续来对main.js中的代码进行修改，具体如下：
- const app = new Vue({ el: '#app', data:{ sayHello: '你好，Vue.js！', vueLogo: 'img/logo.png', isShow: true }, methods:{ toggleShow: function() { this.isShow = !this.isShow; } }});
登录后复制
在这里，我主要做了如下修改：
首先，在 Vue 对象的data成员中定义了之前绑定的布尔类型数据isShow，并将其默认值设置为 true。然后，为 Vue 对象新增了一个名为methods的成员。该成员用于设置页面元素中注册的事件处理函数，它的值也是一个 JSON 格式的对象。该对象的每个成员都对应一个已在页面元素中用v-on指令注册的事件处理函数。在这里就是toggleShow，该函数每次调用都会将isShow的值取反。
这样一来，当我们在 Web 浏览器中打开该应用程序就会看到之前的 Vue 图标旁边多了个文本内容为隐藏的按钮。当按钮被单击之后，图标就会消失，按钮上的文本也变成显示。之后，如果该按钮再次被单击，一切又会恢复原状。
用户输入
对于用户来说，除了触发事件之外，允许用户在运行时输入具体的数据也是一个应用程序必不可少的一项功能。下面将通过编写一个”待办事项”的程序来学习如何使用 Vue.js 框架实现能处理用户输入数据的应用程序界面。为此，我需要在code目录下创建一个名为02_toDoList的目录，并在该目录中创建一个名为index.htm的文件，其代码如下：
- nbsp;html>
<span class="pun">待办事项</span>
待办事项
登录后复制
0″>
已完成事项
接下来，我会在同一目录下再创建一个名为js的目录，并在该目录下创建main.js脚本文件，其代码如下：
- // 程序名称： toDoList// 实现目标：// 1. 学习 v-model、v-for 等指令// 2. 掌握如何处理用户输入const app = new Vue({ el: '#app', data:{ newTask: '', taskList: [], doneList: [] }, methods:{ addNew: function() { if(this.newTask !== '') { this.taskList.push(this.newTask); this.newTask = ''; } }, remove: function(index) { if(index >= 0) { this.taskList.splice(index,1); } } }});
登录后复制
下面来具体分析一下这个程序。在通常情况下，Web 应用程序在前端接受用户输入信息的方式主要有两种：第一种方式是用文本框元素来获取用户从键盘输入的信息。在 Vue.js 框架中，我们可以用v-model指令将标签绑定到newTask数据中，该指令与v-bind指令不同的在于，它是一种双向绑定。也就是说，v-model指令不止可以让 JavaScript 代码中对绑定数据的修改反映到页面元素中，也可以让页面元素获取到的用户输入数据同步到 JavaScript 代码中。在 JavaScript 代码获取到文本框中的用户输入内容之后，我们就可以通过事件处理函数addNew将其加入到一个名为taskList的数据列表中，然后将该事件处理函数注册给输入回车和鼠标单击事件。
第二种方式是用单选钮、复选框等选择性元素来获取用户用鼠标勾选的信息。例如在上面这个程序中，我在
元素中用v-for指令创建了一系列，它们都提供v-model指令将自己双向绑定到了另一个名为doneList数据列表上。在 Vue.js 框架中，如果一组复选框元素被v-model指令绑定到了一个列表类型的数据上，那么当这些复选框被选上时，它们的value属性值就会被自动添加到这个被绑定的数据列表中。
为了证明被选中的复选框被加入到了doneList数据列表中，我还在页面中添加了一个
元素，并对doneList数据列表进行了遍历显示。需要说明的是，用于遍历数据列表的v-for指令主要有两种形式：
当我们只要遍历列表中的值时，可以这样写：v-for=”item in dataList”，这时候数据列表（dataList）中的每一项数据就会在遍历过程中逐一被迭代变量（item）说读取。当我们需要同时获取列表值及其在列表中的索引时，可以这样写：v-for=”( item,index ) in dataList”，这时候数据列表（dataList）在遍历过程中，每一项数据的值会被item变量读取，而每一项数据的索引会被index变量读取。
最后需要说明的是，对于
元素本身，我使用了v-if指令，它的效果与之前的v-show指令基本相同，唯一的区别是：v-if指令会直接在 DOM 树上增加或删除其所在的元素节点，而v-show指令则是单纯通过其所在元素的style属性隐藏或显示该元素而已。在执行效率上，v-show指令要更高效一些。在这里，我们设置了当doneList列表中没有数据时，程序就直接将
元素从页面中移除，反之则在页面中添加该元素。下面来看一下02_toDoList程序运行的效果：
更多相关免费学习：javascript（视频）
以上就是Vue.js 学习之二：数据驱动开发的详细内容，更多请关注【创想鸟】其它相关文章！
