// 引入 monitor
var scriptNode = document.createElement('script');
scriptNode.src = 'https://bce.bdstatic.com/fe-monitor/latest/fe-monitor.min.js';
document.body.appendChild(scriptNode);
scriptNode.onload = () => {
    window.Monitor.default.init();
    console.log('monotor init');
};

// 会复用dom的mvvm
new Vue({
    template: `
<div id="app">
    <div v-if="visible1" data-track-name="b1" data-track-value="11" class="block1">
      block1
    </div>
    <div v-if="visible2" data-track-name="b2" data-track-value="22" class="block2">
      block2
    </div>
    <br >
    <button @click="toggle1">toggle block1</button>
    <button @click="toggle2">toggle block2</button>
</div>
`,
    data() {
        return {
            visible1: true,
            visible2: true
        };
    },
    methods: {
        toggle1() {
            this.visible1 = !this.visible1;
        },
        toggle2() {
            this.visible2 = !this.visible2;
        }
    }
}).$mount('#app');