1. Introdução ao Vue
- O primeiro método: introdução online
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>- O segundo método: importação local
2. O princípio da interceptação Vue - exemplo
- el é usado para vincular id, data é usado para definir data
- As seguintes perguntas de amostra
<!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 é usado para vincular id, se não houver vinculação, o conteúdo dentro do símbolo { {}} será exibido normalmente
- Monte o objeto vue na instância
Execute da seguinte forma:
Modifique o valor diretamente por meio da instância vm vm.myname recém-definida no console da seguinte maneira
A seguir está a lógica subjacente implementada pelo código agora , envolvendo especificamente um método Object.defineProperty()
-
- Object.defineProperty() executa get e set para cada instância de Object, por exemplo, aqui é para modificar e obter o valor myname do parâmetro obj
-
<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>Desvantagens do método Object.defineProperty() :
- Não é possível monitorar as mudanças de Set e Map de es6;
- Incapaz de escutar dados do tipo Classe;
- Incapaz de monitorar a adição e exclusão de propriedades; ( propriedades não definidas nos dados do objeto vue não são monitoradas )
- A adição e exclusão de elementos de matriz não podem ser monitoradas.
