Project 1 – Markdown Notebook (part 2)

Tram Ho

Multiple notes

Continuing the previous section ( ), in this section, in addition to allowing multiple notes to be saved, I will add a few other features such as display the list of notes, rename the note, add the note to the favorites list, etc.

The note list

  1. Add where to display the notes:

  1. Initialize the notes array:

A method to create a new note

Each note will have properties such as: id , title , content , created , favorite . Add the addNote method:

Button and click events with v-on

Add button Add note :

Set click event for button addNote :

We can replace v-on:click with a shorter gon syntax @click :

Click the Add note button, we can see the notes have been added in devtool .

Binding attributes with v-bind

It will be more useful for users when they click the Add note button, a tooltip appears to announce the number of notes added. For example:

We can use v-bind :

When the user drags the mouse on the Add note button, it will get the following result: Like v-on , we can use more concise syntax. Difference is v-on , use @ longer v-bind user : :


v-bind will update the property’s value automatically. We can use v-bind in combination with computed as follows:

Displaying a list with v-for

  1. Add a list to display notes:

Use the v-for loop to display notes. For example:

We can instead of ice in well:

Imagine that we have a list of notes:

After printing, the notes will appear in the DOM like this:

  1. Back to our notebook. We saved them in the notes of data() , so what we need to do now is create a loop to print them out:


Selecting a note

  1. Add selectedId to data() to save the value of the selected notes:

  1. Add method when selecting note selectNote() :

  1. Add click event:

Now we can check the selectedId value on the devtool has been updated every time we click on a note.

The current note

  1. Add selectedNote to retrieve the selectedNote object note:

  1. Change the content display:

  1. And notePreview : selectedNote :

Dynamic CSS classes

Vue.js allows us to customize classes easily. For example, instead of passing a class to a string , we can pass an array :

Results in the DOM:

Or show hidden class :

Results in the DOM:

Applied to our notebook, the class of the selected note will be written like this:

The full code of the note list will be:

Note will change color when selected as shown below:

Codintional templates with v-if

A little more messages are displayed to the user if there is a problem with the preview note display:

We can use more v-else-if and v-else :

Back in our notebook, we will add the v-if="selectedNote" in both the main and preview panes so that they haven’t been added to the DOM until the note is selected:

Our current notebook will look like this:

Saving the notes with the deep option

We will save notes between sessions, the same way we do with note content:

  1. Create the saveNotes() method (we use JSON.stringify because the localStorage API localStorage not allow us to save the array but only for the string):

As we did with note content, we will use watch : 2. Add watch : watch options: {notes: ‘saveNotes’,} Check the console after adding note:

  1. Change the initial value of notes so that when users enter the browser, they will see the most recent notes:

The notes array should be restored when the user refreshes the page. However, when we change the content of a note, we will see that the current watcher is not active => notes have not been saved. The reason is: the default watchers save simple changes like: object assignment, adding, removing or removing item in an array. For example:

Operations like the one below will not be executed by watchers :

In this case we need to add deep: true into the watch .

Saving the selection

It is better for our notebook if it saves the selected notes from the last time the browser was closed:

The note toolbar with extras inside

We will add a few features to the notebook:

  • Renaming the note
  • Deleting the note
  • Marking the note as favorite

Add a bit more HTML:

Renaming the note

Deleting the note

  1. Add delete button:

  1. Add the removeNote() method:

Favorite notes

  1. Add some HTML to make the favorite notes feature:

If the note is preferred, the star is highlighted, and vice versa:

  1. Create a method with the simple purpose of reversing the favorite (true or false) value of the selected note:

  1. Change the position of normal notes with favorite notes (favorite notes will give priority to first):

  • 0: 2 notes the same.
  • -1: this note will be pushed first.
  • 1: This note will be pushed back.

Once we have a list of sorted notes, we will show it:

We can add a small icon when note is favorite:

  1. The code of the list note will be updated like this:

Here is the shape of our current notebook:

Source code


Chau, G. (2017). Vue.js 2 web development projects. Birmingham, UK: Packt Publishing.

Share the news now

Source : Viblo