Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <div id="app">
      <p>{{ message }}</p>
​
      <button id="btn1"
              @click="changeMessage">更改 Vue 的 message 变量为一个随机数</button>
      <button id="btn2"
              @click="destroyVue">销毁当前 Vue 实例</button>
  </div>
  
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
​
</body>
</html>
 
new Vue({
            el: '#app',
            data: {
                message: '最初的数据～'
            },
            beforeCreate() {
                console.group('beforeCreate');
                console.log('%c%s', 'color:red', 'el     : ' + this.$el);
                console.log('%c%s', 'color:red', 'data   : ' + this.$data);
                console.log('%c%s', 'color:red', 'message: ' + this.message);
                console.groupEnd();
            },
            created() {
                console.group('created');
                console.log('%c%s', 'color:red', 'el     : ' + this.$el);
                console.log('%c%s', 'color:red', 'data   : ' + this.$data);
                console.log('%c%s', 'color:red', 'message: ' + this.message);
                console.groupEnd();
​
                this.$nextTick(function () {
                    console.group('nextTick 被调用');
                    console.log('%c%s', 'color:red', '注册于：<created> hook');
                    console.groupEnd();
                });
            },
            beforeMount() {
                console.group('beforeMount');
                console.log('%c%s', 'color:red', 'el     : ' + (this.$el));
                console.log(this.$el);
                console.log('%c%s', 'color:red', 'data   : ' + this.$data);
                console.log('%c%s', 'color:red', 'message: ' + this.message);
                console.groupEnd();
            },
            mounted() {
                console.group('mounted');
                console.log('%c%s', 'color:red', 'el     : ' + this.$el);
                console.log(this.$el);
                console.log('%c%s', 'color:red', 'data   : ' + this.$data);
                console.log('%c%s', 'color:red', 'message: ' + this.message);
                console.groupEnd();
            },
            beforeUpdate() {
                console.group('beforeUpdate');
                console.log('%c%s', 'color:red', 'el     : ' + this.$el);
                console.log(this.$el);
                console.log('%c%s', 'color:red', 'data   : ' + this.$data);
                console.log('%c%s', 'color:red', 'message: ' + this.message);
                console.groupEnd();
            },
            updated() {
                console.group('updated');
                console.log('%c%s', 'color:red', 'el     : ' + this.$el);
                console.log(this.$el);
                console.log('%c%s', 'color:red', 'data   : ' + this.$data);
                console.log('%c%s', 'color:red', 'message: ' + this.message);
                console.groupEnd();
            },
            beforeDestroy() {
                console.group('beforeDestroy');
                console.log('%c%s', 'color:red', 'el     : ' + this.$el);
                console.log(this.$el);
                console.log('%c%s', 'color:red', 'data   : ' + this.$data);
                console.log('%c%s', 'color:red', 'message: ' + this.message);
                console.groupEnd();
            },
            destroyed() {
                console.group('destroyed');
                console.log('%c%s', 'color:red', 'el     : ' + this.$el);
                console.log(this.$el);
                console.log('%c%s', 'color:red', 'data   : ' + this.$data);
                console.log('%c%s', 'color:red', 'message: ' + this.message);
                console.groupEnd();
            },
            methods: {
                changeMessage() {
                    console.log('%c%s', 'color:#FFF;background:#666;padding:4px;margin:0 6px 0 -10px', 'changeMessage 方法被调用');
                    this.message = Math.trunc(Math.random() * 10000);
​
                    this.$nextTick(function () {
                        console.group('nextTick 被调用');
                        console.log('%c%s', 'color:red', '注册于：<changeMessage> method');
                        console.groupEnd();
                    });
                },
                destroyVue() {
                    console.log('%c%s', 'color:#FFF;background:#666;padding:4px;margin:0 6px 0 -10px', 'destroyVue 方法被调用');
                    this.$destroy();
                }
            }
        })
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers