綁定屬性的指令-v-bind 縮寫:屬性="data里邊定義的名字" 點擊事件v-on:click="" 縮寫@click="方法名"

 將鼠標放到按鈕上，顯示提示，---原始固定語法--

 <input type="button" value="按鈕"  title="mytitle"> 

提示：這里data雖然定義了變量mytitle的內容，但是不會顯示，只顯示mytitle

應該為變量--是一個可以傳遞的屬性值

<input type="button" value="按鈕"   v-bind:title="mytitle"> 

<script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '123',
        msg2: '<h1>哈哈，我是一個大大的H1， 我大，我驕傲</h1>',
        mytitle: '這是一個自己定義的title'
      },
      methods: { // 這個 methods屬性中定義了當前Vue實例所有可用的方法
        show: function () {
          alert('Hello')
        }
      }
    })

　　

 <!-- v-bind: 是 Vue中，提供的用於綁定屬性的指令 -->
    <input type="button" value="按鈕" v-bind:title="mytitle + '123'">
    <!-- 注意： v-bind: 指令可以被簡寫為 :要綁定的屬性 -->
    <!-- v-bind 中，可以寫合法的JS表達式 -->

    <!-- Vue 中提供了 v-on: 事件綁定機制 -->
    <input type="button" value="按鈕" :title="mytitle + '123'" v-on:click="alert('hello')"> -->


    <input type="button" value="按鈕" @click="show">

鼠標移到按鈕上的事件--v-on:mouseover

原生操作dom事件-

 /* document.getElementById('btn').onclick = function(){

      alert('Hello')

    } */

　　

<!--v-bind   Vue提供的屬性綁定機制   縮寫是 : -->

<!--v-on     Vue提供的事件綁定機制   縮寫是 @ -->