扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
简单的 TodoList
公司主营业务：网站制作、做网站、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出邹城免费做网站回馈大家。
实现一个简单的 todolist，当我输入内容后，点击提交自动添加在下面，如下图所示：
用代码实现这个效果：
- {{item}}
当我在input框中输入内容后，点击提交，Vue 会自动将内容渲染在页面中，具体是怎么实现的呢？
我们都知道 Vue 是一个 MVVM 框架，让开发者专注于数据变更，无需关注 Dom，所以它的核心是VM层，也就是说渲染这部分不需要开发者考虑了。
循环v-for
v-for指令是 Vue 提供的api，可以实现循环添加
v-for="item in list"
将list中数据循环添加到页面中，值为item
所以当我点击提交时，只需要获取到输入框中的值，然后push到list中，我们看到的效果就是一个个添加。
绑定v-model
如何获取输入框中的值变成了一个问题，没用 Vue 之前，获取输入框中的值，非常简单，用$(input).val()就能轻松获取。
用了 Vue 之后，不应该操作 Dom 来获取值，Vue 肯定也考虑到这点了，提供了一个api
v-model="inputVal"
第一次用这个指令时，踩了一个坑，我在inputVal两边加上了双括号，从而导致页面中没任何反应，这边是不需要加双括号的。渲染模版时才需要用 Vue 提供的模版字符串
一个简单的 TodoList 就已经实现了。
组件化
每个li其实都是一个组件，我们可以用组件的形式来开发
全局组件：
用 Vue 提供的component创建组件可创建一个全局组件，组件的名字TodoList在模版中需要用todo-list来实现，大小变小写，中间用-连接。
局部组件：
使用局部组件，声明一个对象，内容和全局组件一样，不过需要再 Vue 中注册一下，使用component属性注册
component:{
TodoList
}
用了组件后之后，就会涉及到数据通信，一般有两种：
父 -> 子组件通信
现在已经用组件实现上面的功能了，但是组件中还没有数据，如果将我输入框中的数据传递给子组件。
子组件中获取数据，还是用v-for循环，用v-bind绑定需要的数据，组件中用props获取绑定的数据
let TodoList = { props:['content'], template: `
父 -> 子组件通信实现了往组件里面添加数据，如果子组件中要删除一项，应该怎么操作呢？
子 -> 父组件通信
子 -> 父组件通信，Vue 提供了一个$emit()方法，组件中使用v-on指令可绑定事件
组件中绑定事件，第一个参数是事件名，第二个参数是要传递给父元素的参数
template: '
父元素监听事件
handleItemDelete(index) { //写在 Vue 实例中 this.list.splice(index, 1) }
通过父子组件之间的通信，就可以实现 父->子 子->父 之间数据传输问题。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网