版权声明：本文为博主原创文章，转载请注明出处 https://blog.csdn.net/qq_34160679/article/details/88179541
-
v-bind 是vue 绑定属性的指令
<input type="button" name="按钮" value="按钮" v-bind:title="mytitle + '新加的'">-
注意： v-bind 可以简写为 :要绑定的属性，v-bind 中可以写合法的js 表达式
<input type="button" name="" value="按钮" :title="mytitle + '新加的'">
-
-
v-on 用来绑定DOM事件机制，比如onclick事件，鼠标移入/移除事件等
<input type="button" name="" value="按钮2" :title="mytitle + '新加的'" v-on:click="show">- 其中show是方法的名称，需要在Vue 对象实例中methods属性中定义，详情查看实例
- 可以简写为 @要绑定的事件（@click）
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-bind 是vue 绑定属性的指令-->
<!--<input type="button" name="按钮" value="按钮" v-bind:title="mytitle + '新加的'">-->
<!-- 注意： v-bind 可以简写为:要绑定的属性，v-bind 中可以写合法的js 表达式-->
<input type="button" name="" value="按钮" :title="mytitle + '新加的'">
<!-- Vue中 提供了v-on 用来绑定事件机制 -->
<input type="button" name="" value="按钮2" :title="mytitle + '新加的'" v-on:click="show">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
mytitle: "这是我设置的一个title",
},
methods: { // 这个methods 属性中定义了当前Vue 实例中使用到的方法
show: function() {
alert("我是一个按钮")
}
}
})
</script>
</body>
</html>