这篇文章主要介绍了使用Vue做一个简单的todo应用的三种方式的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
1. 引用vue.js
`<!DOCTYPE html>`
`<html>`
`<head>`
`<script src=``"[http://vuejs.org/js/vue.js](http://vuejs.org/js/vue.js)"``></script>`
`<meta charset=``"utf-8"``>`
`<title>JS Bin</title>`
`</head>`
`<body>`
`<iv id=``"root"``>`
`<input type=``"text"` `v-model=``"inputValue"``>`
`<button @click=``"handlerAdd"``>提交</button>`
`<ul>`
`<li`
`v-``for``=``"(item,index) of lists"`
`:key=``"index"`
`@click=``"handlerDel(index)"`
`>`
`{{item}}`
`</li>`
`</ul>`
`</div>`
`<script>`
`new` `Vue({`
`el:` `'#root'``,`
`data: {`
`inputValue:` `''``,`
`lists: []`
`},`
`methods: {`
`handlerAdd:` `function``() {`
`this``.lists.push(``this``.inputValue);`
`this``.inputValue =` `''``;`
`},`
`handlerDel:` `function``(index) {`
`this``.lists.splice(index, 1);`
`}`
`}`
`});`
`</script>`
`</body>`
`</html>`
2. 全局组件注册
`<!DOCTYPE html>`
`<``html``>`
`<``head``>`
`<``script` `src``=``"[http://vuejs.org/js/vue.js](http://vuejs.org/js/vue.js)"``></``script``>`
`<``meta` `charset``=``"utf-8"``>`
`<``title``>JS Bin</``title``>`
`</``head``>`
`<``body``>`
`<``div` `id``=``"root"``>`
`<``input` `type``=``"text"` `v-model``=``"inputValue"``>`
`<``button` `@``click``=``"handlerAdd"``>提交</``button``>`
`<``ul``>`
`<``todo-item`
`v-for``=``"(item,index) of lists"`
`:content` `=` `"item"`
`:index` `=` `"index"`
`:key` `=` `"index"`
`@``delete``=``"handlerDel"`
`>`
`</``todo-item``>`
`</``ul``>`
`</``div``>`
`<``script``>`
`Vue.component('todoItem', {`
`props: {`
`content: String,`
`index: Number`
`},`
`tmplate: '<``li` `@``click``=``"handlerClick"``>{{content}}</``li``>',`
`methods: {`
`handlerClick: function(){`
`this.$emit('delete', this.index);`
`}`
`}`
`});`
`new Vue({`
`el: '#root',`
`data: {`
`inputValue: '' ,`
`lists: []`
`},`
`methods: {`
`handlerAdd: function() {`
`this.lists.push(this.inputValue);`
`this.inputValue = '';`
`},`
`handlerDel: function(index) {`
`this.lists.splice(index,1);`
`}`
`}`
`});`
`</``script``>`
`</``body``>`
`</``html``>`
|
3. vue-cli脚手架
`// Todo.Vue`
`<template>`
`<div>`
`<input type=``"text"` `v-model=``"inputValue"``>`
`<button @click=``"handlerAdd"``>提交</button>`
`<ul>`
`<todo-item`
`v-``for``=``"(item,index) of lists"`
`:key=``"index"`
`:content=``"item"`
`:index=``"index"`
`@``delete``=``"handlerDel"`
`></todo-item>`
`</ul>`
`</div>`
`</template>`
`<script>`
`import TodoItem from` `'./components/todoItem'`
`export` `default` `{`
`data () {`
`return` `{`
`inputValue:` `''``,`
`lists: []`
`}`
`},`
`methods: {`
`handlerAdd () {`
`this``.lists.push(``this``.inputValue)`
`this``.inputValue =` `''`
`},`
`handlerDel (index) {`
`this``.lists.splice(index, 1)`
`}`
`},`
`components: {`
`'todo-item'``: TodoItem`
`}`
`}`
`</script>`
`<style>`
`</style>`
`// TodoItem.vue`
`<template>`
`<li @click=``"handlerClick"` `class=``"item"``>{{content}}</li>`
`</template>`
`<script>`
`export` `default` `{`
`props: [``'content'``,` `'index'``],`
`methods: {`
`handlerClick () {`
`this``.$emit(``'delete'``,` `this``.index)`
`}`
`}`
`}`
`</script>`
`<style scoped>`
`ul,li {`
`list-style: none;`
`}`
`.item {`
`color: blueviolet;`
`}`
`</style>`
以上就是本文的全部内容，希望对大家的学习有所帮助
本次给大家推荐一个交流圈，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。
对web开发技术感兴趣的同学，欢迎加入：582735936，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。
最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。
