使用Vue做一个简单的todo应用的三种方式的示例代码-CSDN博客

这篇文章主要介绍了使用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);`
`}`
欢迎加入全栈开发交流划水交流圈：582735936
面向划水1-3年前端人员
帮助突破划水瓶颈，提升思维能力
`}`
`});`
`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`
`}`
`}`
欢迎加入全栈开发交流划水交流圈：582735936
面向划水1-3年前端人员
帮助突破划水瓶颈，提升思维能力
`</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>`
复制代码