Vue.js Basic Knowledge Summary _ Other

Introduced

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

Technically, Vue.js focuses on the ViewModel layer of the MVVM mode, which connects the view and data-binding models in two ways. The actual DOM manipulation and output formats are abstracted to directives (directives) and filters (Filters)

In the realm of philosophy, try to make the MVVM data binding API as simple as possible. Modularity and scalability 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 API is referred to the ANGULARJS, Knockoutjs ractive.js rivets.js. In spite of the similarities, I believe that Vue.js offers a value that allows you to shed value in some of the current frameworks

Even if you are already familiar with some of these terms, it is recommended that you adopt an overview of the following concepts, since your concepts of these terms may be different in the context of Vue.js

Conceptual overview

ViewModel

An object that synchronizes models and views. In Vue.js, ViewModels is an instantiated Vue constructor or its subclass

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

This is the main object that you will interact with as a developer in using Vue.js. For more details, see Class:vue.

View

The actual html/dom that the user sees

VM. $el//The View

When using Vue.js, you will almost never touch Dom's operations except for your own custom instructions, and when updates to the data are automatically triggered, the view updates can be accurate to every Testnode node, and they are also batch and asynchronous execution to provide better performance.

Model

This is a slightly modified JavaScript object

VM. $data//The Model

In Vue.js, models are simply JavaScript objects, data objects, and you can manipulate their properties and view models to see their changes after they can get notifications. Vue.js in the data object Hu always uses the ES5 Getter/setter to transform the attribute, it allows the direct operation without needing the dirty check.

The data object will mutate at the appropriate time, so modify it to modify the VM by reference. $data is the same effect. This also facilitates multiple ViewModel instances to observe the same piece of data.

Please see instantiation options:data for technical details.

Directives

The private HTML attribute is to tell Vue.js to do some processing about the DOM

<div v-text= "Message" ></div>

The DIV element here has a v-text instruction, the value is message. To tell Vue.js to keep the contents of this div node synchronized with the message attribute in ViewMode

Directives can encapsulate arbitrary DOM operations. For example, V-ATTR operates an attribute element, v-repeat cloning an element based on an array, v-on additional event sniffing, which we'll discuss later.

Mustache Bindings

You can also use Mustache-style bindings, in text and properties. They translated into v-text v-attr instructions. For example:

<div id= "Person-{{id}}" >hello {{name}}!</div>

Although convenient, but there are a few things you need to be aware of:

If you set an image src attribute, you send an HTTP request, so when the template is the first resolution appears 404, at this time with v-attr better

When parsing HTML, Internet Explorer will delete the invalid internal style attribute, so we want to support inline CSS for IE bindings I always use V-style

Inside v-html, non-escaped HTML can be handled with three curly braces {{{like this}}}. However, there are potential XSS attacks that can open windows, so it is recommended that the data be absolutely secure, or that you clean untrusted HTML through a custom pipe filter

Filters

You can use a function to work with this raw data before you update the view. They are using a "pipe" directive or binding:

<div>{{message | capitalize}}</div>

The value of this message will now be processed by the capitalize function before the text content of the div is updated. Please see filters in Depth for details.

Components

In Vue.js, a component is a simple view model constructor, registered by Vue.component (ID, constructor). With an associated ID, you can nest the v-component directives of the template for another view model. This simple mechanism makes declaring the view model reusable and combined in a way similar to Web Components without the need for the latest browsers or heavy polyfills. By decomposing the application into smaller components, the result is a highly decoupled and maintainable code base. For more details, please refer to composing viewmodels.

A Quick Example

<div id= "Demo" >
  
 
var demo = new Vue ({
  el: ' #demo ',
  data: {
    title: ' Todos ',
    todos: [
      {
        done:true,
        Content: ' Learn JavaScript '
      },
      {
        done:false,
        content: ' Learn vue.js '
      }
    ]
  }
})

A rough translation, please point out the error