码迷,mamicode.com
首页 > Web开发 > 详细

vue-learning:17- js - methods

时间:2019-05-20 01:03:59      阅读:122      评论:0      收藏:0      [点我收藏+]

标签:事件处理   app   put   html元素   -o   fun   www   ase   绑定   

methods

函数是十分优雅的语言特性,它让我们可以采用可复用的方式存储一段逻辑,从而不用重复代码就可以在多处调用。函数、组件、模块等都有复用代码的考虑,函数应该是最早组织复用代码的实现。
vue中,函数被定义为方法来使用,配置在methods属性中,methods是一个对象,函数名和函数体分别作为methods对象的键值对。

new Vue({
    el: "#app",
    data: {
        count: 0,
    },
    methods: {
        increase: function () {
            this.count++
        }
    }
})

在学习事件绑定指令v-on时介绍有几种写法,指令接收表达式写法,所以我们可以直接将简单的事件处理逻辑写在指令的表达式中。

<div id="#app">
    <div>{{ count }}</div>
    <button @click="count++">count+1<button>
</div>

但是在实现项目中,事件处理函数的逻辑往往都是比较复杂的,不可能向上面这样将处理逻辑写在HTML元素中,所以就可以定义函数,写在methods方法中。

<div id="app">
    <div>计数:{{ count }}</div>
    <button @click="increase">count+1</button>
</div>
methods: {
    addOneDay() {
        this.count++
    }
},

this

this指向当前所处的组件,可以使用this访问当前组件的配置对象Optiins的所有属性值。并且经过vue的封装,可以直接打点调用某个属性值。比如:

var vm = new Vue({
    el: "#app",
    data: {
        count: 0,
    },
    computed: {
        double() {return this.count *2}
    }
    methods: {
        addCount() {this.count++}
    }
})

此时this指向这个vue实例vm。调用vm.data.count属性不需要this.data.count的写法,而是直接this.countthis.doublethis.addCount。在计算属性和方法或其它配置对象属性中使用也一样。

具体见vue作用域概念:全局和局部

vue-learning:17- js - methods

标签:事件处理   app   put   html元素   -o   fun   www   ase   绑定   

原文地址:https://www.cnblogs.com/webxu20180730/p/10891585.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!