1. Introduction of vue<script SRC="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" & gt; </script>

2. The HTML element with the vue associated

<script>
New Vue ({
El: "# div
"})
</script>



3. The differential expression {{}}
can only write inside value and expressionPay attention to grammar: before and after space not Spaces will identify the object
Note: the data to the value come
The console. The log (vm) $data) to the data object
The console. The log (vm) $el) desirable to el value
Note: the values of the data inside will also go into VM inside the console. The log (VM) a) the console. The log (VM) b)
Note: page updates are asynchronous

<script>
Const vm=new Vue ({
El: "# div",
Data: {
A: 10000,
B: "aaaa",
C: [' a ', 'b', 'c']
}

})
The console. The log (vm) $data)
The console. The log (vm) $el)
The console. The log (vm) a)
The console. The log (vm. B)
The console. The log (vm) c)
Vm. A=111;
Vm. A=555;
Vm. A=666;
The console. The log (vm) $el) innerHTML)//as a result, 1000 for data update is asynchronous
So have to finish the last line of execution will modify the data on the page so the vm. $el. InnerHTML acquired
The data on the same page
Vm. $nextTick (()=& gt; {//is an asynchronous method after the dom updates will execute the methods, such as
The console. The log (vm) $el) innerHTML)//as a result, 666
})
</script>

3. El can convert into the vm. $mout (' div ')

<script>
Const vm=new Vue ({
Data: {
A: 10000,
B: "aaaa",
C: [' a ', 'b', 'c']
}

})
Vm. $mout (' # div ')
</script>

CodePudding user response: