Skip to content

Latest commit

 

History

History
60 lines (39 loc) · 1.52 KB

lesson-07.md

File metadata and controls

60 lines (39 loc) · 1.52 KB
Raw
theme class highlighter lineNumbers info background
seriph
text-center
shiki
true
How to build a real website

Introduction to web development

Vue.js Basics

Preface

What is a javascript framework?

Starting from our TODO List project.

We remove all elements and re-create them when:

  • One new todo is added
  • One existing todo is removed
  • (What we didnt do) one existing todo is updated

When we want to modify only one of them, we have to re-render everything. Are there any technique support update only one** element? Virtual DOM.

What is Virtual DOM?

  • Use something other than a real DOM elements to represent data
  • When a new todo object is added/removed/modified, it changes the state
  • When the state is changed, the re-render process is triggered
  • Before re-render, a virtual DOM library computes the difference of virtual DOM and decide what to update
  • The re-render function only updates the neccessary part

What is Virtual DOM?

Vue.js

What is Vue.js? Here's the introduction

  • Origin Author: Even You
  • Initial Released: Feb. 2014

Personal experience:

  • A javascript framework with good Chinese documentation
  • Easy to learn