1: In the process of using the framework of vue, we often need to give some data to do some initialization process, which is commonly used when we created to handle it and mounted options.
First, look at the official explanation, the official explained that the chant created is called immediately after an instance is created. In this step, the following configuration examples have been completed: the observed data (data observer), the operational properties, and methods, watch / event event callbacks. However, mount the stage has not yet begun, $ el property is not currently visible.
These words mean to say that I think the focus pylon phase has not yet begun, what has not yet begun to mount, that is, the template has not been rendered into html, this is the time to find what page elements by id is to find less than. The following look at an example to prove it.
Here's an example of the result of the following screenshot, this error can not find proof of id for the name of Dom elements. That template has not been rendered as html
Therefore, the general creadted hook function is mainly used to initialize the data.
2: mounted hook function is generally used to initiate a request to do something to get data to the service processing after the rear end. The official explanation is as follows:
vm el newly created. $ el replaced, and mount the hook to call up after instance. If the root instance mounted within a document element, when mounted is called vm. $ El is also within the document.
This means that the hook function is linked to the template is rendered after completion will be called after the completion. Let's look at an example
Here are the results
Take to the value, indicating that this time vue template has been rendered complete. Thus, Dom operation is generally carried out in the mounted hook function
computed: {} calculated attribute, what it is to calculate the property, I understand that certain data operations may include logic processing operations on the data to calculate the properties of the monitor. Since it is based on the calculated attributes to be updated only when a change in the depending side changes can be updated, as a function of the result returned. You can then bind as binding as common property calculated properties in the template.
<body>
<div id="box" :class="{a:true,b:true}">
<div></div>
{{msg}}
<div>
网址 {{msg}}的网络协议是：{{msg2}}
</div>
</div>
<script type="text/javascript">
window.οnlοad=function(){
new Vue({
el:"#box",
data:{
msg:"https://www.baidu.com"
},
computed:{
msg2:function(){
var s=this.msg.split(":")[0];
return s;
}
}
})
}
</script>
</body>
