Use Vue to complete a simple todolist method, and vue to complete todolist

Use Vue to complete a simple todolist method, and vue to complete todolist

After reading the Vue for two days, it is more practical to write a simple todolist (there are eggs at the end of the article ).

1. Use vue-cli scaffolding to quickly build a framework

Use vue-cli to automatically generate the front-end directories and files of our project. The method is as follows:

npm install -g vue-clivue init webpack my-projectcd my-projectnpm installnpm run dev

In this way, we can quickly build a webpack-based vue project directory.

The directory is as follows:

2. Complete a simple todolist

Next, let's take a look at webpack. base. conf file, which is the core file and must be executed. here we can see entry and output, which are the entry and output paths. /src/main. js, which finds the entrance to the interface. In main. js, we can see that a vue instance is created and the template component App. vue is loaded. Therefore, the todo list code can be written in App. vue.

With a simple todolist, we can complete these functions:

1. display the todo list

2. Determine the list task completion status. If the list task is completed, add the corresponding style.

3. Add the todo project dynamically in the input box, and click "enter" to display it in the list.

4. Click the desired project to change the status

First, we can display the list:

<template> <div id="app">  <input/>  <ul>   <li v-for="item in items">    {{item.label}}   </li>  </ul> </div></template><script> export default {  data () {   return {    items: [     {      label: 'read books',      isFinished: false     },     {      label: 'eat dinner',      isFinished: true     }    ]   }  } }</script>

Effect

The object following the export will be used as the parameter of new Vue () to create a Vue component and export it.

Determine the completion status of the task, and add the text-decoration Style

We can see in the official documentation:

Bind class style

If the class in v-bind is an object, the key represents the name of the added class, and the value represents a Boolean value, which is used to control whether or not this class attribute is available.
So we can:

<template> <div id="app">  <input/>  <ul>   <li v-for="item in items" v-bind:class={finished:item.isFinished}>    {{item.label}}   </li>  </ul> </div></template><script> export default {  data () {   return {    items: [     {      label: 'read books',      isFinished: false     },     {      label: 'eat dinner',      isFinished: true     }    ]   }  } }</script><style> .finished {  text-decoration: line-through; }</style>

Effect

Enter the item in the input box, and click "enter" to add the list and clear the content of the input box.

Knowledge used:

Listen and press ENTER

Form Control Monitoring

<Template> <div id = "app"> <input v-on: keyup. enter = "addNewItem" v-model = "newItem"/> <ul> <li v-for = "item in items" v-bind: class = {finished: item. isFinished >{{ item. label }}</li> </ul> </div> </template> <script> export default {data () {return {items: [{label: 'read books ', isFinished: false}, {label: 'eat dinner', isFinished: true}], newItem: ''}}, methods: {addNewItem () {this. items. push ({label: this. newItem, isFinished: false}) this. newItem = ''// clear the input box }}</script> <style>. finished {text-decoration: line-through ;}</style>

Click the content to convert the status

Bind a click event to the li tag and modify the isFinished

// Add the Code <li v-for = "item in items" v-bind: class = {finished: item. isFinished} v-on: click = "finish (item)"> {item. label }}</li> methods: {finish (item) {item. isFinished =! Item. isFinished }}

The basic functions of such a simple todolist have been completed.

Animation Effect

Little Egg: Create GIF animations in linux

I found many ways to access the Internet, many of which are not suitable for linux platforms. I found this method is good:

Download SimpleScreenRecoder software:

Three commands:

sudo add-apt-repository ppa:maarten-baert/simplescreenrecordersudo apt-get updatesudo apt-get install simplescreenrecorder

After installation, you can select the recording area.

References:

Vue official API documentation: https://cn.vuejs.org/v2/api/

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.