Vue Getting Started Guide JS

Vue Getting Started Guide chapter navigation

English: http://vuejs.org/guide/index.html

Introduced

Vue.js is a library for building Web application interfaces

Technically, Vue.js focuses on the ViewModel layer of the MVVM pattern, which connects views and data-binding models in two ways. The actual DOM operations and output formats are abstracted to the instruction (directives) and filter (Filters)

In the philosophical realm, try to make the MVVM data binding API as simple as possible. Modularity and composable 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 reference to ANGULARJS, Knockoutjs ractive.js rivets.js. In spite of the similarities, I believe Vue.js provides a value that allows you to take its value in some of the existing frameworks now

Even if you are already familiar with some of these terms, it is recommended that you pass the following conceptual overview, because the concepts of these terms may differ in the vue.js context

Conceptual Overview ViewModel

An object that synchronizes models and views. In Vue.js, ViewModels is the constructor of the materialized Vue or its subclasses

/**/ })

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 the user sees

The View

When using Vue.js, in addition to your own custom instructions, you will almost never touch the DOM operation, when the data update after the view of the update will be automatically triggered, the view of the update can be very accurate to each testnode node, they also batch processing and asynchronous execution to provide better performance.

Model

This is a slightly modified JavaScript object

The Model

In Vue.js, models are just simple JavaScript objects, data objects, you can manipulate their properties and view models, and observe them so that they can get notifications after changes. Vue.js in the data Object Hu always uses ES5 's getter/setter to convert attributes, which allow direct operation without the need for dirty checking.

The data object will mutate at the appropriate time, so modify it with reference to modify the VM. $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 on the DOM

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

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

Directives can encapsulate arbitrary DOM operations. For example, v-attr operations a property element, V-repeat clones an element based on an array, v-on additional event snooping, 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, there are a few things you need to be aware of:

If the SRC attribute of an image is set, an HTTP request is sent, so when the template is first parsed 404, it is better to use v-attr

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

Inside V-html, the non-escaping HTML you can handle with three curly braces {{{{{}}}}, but there is a potential XSS attack that can open windows, so it is advisable to do so with absolutely secure data, or to clean up untrusted HTML through custom pipeline filters

Filters

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

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

Now before the text content of the div is updated, the value of this message will be passedcapitalize函数处理。详细请看Filters in Depth.

Components

In Vue.js, a component is a simple view model constructor that is registered by Vue.component (ID, constructor). With an associated ID, you can nest additional view model templates for the V-component directive. This simple mechanism enables the reuse and composition of declarative view models to be similar to Web Components without the need for the latest browser or heavy polyfills. By breaking the application down 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" >    li            v-repeat= " Todos "            v-on=" click:done =!done "            class=" {{done? ' Done ': '} ' >            {content}}        </li>    </ul></div>   

New Vue ({    el: ' #demo ',    data: {        title: ' Todos ',        todos: [            {                true, Content: ' Learn JavaScript 'false, content: ' Learn Vue.js '}} })      

A rough translation, with errors please indicate

If you feel good reading this article, please click on the bottom right corner of the "Recommended"To support the blogger, thank you!

If the original article, reprint please indicate the source!!!

by aaron:http://www.cnblogs.com/aaronjs/p/3660102.html

Vue Getting Started Guide JS