Heim >Web-Frontend >js-Tutorial >Codeverwendung von vue.js+todolist
Dieses Mal werde ich Ihnen die Verwendung von vue.js+todolist-Code vorstellen. Was sind die Vorsichtsmaßnahmen bei der Verwendung von vue.js+todolist-Code?
Fallwissenspunkte:
1.Grundkenntnisse von vue.js
2.HTML5 lokaler Speicher localstorage
store.js-Code
const STORAGE_KEY = 'todos-vue.js' export default{ fetch(){ return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]') }, save(items){ window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items)); } }
App.vue-Code
<template> <p id="app"> <h1 v-text="title"></h1> <input v-model="newItem" v-on:keyup.enter="addNew"/> <ul> <li v-for="item in items" v-bind:class="{finished:item.isFinished}" v-on:click='toogleFinish(item)'> {{item.label}} </li> </ul> </p> </template> <script> import Store from './store' export default { name: 'app', data () { return { title: 'this is a todo list', items:Store.fetch(), newItem:'' } }, watch:{ items:{ handler(items){ //经过变化的数组会作为第一个参数传入 Store.save(items) console.log(Store.fetch()); }, deep:true //深度复制 } }, methods:{ toogleFinish(item){ item.isFinished = !item.isFinished }, addNew(){ this.items.push({ label:this.newItem, isFinished:false, }) this.newItem = '' } } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } .finished{ text-decoration: underline; } </style>
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen Bitte achten Sie auf andere verwandte Artikel auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Ausführliche Einführung in die Parameterübergabe der Eltern-Kind-Komponente von vue.js
Ausführliche Einführung in vue. js geteilte Komponenten
So implementieren Sie Ajax mit nativer asynchroner JS-Anfrage
Das obige ist der detaillierte Inhalt vonCodeverwendung von vue.js+todolist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!