Vue-cli2 Set up to-do items

create by db on 2019-3-10 16:28:10

Recently revised in 2019-4-1 17:06:13

Hello friends, if you think this article is good, please click a like or a star, your like and star are my motivation to move forward! Making the address

After consulting many online materials and combining with my own learning experience, I wrote this Vue learning note to record my learning experience. Now share to everybody, for reference.

As a front – end novice, this article aims to record their own learning experience, if there is insufficient, please also give advice, thank you.

preface

I hear and I fogorget.

I see and I remember.

I do and I understand.

The little white lesson series has come to an end, let’s start our practical course!

• Note: This project is built based on VueCLI2 framework

References:

• Vue ToDoList combat | CSDN – charging practice
• Simple implementation a todo list – | FatDong1
• TodoMVC Example | Vue website

The body of the

If I finish reading Vue Little White Lesson, I will have a certain understanding of the overall situation of Vue project and build the Vue environment. In this article, let’s practice Vue and implement the ToDoList project.

If you are not familiar with the VueCLI project, please refer to:

• Vue Little White Lesson (1) — CLI Setup Project (Vue2.x)
• Vue Little White Lesson (ii) — Project Structure Analysis (Vue2.x)

Here is our established project directory structure:

In this ToDoList, the knowledge points involved include the following:

Create a Vue instance

In main.js, we see the vue-CLI default

new Vue({
  el: '#ToDoList',
  router,
  components: { ToDoList },
  template: '<ToDoList/>'
}
Copy the code

Where EL is the Vue instantiation option, providing a DOM element (#ToDoList) that already exists on the page as the mount target for the Vue instance. It can be a CSS selector or an HTMLElement instance.

Router indicates the route of Vue. Vue-router is the official vue.js routing plug-in. It is deeply integrated with vue.js and is suitable for building single-page applications. Vue’s single-page application is based on routes and components, which are used to set access paths and map paths to components. The traditional page application, is to use some hyperlinks to achieve page switching and jump. In the vue-router single-page application, it is a switch between paths, that is, a switch between components. The essence of routing module is to establish the mapping relationship between URL and page.

As for why we can’t use the A tag, the reason is that Vue is a single page application, so there is only one main index.html page, so the tag you write doesn’t work, you have to use vue-router to manage it.

Component is one of the most powerful features of Vue.js. Components can extend HTML elements to encapsulate reusable code. At a higher level, a component is a custom element to which the vue.js compiler adds special functionality. In some cases, components can also be in the form of native HTML elements, extended with JS features.

Template identifies the Vue instance. The template replaces the mounted elements. The contents of mount elements are ignored unless the contents of the template have slot distributions.

Configure routes

The index.js file in/SRC /router is the route configuration file for the Vue project.

To use a route we first create the route and configure the route mapping in the router/index.js file. We can rename the vue-CLI default HelloWorld component to ToDoList as follows:

// Import the routing module and use it
import Vue from 'vue'
import Router from 'vue-router'
import ToDoList from '@/components/ToDoList'

Vue.use(Router)

// Create a route instance and configure the route mapping
export default new Router({
  routes: [{path: '/'.name: 'ToDoList'.component: ToDoList
    }
  ]
})
Copy the code

Write the page

Create the ToDoList component

Now that we have configured the route to the ToDoList, we must create its corresponding component.

We can rename the helloworld.vue file in/SRC /components to todolist.vue and remove the

<template>
  <div class="ToDoList">
    <h1>My ToDoList</h1>
  </div>
</template>
Copy the code

2. Bind data

Vue is an MVVM framework, so the most basic is data binding, how to achieve data binding?

First, get to know Data

Data is the data object of the Vue instance.

In todolist.vue, vue will recursively convert the properties of the data into getters/setters so that the properties of the data can respond to changes in the data.

<script>
export default {
  name: 'ToDoList',
  data () {
    return {
      title: 'ToDoList'
    }
  }
}
</script>
Copy the code

In the js code above, we use data in todolist.vue to return the title. We want the title to be displayed on the page, so how does this data display?

<template>
  <div class="ToDoList">
    <h1 v-text="title">My ToDoList</h1>
  </div>
</template>
Copy the code

In the header H1 of the component template, we bind the title with the v-text command, which automatically replaces the original HTML text and displays the title.

Change the value of title, and the display will refresh immediately. If the content of the title contains HTML elements, such as

title: '<span></span>this is a todo list'

So using v-text the display would be:

Using the V-HTML command automatically replaces the HTML element:

3. Create and render the list

Next, we use the V-for directive to render the list:

<template>
  <div class="ToDoList">
    <h1 v-html="title"></h1>
    <ul>
      <li
      v-for="item in items"
      :key="item.id">
        <! -- To-do list -->
        <span v-text="item.title"></span>
        <! -- Complete button -->
        <button>complete</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'ToDoList',
  data () {
    return {
      title: 'ToDoList'.// Title name
      // To-do list
      items: [
        {
          id: 1.title: 'eat'
        },
        {
          id: 2.title: 'sleep'
        },
        {
          id: 3.title: 'Play Beans'}}}</script>
Copy the code

Note:

The unique identifier can be an ITEM id, index, etc., because vUE components are highly reusable, adding a key can identify the uniqueness of components. To better differentiate the components, the key is used to update the virtual DOM efficiently. Please refer to

Why do we add key to v-for in VUE

In data, we return an items array with id and title for each element. We bind the items to the list using v-for. The rendered result is as follows:

4. Bind the delete event

Next we use v-ON to bind an event to the button so that when the delete button is clicked, the corresponding option is removed from the list.

<button v-on:click="toggleFinish(recycleItem)">complete</button>
Copy the code

Here we add the click method named toggleFinish, taking the string item.

• The use of the methods

Following the toggleFinish method defined above, Vue uses methods to add various events:

methods: {
// Click the Finish button to delete the corresponding items
  toggleFinish (recycleItem) {
    // Use map to iterate
    this.items.map((item, index) = > {
      if (item.id === recycleItem.id) {
        // Delete the corresponding item
        this.items.splice(index, 1)}})}}Copy the code

5. Use the Input box to add new items

So far we have used a ready-made list, and now we use the input box to dynamically add items to the list:

<div>
  <input type="text" v-model="newItem">
  <button @click="addNewItem">add</button>
</div>
Copy the code

Use the v-Model directive to create a bidirectional binding on a form control or component, that is, to bind newItem. Use @ to bind the event listener. Click the Add day button to respond to the event addNewItem.

AddNewItem is also written in methods as follows:

// Click the Add button to add a new to-do
addNewItem () {
  // Use push to add new elements to the array
  this.items.push({
    id: this.id, // The id is unique and incremented
    title: this.newItem / / todo title
  })
  / / id since
  this.id++;
  // Clear the input field
  this.newItem = ' '}}Copy the code

In data, we declare a variable id that defaults to 0, items is empty by default, and newItem is also empty. After entering the input field, click the Add button items to push a piece of content, including the ID and title, then the ID incremented, and finally clear the input field.

6, summary

Through the above key knowledge points, we finally realized the basic functions of ToDoList, and the effects are as follows:

You can add more styles if you like.

You can add more functions in the following learning process to consolidate their knowledge.

The road ahead is long; I see no ending.

Postscript: Hello friends, if you think this article is good, remember to click a “like” or “star”, your “like” and “star” are the motivation for me to write more and richer articles!Making the address

dbThe document library 由 dbusingCreative Commons Attribution – Non-commercial – Share in the same way 4.0 International licenseLicense.

Based on thegithub.com/danygitgitOn the creation of works.

Permissions outside of this license agreement may be obtained fromCreativecommons.org/licenses/by…Obtained.