使用Vue做一個簡單的todo應用的三種方式的示例程式碼
阿新 • • 發佈：2018-12-07
這篇文章主要介紹了使用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，快速升職加薪，走上人生巔峰。
