Vue.js demo

Vue-方法与事件处理器 2.内联语句处理器 3.事件修饰符 4.按键修饰符

HTML

<script src="https://cdn.bootcss.com/vue/1.0.24/vue.js"></script>
<div id="app">
  <!-- 内联语句处理器 -->
  <button @click="say('hi')">say hi</button>
  <button @click="say('what')">say what</button>
  
  <!-- 访问原生DOM事件 -->
  <button @click="nativeEvent($event)">prevent default</button>
  
  <!-- 事件修饰符 -->
  <div @click="handleDivClick" class="stop-container"><button @click.stop="mStop">.stop</button></div>
  <form @submit.prevent="mPrevent">
    <button type=submit>.prevent</button>
  </form>
  <!-- 按键修饰符 -->
  <input @keyup.enter="keyup" />
  
</div>

CSS

.attention {
  padding: 5px;
  background-color: black;
  color: red;
}
.stop-container {
  padding: 10px;
  background-color: red;
}

JavaScript

var vm = new Vue({
  el: '#app',
  methods: {
  	say: function(msg) {
    	alert(msg);
    },
    nativeEvent(e) {
    	e.preventDefault();
    },
    handleDivClick() {
    	alert('handle div click!');
    },
    mStop() {
    	alert('.stop');
    },
    mPrevent() {
    	alert('.prevent');
    },
    keyup: function() {
    	alert('enter');
    }
  }
});