VUE learn three [binding monitoring, event modifier, modifier keys]

<div id="example">
  <h2>1. 绑定监听</h2>
  <button v-on:click="test1">Greet</button>
  <button @click="test1">Greet2</button>
  <button @click="test2($event, 'hello')">Greet3</button>
  <h2>2. 事件修饰符</h2>
  <!- <->prevent default event behavior
  a href="http://www.baidu.com" @click.prevent="test3">百度一下</a>
  <br/>
  <br/>
  <!-- 停止事件冒泡 -->
  <div style="width: 200px;height: 200px;background: red" @click="test4">
    <div style="width: 100px;height: 100px;background: green" @click.stop="test5"></div>
  </div>
  <h2>3.Key Modifier >H2</
  <input @keyup.8="test6">
  <input @keyup.enter="test6"></div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">new Vue({
    el: '#example',
    data: {
      name: 'Vue.js'
    },
    methods:{ 

the method `this` directed vm//
      Test1 (Event) {
// alert ( 'Hello' + this.name + '!') // `event` native DOM events 
Alert (event.target.innerHTML) 
}, 
test2 (Event, MSG) { 
Alert (event.target.innerHTML + '---' + MSG) 
}, 
Test3 () { 
Alert ( 'prevent the default behavior of an event')}, 
Test4 () {Alert ( 'OUT')}, 
Test5 () {Alert ( 'Inner')}, 
test6 (Event) {Alert (event.keyCode + '---' + event.target.value)}}}) 
        </ Script >