Home >Web Front-end >JS Tutorial >Practical analysis of Vue.js two-way binding project

Practical analysis of Vue.js two-way binding project

php中世界最好的语言
php中世界最好的语言Original
2018-06-01 11:29:501291browse

This time I will bring you a practical analysis of the Vue.js two-way binding project. What are the precautions for the Vue.js two-way binding project? The following is a practical case, let's take a look.

This article is about experiencing the two-way binding of VUE

<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>

{{ }} is the so-called text interpolation method, the purpose is to display the two-way binding Data

mounted represents the

event called when el is mounted to the instance.

beforeDestory is the

called before the instance is destroyed. In the above example, in the mounted event A

timer is created in and the current time is written into the text box every second. Due to the two-way binding, the text of the H1 tag will also change and be consistent with the text of the text box. . In the beforeDestory event, the timer will be cleared before the Vue instance is destroyed

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to use vue to crop the preview component

How to use Vue to implement hovering in the upper right corner of the page /hide menu

The above is the detailed content of Practical analysis of Vue.js two-way binding project. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn