1. Vue introduction
- The first method: online introduction
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>- The second method: local import
2. The principle of Vue interception - example
- el is used to bind id, data is used to define data
- The following sample questions
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 本地导入 -->
<script src="../vue/vue.js"></script>
</head>
<body>
<div id="box">
{
{10+20}}
{
{ myname}}
</div>
<script>
new Vue({
el: "#box",
data:{
//定义myname
myname:"lyx"
}
})
</script>
</body>
</html>- el is used to bind id, if there is no binding, the content inside the { {}} symbol will be displayed as usual
- Mount the vue object to the instance
Run as follows:
Modify the value directly through the vm instance vm.myname just defined in the console as follows
Next is the underlying logic implemented by the code just now , specifically involving an Object.defineProperty() method
-
- Object.defineProperty() executes get and set for each Object instance, for example, here is to modify and get the myname value of the obj parameter
-
<body>
<div id="box">
</div>
<script>
var obj = {
}
var mybox = document.getElementById("box");
//通过defineProperty方法来为其参数obj做get和set
Object.defineProperty(obj,"myname",{
get(){
console.log("get");
return mybox.innerHTML;
},
set(value){
console.log("set",value);
mybox.innerHTML = value;
}
})
</script>
</body>Disadvantages of the Object.defineProperty() method :
- Unable to monitor the changes of Set and Map of es6;
- Unable to listen to data of Class type;
- Unable to monitor the addition & deletion of properties; ( properties not defined in the data of the vue object are not monitored )
- The addition and deletion of array elements cannot be monitored.
