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

2019-11-19 12:39:54

字体：大中小

来源：转载

供稿：网友

1. 引用vue.js

<!DOCTYPE html><html><head><script src="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>   <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"></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   },   template: '<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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：详解Axios 如何取消已发送的请求

下一篇：Iview Table组件中各种组件扩展的使用