之前在vue里面绑定数据，都只是单个地绑定。这期我们来看一下怎样渲染列表，然后通过事件监听方法往列表里面增加item。
列表渲染废话不多说，直接上代码：
- {{ item }}
直接看效果，可见v-for循环了一遍list，把其中的每一项都绑定到li中去：
唯一需要注意的是，给v-for的值是
HTML的部分，也可以用v-text来代替大胡子语法：
其实也可以直接循环数字，虽然好像实际中会这样用的机会不大：
事件监听
先做一个简单的例子：点击按钮之后alert。
Vue的事件监听，使用的是v-on指令，后面跟的就是需要监听的事件。
在页面监听用户交互事件是非常常用的，但是如果每次都要写v-on，就会很繁琐了，所以vue也为我们准备好了简写方法：
要记得v-bind的简写是:class，用的冒号，但是v-on用的是@，像@click这样。
最后我们把这两个新知识合并到一起，做一个可以让用户通过输入文字来新增列表项的列子吧。
- {{ item }}
这里需要特别讲的，也许就只有this了。this指的其实是我们创建的这个vue实例，也就是app。在vue-devtools里面可以看到（在console里面log一下app也可以找到，由于图片会太长，这里就不展示了）：
最后是完成后的效果：
这期就到这里，敬请期待下一期：计算属性。
写在最后源码地址：https://github.com/levblanc/v...
视频攻略：小的不才，为求一赞，自制 本期视频攻略 在此。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/81317.html
摘要：在大家的鞭策和鼓励下，这个基础的系列终于完成了。关于更新的频率，因为是我自己一个人在做，文案视频都准备好了才发的话，最快也只能一周一更。最后这几期可以密集地更新，完全是因为公司放假了。不过月份的更新速度真的不能保证，抱歉。 在大家的鞭策和鼓励下，这个基础API的系列终于完成了。所幸是没有真的更到一百期才完结（笑）。最初是因为觉得录视频好玩，才挖的这个坑。也想过中途放弃，关掉专栏，但由于...
摘要：看这篇之前，如果没有看过之前的文章，移步拉到文章末尾查看之前的文章。而该组件实例的父实例却并不固定，所以我们将这些在使用时才能确定的参数在组件实例化的时候传入。系列文章地址优化优化总结 看这篇之前，如果没有看过之前的文章，移步拉到文章末尾查看之前的文章。 前言 在上一步，我们实现 extend 方法，用于扩展 Vue 类，而我们知道子组件需要通过 extend 方法来实现，我们从测试例...
摘要：关于中的的实现，差不多也就这样了，当然这仅仅是基础的实现，而且视图层层渲染抽象成一个函数。不同于中的实现，这里少了很多各种标记和应用标记的过程。 看这篇之前，如果没有看过之前的文章，可拉到文章末尾查看之前的文章。 回顾 首先我们思考一下截止当前，我们都做了什么 通过 defineReactive 这个函数，实现了对于数据取值和设置的监听 通过 Dep 类，实现了依赖的管理 通过 Wa...
摘要：它可以往元素的属性中绑定数据，也可以动态地根据数据为元素绑定不同的样式。绑定属性最简单的例子，我们有一张图片，需要定义图片的。注意样式的写法跟会有些许不同，横杠分词变成驼峰式分词。这期就到这里，敬请期待下一期列表渲染和事件监听。 这期跟大家分享的，是v-bind指令。它可以往元素的属性中绑定数据，也可以动态地根据数据为元素绑定不同的样式。 绑定属性 最简单的例子，我们有一张图片，需要定...
摘要：实例和组件之间的通信先来看一下我们最后要完成的效果吧。在组件的内部监听到用户的事件后，执行自身的方法，把信号发布出去。所以可以直接把实例作为一个，在组件之间进行通信。比方说，我们希望点击按钮以后，另外一个组件可以接收到这个信号。 当组件监听到用户的行为，需要触发一些界面交互的时候，实例与组件之间、组件相互之间就需要进行通信了。Vue里面有两个api可以帮助我们轻松地完成这件事，它们是$...
阅读 2045·2023-04-26 02:23
阅读 1788·2021-09-03 10:30
阅读 1350·2019-08-30 15:43
阅读 1190·2019-08-29 16:29
阅读 529·2019-08-29 12:28
阅读 2331·2019-08-26 12:13
阅读 2169·2019-08-26 12:01
阅读 2399·2019-08-26 11:56
