Detaillierte Erläuterung der bidirektionalen Bindungsimplementierung von Vue.j-Mini-Programmentwicklung-php.cn

Detaillierte Erläuterung der bidirektionalen Bindungsimplementierung von Vue.j

ringa_lee

Freigeben： 2018-05-04 15:41:32

Original

2458 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen für die bidirektionale Bindungsimplementierung von Vue.j ausführlich erläutern sehen.

<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  <p id="app">
    <input type="text" v-model="CurrentTime" placeholder="当前时刻">
    <h1>当前时刻{{ CurrentTime }}</h1>
  </p>
  <script>
  var app = new Vue({
    el:'#app',
    data:{
      CurrentTime: new Date()
    },
    mounted:function(){
      var _this = this;
      this.timer = setInterval(function(){
        _this.CurrentTime = new Date();
      },1000);
    },
    beforeDestroy:function(){
      if(this.timer){
        clearInterval(this.timer);
      }
    }
  });
  </script>
</body>
</html>

Nach dem Login kopieren

{{ }} ist die sogenannte Textinterpolationsmethode. Der Zweck besteht darin, bidirektional gebundene Daten anzuzeigen.

montiert bedeutet, dass el gemountet ist auf der Instanz Das -Ereignis

beforeDestory wird aufgerufen, bevor die Instanz zerstört wird. Im obigen Beispiel wird jedes Mal ein

Timer

im gemounteten Ereignis erstellt Die Zeit wird in einer Sekunde in das Textfeld geschrieben. Aufgrund der bidirektionalen Bindung ändert sich auch der Text des H1-Tags und stimmt mit dem Text des Textfelds überein. Im beforeDestory-Ereignis wird der Timer gelöscht, bevor die Vue-Instanz zerstört wird. Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln die chinesische PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Entwicklung des MPvue-Frameworks mit Vue.js

Zusammenfassung des Allgemeinwissens Punkte in Vue-Praxisprojekten

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der bidirektionalen Bindungsimplementierung von Vue.j. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!