introduce
It is a library used to build web application interfaces
Technically, the focus is on the ViewModel layer of the MVVM mode, which connects the view and the data binding model in two ways. The actual DOM operation and output format are abstracted into instructions (Directives) and filters (Filters)
In the field of philosophy, try to make the MVVM data binding API as simple as possible. Modularity and composability 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 the front-end stack with other libraries.
Vue. The js API refers to AngularJS and KnockoutJS. Despite the similarities, I believe that providing a valuable one will allow you to take its value in some existing frameworks now
Even if you are already familiar with some of these terms, it is recommended that you pass the following overview of the concepts, as your concepts of these terms may differ below.
Concept Overview
ViewModel
An object, synchronizes the model and view. In this case, ViewModels is the constructor of the instantiated Vue or its subclass
var vm = new Vue({ /* options */ })
This is the main object that you will interact with as a developer in use. For more details, see Class: Vue.
View
The actual HTML/DOM seen by the user
vm.$el // The View
When using it, you will hardly touch the DOM operation except for your own custom instructions. When the data is updated, the update of the view will be automatically triggered. The update of the view can be accurately reached to each testNode node. They are also batched and executed asynchronously to provide better performance.
Model
This is a slightly modified Javascript object
vm.$data // The Model
In this model is just a simple Javascript object, a data object, you can manipulate their properties and view models, observe theirs so that they can get notifications after changes. In the data object Hu, we use ES5's getter/setter to convert the properties, which allows direct operation without dirty checking.
The data object will have mutations at appropriate times, so modifying it is the same as modifying vm.$data by reference. This also facilitates multiple ViewModel instances to observe the same piece of data.
For technical details, please refer to Instantiation Options: data.
Directives
Private HTML attributes are to tell them to do some processing about DOM.
<div v-text="message"></div>
The div element here has a v-text instruction, and the value is message. It means to tell to keep the content of this div node synchronized with the message attribute in viewMode
Instructions can encapsulate any DOM operation. For example, v-attr operates on an attribute element, v-repeat cloning an element based on an array, v-on additional event listening, we will discuss it later.
Mustache Bindings
You can also use mustache-style bindings, in text and properties. They are translated into the v-text v-attr directive. For example:
<div >Hello {{name}}!</div>
Although convenient, there are a few things you need to pay attention to:
If an image src attribute is set, an HTTP request will be sent, so when the template is parsing for the first time, it is better to use v-attr
When parsing HTML, Internet Explorer will delete the invalid internal style attribute, so if we want to support IE binding inline CSS, I always use v-style
Inside v-html, you can use three braces to handle non-escaped HTML, but this will lead to potential XSS attacks and can open windows. Therefore, it is recommended to do this only when there is absolutely safe data, or clean untrusted HTML through a custom pipeline filter
Filters
This raw data can be processed using functions 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 through the capitalize function. For details, please see Filters in Depth.
Components
In, a component is a simple view model constructor registered by (ID, constructor). With an associated ID, the v-component directive for the template of another view model can be nested. This simple mechanism makes the declared view model reused and combined in a way 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 >
<h1>{{title | uppercase}}</h1>
<ul>
<li
v-repeat="todos"
v-on="click: done = !done"
class="{{done ? 'done' : ''}}">
{{content}}
</li>
</ul>
</div>
var demo = new Vue({
el: '#demo',
data: {
title: 'todos',
todos: [
{
done: true,
content: 'Learn JavaScript'
},
{
done: false,
content: 'Learn '
}
]
}
})
Rough translation, please point out any errors