Shulou(Shulou.com)06/03 Report--

Today, I will talk to you about how to use vue2's todolist. Many people may not know much about it. In order to make you understand better, the editor has summarized the following contents for you. I hope you can get something according to this article.

The project uses the vue.js vue.cli webpack ES6 node environment, and after completing the project, you will have some understanding of these technology stacks.

Prepare the development environment

$npm install-g vue-cli$ vue init, such as vue init webpack todolist$ cd todolist$ npm install$ npm run dev

Install Google plug-in vue.js devtools

Download the webpack template for vue.js

Download the template for todomvc (provide html and css) (you can also download it directly by $git clone https://github.com/tastejs/todomvc-app-template.git)

Drag the index.html of todomvc to the todolist folder to overwrite the index.html in it

Open the json file of todomvc and you will see "todomvc-app-css": "^ 2.0.0", which requires you to npm install todomvc-app-css-S to download the css

Delete the default css,js reference of todolsit index.html, and the main.js under the src folder introduces the template css (import'todomvc-app-css/index.css')

Introduction of vue (import Vue form 'vue')

After writing the code, $npm run build will be packaged and built with one click, and you will see the dist folder

The code for main.js

/ / the following is explained by the notes. ~ add localStoragevar STORAGE_KEY = 'todos-vuejs-2.0'var todoStorage = {fetch: function () {var todos = JSON.parse (localStorage.getItem (STORAGE_KEY) | |' []') todos.forEach (function (todo, index) {todo.id = index}) todoStorage.uid = todos.length return todos} Save: function (todos) {localStorage.setItem (STORAGE_KEY, JSON.stringify (todos))}} / / filter out three states var filters = {all (todos) {return todos}, active (todos) {return todos.filter ((todo) = > {return! todo.completed})}, completed (todos) {return todos.filter (todo) = > {return todo.completed})},} let app = new Vue ({el: '.todoapp') / / ~ data: {msg: 'hello world', title:' to-do list', / / render title ~ {{title}} newTodo:', todos: todoStorage.fetch (), / / ~ vshow = "todos.length" ~ {todos.length > 1 empty editing object editedTodo:', / / empty editing object hashName: 'all'}, watch: {todos: {handler: function (todos) {todoStorage.save (todos)}, deep: true}} Computed: {remain () {return filters.active (this.todos). Length / / the number of unfinished items ~ {{remain}}, isAll: {/ ~ v set model = "isAll" get () {return this.remain = 0}, set (value) {this.todos.forEach ((todo) = > {todo.completed = value})}} FilteredTodos () {/ / use hashName to filter out the todos ~ v for the current page: "(todo,index) in filteredTodos" return filters [this.hashName] (this.todos)}}, methods: {addTodo (e) {/ / when the input value is empty Do not add (spaces before and after trim removal) ~ vmurmodel.trim = "newTodo" if (! this.newTodo) {return} this.todos.push ({id: todoStorage.uid++, content: this.newTodo, completed: false / / combined with v-model binding style according to completed status ~: class= "{completed:todo.completed ~ v todo.completed model = "todo.completed"}) this.newTodo =''}, removeTodo (index) {/ / bind x style Click to delete the todo ~ @ click= "removeTodo (index)" this.todos.splice (index, 1)}, editTodo (todo) {/ / Edit ~ @ dblclick= "editTodo (todo)" this.editCache = todo.content / / Save the content before editing this.editedTodo = todo / / Click to edit the contents instead of just an empty text box ~ editing:todo==editedTodo} "}, doneEdit (todo) Index) {/ / after losing focus ~ @ blur= "doneEdit (todo)" @ keyup.enter= "doneEdit (todo)" this.editedTodo = null / / No editing or editing completed if (! todo.content) {/ / if there is no content after editing, delete the todo this.removeTodo (index)}}, cancelEdit (todo) {/ / press the ESC key to cancel the editing operation ~ @ keyup.esc= "cancelEdit (todo)" > this.editedTodo = null todo.content = this.editCache / / when esc cancels editing Restore the content before editing}, clear () {/ / Click to clear the completed function ~ @ click= "clear" this.todos = filters.active (this.todos) / / get and render the unfinished item ~}}, directives: {/ / Custom attribute ~ vfocus = "todo = = editedTodo" focus (el) Value) {/ / text box double-click to get focus if (value) {el.focus ()}) / / hash (# in url address and the characters after it) function hashChange () {/ ~: class= "{selected:hashName=='all'}" : class= "{selected:hashName=='active'}";: class= "{selected:hashName=='completed'}" let hashName= location.hash.replace (/ #\ /? /,'') / / regular expression minus # /? , such as all,active,completed if (filters [hashName]) {/ / if the filter state hashName exists app.hashName = hashName / / assign that value to the hashName in the entire app variable} else {location.hash ='/ cancel app.hashName = 'all' / / otherwise assign' all', to the page of all events}} window.addEventListener ('hashchange', hashChange) / / Global listener hash read the above Do you have any further understanding of how to use vue2's todolist? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.