vue 事件绑定之后再document里面看不到？

Question

<div id="example-1">

<button v-on:click="counter += 1">Add 1</button>

<p>The button above has been clicked {{ counter }} times.</p>

</div>

var example1 = new Vue({

  el: '#example-1',

  data: {

    counter: 0

  }

});

console.log(window);

代码如上,我这边有两个问题,如果按照dom结构来理解的话,那么counter这个数应该是属于window下的,也就是window这个对象下面包含一个counter变量才可以实现自加,但是我通过console window发觉并不存在这个变量.

第二个问题,既然button是绑定了一个onclikc事件的,我在window下的document找到这个button元素,发现他的onclick是null,也就是说如果按照dom结构来理解,是没有绑定事件的.

如果按照dom结构来理解是不正确的话(因为vue本身就不属于dom操作),那么这个变量,以及这个事件的绑定我应该去哪里找。

Answer 1

你定义的vue对象已经赋值给example1，所以在example1当中可得到变量。example1.counter

Answer 2

多看文档，直接console.log(this),你会拿到你想要得东西。都用vue了，还一直想着window? counter属于vue实例,不属于window,数据驱动，依赖更多的是vue实例，this指向这个vue实例。事件同理，打印this,get你的答案