**
New learning and new journey, let us embark on the new long march of learning vue.js together
Encounter vue.js -------- Awen's vue.js study notes (1)-----First time vue.js
Meet vue.js -------- Awen's vue.js study notes (2-1)-Basic use [1]
Meet vue.js -------- Awen's vue.js study notes (2-2) ----- Basic usage [2]
… … …
Meet vue.js -------- Awen's vue.js study notes (directory)
Pay attention to me, we learn and progress together.
**
1. Constructor
Every Vue application we write starts by creating a new Vue instance using Vue functions.
which is
new Vue({
})
This is equivalent to constructing a Vue instance with the constructor, and the instance is the VM in our MVVM, so we often use
vmthe variable name (the abbreviation of ViewModel) to represent the Vue instance
writing
（1） 或者 (2)
var vm = new Vue({
const vm = new Vue({
// 选项 //选项
}) )}
You can simply understand that the vm here is the instance we created, and our new Vue is the constructor for us to create the instance.
2. Properties and methods
Every Vue instance we create will proxy all the attributes in its data object.
For example:
execution result: you can see that it is true because our instance vm has all the attributes in the proxy data, so the two are equal.
Let's add a knowledge point below:
Object.freeze()function, the function of this function is to freeze the object, after freezing, subsequent operations will no longer be able to modify the object
For example: first look at the
execution result of the name printed by this code :
then we change it, and add one at the bottomvm.name="我的数据已被更改"
The results: You can see that our name was changed
and then we add in the middle of our Object.freeze()method
Execution result: You can find that our data is back to the original state, that is Object.freeze(), our following modifications are invalid after we added the method
Of course, in addition to data attributes, Vue instances also expose some useful instance attributes and methods. They all have a prefix $to distinguish them from our own defined attributes.
We will use the example in the above example of vm $eland $dataare to property in our example.
Finally, we add another example method $swatch
It can be simply understood as monitoring an element. When the monitored element changes, execute the function written inside
Let's take an example: we write an input box and when the data in our input box changes, the content
execution result will pop up : you can see that when the value in our input box changes, it will execute the value in our $watch The function pops up "My value has changed"
3. Life cycle
Each of our Vue instances goes through a series of initialization processes when they are created-for example, you need to set up data monitoring, compile templates, mount the instance to the DOM and update the DOM when the data changes.
Explanation: To mount an instance to the DOM means to display our instance on our webpage
Life cycle diagram:
To put it simply, the life cycle of our instance is roughly divided into the following stages:
beforeCreatebefore
createdcreation, after creation,
beforeMountedbefore
mountedmounting view, after mounting view,
beforeUpdatebefore
updatedupdate, after update ,
beforeDestroyedbefore
destroyeddeath, after death
We can see from the above, our cycle can be divided into several stages, and will run some of these stages is called in 生命周期钩子the function, which gives us the opportunity to add your own code at different stages.
Roughly it is the above stage. A
simple example:
Execution result: You can find that because our execution means that our instance has been created and mounted on our dom page, so the hook function of the two It is called directly. Because our data has not been changed, the update hook function is not called.
But after we change the data in the input box, our update hook function is called
**
Follow the campus official account, reply to the web front-end to receive a free 50G front-end learning materials, let's learn and make progress together.
