Vue. js basics _ others

Vue. js focuses on the ViewModel layer of the MVVM model. It connects the View layer and Model layer through bidirectional data binding. Vue. compared with other libraries, js is a small and beautiful library. The main purpose of the author is to generate reflected data binding and composite view components through an API that is as simple as possible, I feel that the author's ideas are very clear. Introduction

Vue. js is a library used to build web application interfaces.

Technically, Vue. js focuses on the ViewModel layer of the MVVM mode. It connects the view and data binding model in two ways. The actual DOM operations and output formats are abstracted to Directives and Filters)

In the philosophical field, try to make the MVVM Data Binding API as simple as possible. Modularization and combination are also important design considerations. Vue is not a comprehensive framework. It is designed to be simple and flexible. You can use it to quickly prototype, or mix and match with other libraries to define the front-end stack.

Vue. Js APIs refer to AngularJS and KnockoutJS Ractive. js Rivets. js. Despite the similarities, I believe that Vue. js provides a valuable solution that allows you to remove value from some existing frameworks.

Even if you are already familiar with some of these terms, we recommend that you use the following concepts as their concepts may vary in Vue. js.

Concept Overview

ViewModel

An object, synchronous model and view. In Vue. js, ViewModels is the instantiated Vue constructor or its subclass.

var vm = new Vue({ /* options */ })

This is the main object. You will interact with Vue. js as a developer. For more details, see Class: Vue.

View

Actual HTML/DOM

vm.$el // The View

When Vue. in js, you will hardly touch DOM operations except custom commands. After the data is updated, the view update will be automatically triggered, view updates can be accurate to every testNode node. They also batch processing and asynchronous execution to provide better performance.

Model

This is a slightly modified Javascript Object.

vm.$data // The Model

In Vue. js, the model is just a simple Javascript Object, a data object. You can manipulate their attributes and view model, observe them, and then get the notification and change it. Vue. js uses getter/setter of ES5 to convert attributes in the data object. It allows direct operations without dirty checking.

The data object will generate a mutation when appropriate, so modifying it is the same effect as modifying vm. $ data through reference. This also facilitates multiple ViewModel instances to observe the same piece of data.

For technical details, see Instantiation Options: data.

Directives

The private HTML attribute tells Vue. js to do some DOM processing.

Here, the p element has a v-text command. The value is message, which indicates that Vue. js will keep the content of this p node synchronized with the message attribute in viewMode.

Command can encapsulate arbitrary DOM operations. For example, if v-attr is used to operate on an attribute element, v-repeat is used to clone an array-based element, and v-on is used to listen to additional events, we will discuss it later.

Mustache Bindings

You can also use mustache-style to bind files and attributes. They are translated into the v-text v-attr command. For example:

Hello {{name}}!

Although convenient, there are several things you need to pay attention:

If you set the src attribute of an image, an HTTP request will be sent. Therefore, when the template is parsed for the first time and 404 appears, it is better to use v-attr.

When HTML is parsed, Internet Explorer will delete invalid internal style attributes, so I always use v-style if I want to bind inline CSS to IE.

Inside v-html, you can use three braces {like this} to process non-escaped HTML. However, this can cause potential XSS attacks and enable windows, therefore, it is recommended that you do this only when the data is absolutely secure and complete, or clear untrusted HTML through a custom pipeline filter.

Filters

You can use a function to process the original data before updating the view. They are using an "Pipeline" command or binding:

{{message | capitalize}}

Now, before p's text content is updated, the value of this message will be processed by the capitalize function. For details, see Filters in Depth.

Components

In Vue. js, a component is a simple view model constructor registered through Vue. component (ID, constructor. With an associated ID, you can nest the v-component command of another view model template. This simple mechanism makes the reuse and combination of declared view models similar to Web components, without the need for the latest browser or heavy-duty polyfills. By breaking down applications into smaller components, the result is a highly decoupled and maintainable code base. For more details, see Composing ViewModels.

A Quick Example

  {{title | uppercase}}  
 
 
    
  
  
 {{content}} 
  
 
 

 var demo = new Vue({  el: '#demo',  data: {    title: 'todos',    todos: [      {        done: true,        content: 'Learn JavaScript'      },      {        done: false,        content: 'Learn vue.js'      }    ]  }})

Rough translation. Please point out any errors