introduce
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 view and data binding models 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 with other libraries to define the front-end stack.
Vue. The js API refers to AngularJS, KnockoutJS Ractive.js Rivets.js. Despite the similarities, I believe Vue.js provides a valuable way to get your 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 the concepts of these terms may differ below Vue.js
Concept Overview
ViewModel
An object, synchronizes models and views. In Vue.js, ViewModels is the instantiated Vue constructor or subclass
var vm = new Vue({ /* options */ })This is the main object that you will interact with as a developer using Vue.js. For more details, see Class: Vue.
View
The actual HTML/DOM seen by the user
vm.$el // The View
When using Vue.js, 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 Vue.js, the model is just a simple Javascript object, a data object, you can manipulate their properties and view models, observe theirs, and then get notifications to change. Vue.js uses ES5's getter/setter to convert properties in data object Hu, 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
The private HTML attribute tells Vue.js 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 telling Vue.js 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 id="person-{{id}}">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 cause potential XSS attacks and can open windows. Therefore, it is recommended to do this only when the data is absolutely safe, 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 Vue.js, a component is a simple view model constructor registered with Vue.component(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 id="demo"> <h1>{{title | uppercase}}</h1> <ul> <li v-repeat="todos" v-on="click: 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 vue.js' } ] }})Rough translation, please point out any errors