vue.js --MVVM framework
What is MVVM?
MVVM can be divided into three parts: View (page DOM) --- ViewModel (monitor) --- Model (view layer)
The View on the left is equivalent to the DOM content, that is, the page view you see, the Model on the right is equivalent to the data object, and the monitor in the middle is responsible for monitoring the data on both sides, and correspondingly notifies the other side to make changes.
This is the MVVM framework. In addition to Vue.js, the JS frameworks belonging to MVVM also include React.js and Angular.js.
Advantages of Vue.js
1. Vue.js is lighter and faster
2. Easier to use and learn
vue core
Implement responsive data binding and composite view components with the simplest possible API
Vue's data-driven : The data change drives the automatic update of the view. The traditional method is to manually change the DOM to change the view. Vuejs only needs to change the data, and it will automatically change the view. This is the realization of the MVVM idea.
View componentization : The entire web page is divided into blocks, and each block can be regarded as a component. A web page is composed of multiple components spliced or nested.
Vue - two-way binding
Vue.js also provides convenient syntax instructions to realize two-way binding of views and data. That is to say, not only data changes can drive views, but users do some operations on the page, and it is also very convenient to update the model layer. data.
Example: Listen to the content entered by the user in the input box on the page, and then update it on the page in real time. (using the v-model directive)
<div id="app">
<input v-model="text">
<p>Number:{{ text }}</p>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
text:"",
}
});
</script>
In the above example, there is no need to write code to monitor the content change of the input control. The content input by the user will update the value of the data attribute text in the vm instance in real time. Once the text is updated, the view will also be updated.
Creating and using a vue instance only takes 4 steps:
new Vue() ---- set data ---- mount element ---- successfully rendered
Step 1: Create the Grammar
Vue Every Vue.js application is started by creating a root instance of Vue through the constructor :
<script>
let vm = new Vue({});
</script>
A Vue instance can be created through the key statement new Vue( ): vm . Here a parameter option is passed to Vue( ), which is an empty object.
Step 2 Set data
Use the object parameters of step 1 to create the Vue instance vm, for example, to set the data in the vm .
let vm = new Vue({
//Data of instance vm
data:{
name: "Li Si",
age : 18
}
});
At this point, the parameter object is no longer an empty object, it contains an attribute: data, and the value of data is also an object, which is the data we set for the instance vm .
Step 3 Mount the element
After creating an instance vm and setting the data of the vm , the next step is to display the data on the view through the "mount element".
View view part:
<div id="app"></div>
There is a div element with id "app" on the view (html part).
let vm = new Vue({
// mount element
el: '# app',
//Data of instance vm
data:{
name: "Li Si",
age : 18
}
});
There is not only the attribute "data" in the parameters, but also another attribute: "el". The el parameter provides a DOM element that already exists on the page as the mount target of the instance vm . Indicates that the instance vm is associated with the DOM node with the id "app".
Step 4 Render
The instance vm is created , the data is available, and the D OM nodes are also associated. The last step is to bind the data of the vm to the specified view, that is, data rendering.
<div id="app">
I am {{ name }},
This year is {{ age }}
</div>
Just use a double curly bracket: {{ }} , {{ name }} and {{ age }} are the data name and age we set for the instance vm , we can read them directly with {{ }} value of .