How to make Todo List web pages with Vue

Most people do not understand the knowledge points of this article "Vue how to make Todo List web pages", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "Vue how to make Todo List web pages" article.

Here is the HTML section

Add tasks: {{unCheckedLength}} tasks not completed all tasks not completed tasks have not been added any tasks {{item.title}} ×

Vue instance part

Var vm = new Vue ({el: ".main", data: {list:list, things: ", editItem:", beforeTitle: "", visibility: "all", inputId: "",}, watch: {list: {handler:function () {store.save ("todolist", this.list)}, deep:true} Computed: {unCheckedLength () {return this.list.filter (function (item) {return item.isChecked = = false}) .length}, filteredList () {return filter [this.visibility]? Filter [this.visibility] (this.list): list}}, methods: {addTodo (ev) {if (this.things! = = "") {var item = {title:this.things, isChecked:false,} this.list.push (item)} this.things = ";}, deleteTodo (item) {var index = this.list.indexOf (item); this.list.splice (index,1) }, editTodo (item) {this.beforeTitle = item.title; this.editItem = item}, edited (item) {this.editItem = ""}, cancel (item) {item.title = this.beforeTitle; this.editItem = "; this.beforeTitle ="}}, directives: {" focus ": {update (el,binding) {if (binding.value) {el.focus ()})

This is a basic Vue instance. El is the mount point connected to the DOM element, and data is the proxy data. If you want to use proxy data in DOM, use {{xxx}}, such as {{list}}, {{visibility}}. When the proxy data in data appears in the DOM tag, you do not need to use curly braces.

New Vue ({el: ".main", data: {list:list, things: "", editItem: ", beforeTitle:", visibility:" all ", inputId:",}})

Vue needs to be put in the methods section in big ways.

Methods: {addTodo (ev) {if (this.things! = "") {var item = {title:this.things, isChecked:false,} this.list.push (item)} this.things = "";}, deleteTodo (item) {var index = this.list.indexOf (item); this.list.splice (index,1);}, editTodo (item) {this.beforeTitle = item.title This.editItem = item}, edited (item) {this.editItem = ""}, cancel (item) {item.title = this.beforeTitle; this.editItem = "; this.beforeTitle ="}}

There are also calculation properties

Computed: {unCheckedLength () {return this.list.filter (function (item) {return item.isChecked = = false}) .length}, filteredList () {return filter [this.visibility]? Filter [this.visibility] (this.list): list}}

Observation attribute

Watch: {list: {handler:function () {store.save ("todolist", this.list)}, deep:true}}

Custom attribute

Directives: {"focus": {update (el,binding) {if (binding.value) {el.focus ()} above is the content of this article on "how to make Todo List web pages by Vue". I believe you all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.