<!--方法处理器-->
<button v-on:click="doSomething">方法处理器</button>
<!--内联语句-->
<button v-on:click="doSomething('Vue.js!',$event)">内联语句</button>
<!--缩写-->
<button @click="doSomething">缩写</button>
<!--停止冒泡-->
<button @click.stop="doSomething">停止冒泡</button>
<!--阻止默认行为-->
<button @click.prevent="doSomething">阻止默认行为</button>
<!--串联修饰符-->
<button @click.stop.prevent="doSomething">串联修饰符</button>
<!--键修饰符，键别名-->
<input @keyup.enter="onEnter" placeholder="回车键" v-model="msg">
<button v-on:click.once="doSomething">执行一次</button>
</div>
<script>
new Vue({
el:'#app',
data: {
name:'vue.js',
msg:''
},
//在methods对象中定义方法
methods:{
doSomething:function (event) {
//方法中的this指向Vue实例
alert(this.name)
},
onEnter:function (event) {
this.msg = '按下了回车键'
}
},
});
</script>
5.v-bind 绑定属性
用法：
动态地绑定一个或多个特性，或一个组件 prop 到表达式。
在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象。可以通过下面的教程链接查看详情。
在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。
没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。
修饰符：
.prop – 被用于绑定 DOM 属性。
.camel – (2.1.0+) transform the kebab-case attribute name into camelCase.
.sync – (2.3.0+) a syntax sugar that expands into a v-on handler for updating the bound value.
实例：
<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
<!-- with inline string concatenation -->
<img :src="'/path/to/images/' + fileName">
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>
<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>以上所述是小编给大家介绍的Vue.js常用指令的使用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
