绑定属性的指令-v-bind 缩写:属性="data里边定义的名字" 点击事件v-on:click="" 缩写@click="方法名"

 将鼠标放到按钮上，显示提示，---原始固定语法--

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

提示：这里data虽然定义了变量mytitle的内容，但是不会显示，只显示mytitle

应该为变量--是一个可以传递的属性值

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<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提供的事件绑定机制   缩写是 @ -->