Vue. js Quick Start

Vuejs is currently a very popular JavaScriptMVVM library, which is built based on the idea of data-driven and componentized. Today I will share with you a tutorial on Vue. js60-minute quick start. Let's take a look at vuejs, a popular JavaScript MVVM library built on the idea of data-driven and componentized. Let's take a look at the 60-minute quick start tutorial on Vue. js.

Vuejs is currently a very popular Javascript MVVM library, which is built based on the idea of data-driven and componentized. Compared with Angular. js, Vue. js provides simpler and easier-to-understand APIs, allowing us to quickly get started with Vue. js.

If you are used to using jQuery to operate the DOM before, you should leave the idea of manually operating the DOM before learning Vue. js. Because Vue. js is data-driven, you do not need to manually operate the DOM. It binds the DOM and data through some special HTML syntax. Once you create a binding, the DOM will be synchronized with the data. when the data is changed, the DOM will be updated accordingly.

Of course, when using Vue. js, you can also use it with other libraries, such as jQuery.

The Demo and source code of this article have been put on GitHub. If you think this article is good, please like it or add a star on GitHub!

V-for Demo v-bind Demo Page Demo GitHub Source

MVVM Mode

It not only summarizes the MVVM Model (Model-View-ViewModel), but also describes how the ViewModel interacts with the View and Model in Vue. js.

ViewModel is the core of Vue. js and is a Vue instance.A Vue instance acts on an HTML element. This element can be an HTML body element or an element with an id specified.

After creating a ViewModel, how does one achieve bidirectional binding?

First, we regard DOM Listeners and Data Bindings as two tools, which are the key to implementing bidirectional binding.

From the View side, the DOM Listeners tool in ViewModel will help us monitor the changes of DOM elements on the page. If there are changes, we will change the data in the Model;

From the Model perspective, when we update the Data in the Model, the Data Bindings tool will help us update the DOM elements in the page.

Hello World example

Understanding a language or learning a new technology, writing Hello World examples is the only way to go.

This code output "Hello World!" on the screen! ".

   
       
   
{Message }}