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

转载于:https://www.cnblogs.com/fdxjava/p/11579645.html