The easiest Vue example
//html
<div >
{{message}}
</div>
//javascript
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
Since Vue borrows the idea of MVVM, the string "Hello Vue!" here is equivalent to a Model, the DOM is equivalent to a View, and the Vue instance "vm" is a ViewModel that connects Mode and View, so we can drive the view through data without caring about how it is implemented, because Vue has done everything for us.
The built-in properties and methods of Vue instances start with "$", such as: vm.$data, vm.$el, etc. In addition, the options are not equal to the instance. The options are parameter objects passed in when the new Vue() constructor, but the instance can access the values of certain options from the exposed interface, such as: (vm.$) output "Hello Vue!".
The life cycle of an instance
During the creation of an instance, Vue provides some life cycle hook functions that allow us to perform some additional operations at a certain stage:
beforeCreate：
After instance initialization, this function will be called before data binding, for example:
//javascript
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
beforeCreate: function() {
(); //undefind
}
})
There are two points to be explained: 1. The "this" here points to the Vue instance, that is, "vm", 2. The Vue instance also proxies all attributes under "data" in the option, that is, == vm.$ == "Hello Vue!", but because the data is not bound to the Vun instance at this stage, the output is "undefined". Before this, the data will be saved in vm.$options. If you want to obtain data at this stage, you can first use the vm.$() method to return the "data" object, and return the corresponding value through vm.$().message.
At this stage, you can do some work that does not require data, such as turning on the global loading effect.
created：
After the instance creation is completed, this function will be called after data binding. At this time () outputs the correct value "Hello Vue!".
At this stage, the data has been initialized as the default value in the options, but the real data must also be obtained from the backend database through ajax. Therefore, in this stage, you can send a request to the backend to obtain the data and then bind it to the corresponding attribute.
Then determine whether there is an "el" attribute in the option (as the mount target of the Vue instance, here is the div tag with id as the app). If not, you need to manually call the vm.$mount(el) method to specify the mount target;
Then determine whether there is a "template" attribute in the option. If not, use the mount target specified by the "el" attribute directly. If there is, replace the mount target with the string template specified by the "template" attribute, and all content in the mount target will be ignored;
beforeMount：
Called before the instance is mounted.
The global loading effect can be removed during this stage.
mounted：
Called after the instance is mounted.
During this stage, the page has been loaded and the DOM can be operated.
beforeUpdate：
Called when data is updated.
At this stage, the existing DOM can be accessed before the data is updated.
updated：
Called after data is updated.
During this stage, the updated DOM can be operated on.