第三课 Vue中的方法的定义及事件绑定指令
Vue中的方法的定义及事件绑定指令
方法定义
方法定义通过Vue对象中的methods属性进行拓展
1）基础示例
new Vue({el: '#app',methods: {fun(){alert(1);}}})
2）操作对象数据
new Vue({el: '#app',data: {val: 'Hello World !'},methods: {fun(){alert(val);}}})
事件绑定指令
Vue中拓展了事件绑定指令(v-on)，用于绑定自定义的事件
1）基础示例
<div id="app"><input type="button" value="点击我" v-on:click="fun()"></div><script>new Vue({el: '#app',methods: {fun(){alert('Hello World !');}}})</script>
- 简写指令绑定
v-on指令还有较方便的简写方式 @
<div id="app"><input type="button" value="点击我" @:click="fun()"></div><script>new Vue({el: '#app',methods: {fun(){alert('Hello World !');}}})</script>
3）综合指令绑定事件示例
<div id="app"><input type="button" value="点击我" v-on:click="fun()"></div><script>new Vue({el: '#app',data: {val: 'Hello World !'},methods: {fun(){alert(this.val);}}})</script>