這次是比較麻煩的幾個指令。

v-on指令

<button v-on:click="doThis"></button>

可縮寫為

<button @click="doThis"></button>

click後的方法名與methods的方法名一致

var app = new Vue({
  el: '#app',
  methods:{
  doThis:function () {
  console.log('clicked');} })

滑鼠移入移出事件

<button v-on="{ mouseenter:onEnter , mouseleave:onOut
 
}" v-on:click="onClick()" id="app">點我</button>

表單上的事件

<form @keyup.enter="onKeyenter" v-on:submit="onSubmit($event)">
<!-- <form v-on:submit.prevent="onSubmit"> -->防止頁面重新整理，自動提交
<input type="text"></input>
<input type="submit"></input>

</form>

var app = 
 
new Vue({
  el: '#app',
  methods:{
  onSubmit:function (e) {
  e.preventDefault();//e防止重新整理自動提交
  console.log('submit');},onKeyenter:function(){
  console.log('enter');} })

v-bind指令

v-bind指令用於繫結，可繫結a連結，也可繫結圖片地址，也可以繫結class、style等。

a連結

<a v-bind:class="klass" v-bind:href="url"></a>

可縮寫為

<a :class="klass" :href="url"></a>
 

var app = new Vue({
  el: '#app',
  data:{
    url:'http://baidu.com',
    klass:'btn btn-default',//此為bootstrap的一個按鈕樣式
  }
}) 

圖片地址

<img v-bind:src="img">

var app = new Vue({
  el: '#app',
  data:{
    img:'../image/3.jpeg',
  }
}) 

繫結style

<style type="text/css">
.active{
background: red;}
</style>

<a :class="{active:isActive}" :href="url"></a>

var app = new Vue({
  el: '#app',
  data:{
    isActive:true//false
  }
})

computed計算

用v-model動態繫結資料，方便修改後檢測計算是否正確

<div id="app">
<table border="1">
<thead>
<th>學科</th>
<th>分數</th>
</thead>
<tbody>
<tr>
<td>數學</td>
<td><input type="text" v-model.number="math" /></td>
</tr>
<tr>
<td>語文</td>
<td><input type="text" v-model.number="Chinese" /></td>
</tr>
<tr>
<td>英語</td>
<td><input type="text" v-model.number="English" /></td>
</tr>
<tr>
<td>總分</td>
<td><input type="text" v-model.number="sum" /></td>
</tr>
<tr>
<td>平均分</td>
<td><input type="text" v-model.number="average" /></td>
</tr>
</tbody>
</table>
</div>

var app =new Vue({
  el: '#app',
  data:{
  math:80,
  Chinese:90,
  English:89
  },
  computed:{
  sum:function () {
  return parseFloat(this.math)+parseFloat(this.Chinese)+parseFloat(this.English);},
  average:function(){
  return Math.round(this.sum/3)}
  }
})