Summary of basic knowledge of Vue.js_Others

Introduction

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

Technically, Vue.js focuses on the ViewModel layer of the MVVM pattern, which connects the view and the data binding model in two ways. Actual DOM manipulation and output formatting are abstracted into Directives and Filters

In the field of philosophy, try to make the MVVM data binding API as simple as possible. Modularity and composability were also important design considerations. Vue is not a comprehensive framework, it is designed to be simple and flexible. You can use it for rapid prototyping, or mix and match with other libraries to define your front-end stack.

Vue. js API refers to AngularJS, KnockoutJS Ractive.js Rivets.js. Despite the similarities, I believe Vue.js offers a value that allows you to trade off some of the existing frameworks

Even if you are already familiar with some of these terms, it is recommended that you go through the following overview of the concepts, as your concept of these terms may be different in the following Vue.js

Concept Overview

ViewModel

An object that synchronizes models and views. In Vue.js, ViewModels are the constructors of instantiated Vue or its subclasses

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

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

View

The actual HTML/DOM the user sees

vm.$el // The View

When using Vue.js, except for your own custom instructions, you will almost never touch the DOM operation. When the data is updated, the view update will be automatically triggered. The view update can be very accurate to each testNode node. They also batch and execute asynchronously thus providing better performance.

Model

This is a slightly modified Javascript object

vm.$data // The Model

In Vue.js, models are just simple Javascript objects and data objects. You can manipulate their properties and view models, observe their changes and get notifications. Vue.js uses ES5 getters/setters to convert attributes in the data object, which allows direct operations without dirty checking.

The data object will mutate when appropriate, so modifying it has the same effect as modifying vm.$data by reference. This also facilitates multiple ViewModel instances to observe the same piece of data.

For technical details, please see Instantiation Options: data.

Directives

Private HTML attributes tell Vue.js to do some processing on the DOM

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

The div element here has a v-text directive, and the value is message. It means to tell Vue.js to keep the content of this div node synchronized with the message attribute in viewMode

The

directive can encapsulate any DOM operation. For example, v-attr operates an attribute element, v-repeat clones an element based on an array, and v-on attaches event monitoring, which we will discuss later.

Mustache Bindings

You can also use mustache-style binding, both in text and attributes. They translate into v-text v-attr directives. For example:

<div id="person-{{id}}">Hello {{name}}!</div>

Although it is convenient, there are a few things you need to pay attention to:

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

Internet Explorer will remove invalid internal style attributes when parsing HTML, so if we want to support IE binding inline CSS I always use v-style

Inside v-html, you can use three curly brackets {{{like this}}} to process unescaped HTML, but this will have potential XSS attacks and can open windows, so it is recommended to be absolutely safe Only do this when the data is complete, or clean up untrusted HTML through a custom pipeline filter

Filters

You can use functions to process this raw data before updating the view. They are using a "pipeline" directive or binding:

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

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

Components

In Vue.js, a component is a simple view model constructor, registered through Vue.component(ID, constructor). The v-component directive of another view model's template can be nested via an associated ID. This simple mechanism enables declarative view models to be reused and composed in a manner similar to web components, without requiring the latest browsers or heavy-duty polyfills. By breaking the application into smaller components, the result is a highly decoupled and maintainable code base. For more details, see Composing ViewModels.

A Quick Example

<div id="demo">
  <h1 id="title-uppercase">{{title | uppercase}}</h1>
  <ul>
    <li
      v-repeat="todos"
      v-on="click: done = !done"
      class="{{done &#63; 'done' : ''}}">
      {{content}}
    </li>
  </ul>
</div>

 
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