您好,登錄后才能下訂單哦!
今天小編給大家分享一下Vue怎么實(shí)現(xiàn)簡(jiǎn)單的todo應(yīng)用的相關(guān)知識(shí)點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識(shí),所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來(lái)了解一下吧。
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. 全局組件注冊(cè)
<!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>
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架,Vue與其它大型框架的區(qū)別是,使用Vue可以自底向上逐層應(yīng)用,其核心庫(kù)只關(guān)注視圖層,方便與第三方庫(kù)和項(xiàng)目整合,且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開發(fā)復(fù)雜的單頁(yè)應(yīng)用。
以上就是“Vue怎么實(shí)現(xiàn)簡(jiǎn)單的todo應(yīng)用”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會(huì)為大家更新不同的知識(shí),如果還想學(xué)習(xí)更多的知識(shí),請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。