zoukankan      html  css  js  c++  java
  • vue学习笔记之初识vue——实例方法声明

    如果需要在点击鼠标时,执行一个复杂的操作,那么采用单一的表达式 作为v-on指令值就不够了 —— 我们需要将复杂的操作封装为Vue实例的 一个方法,然后将v-on指令的值设置为这个方法。

    使用methods配置项来声明Vue实例的方法。当Vue.js创建一个Vue实例时, 会将methods配置项中声明的方法,挂接到Vue实例对象上:

    实例方法可以直接通过实例对象调用,例如,对于上图中的vm实例:

    vm.handler(); //正确
    

    实例方法另一个常见的用途,是将方法名声明为v-on指令的值,当事件 触发时将调用该实例对象上该名称的方法。例如,下面的代码为Vue实例声明 了reset方法,并将其名称作为模板中button元素的v-on指令的值:

    new Vue({
      template: '<button v-on:click="reset">{{counter}}</button>',
      data: { counter: 0},
      methods: {
        reset: function(){ this.counter = 0; }
      }
    })
    

    方法函数体内的this对象

    需要指出,在methods配置对象中声明的方法,其函数实现体内,this总是 指向所在的Vue实例。所以,可以在这些函数体内,直接访问通过data配置项声明 的数据,比如this.counter

  • 相关阅读:
    HTML_from
    HTML_img
    python_Django默认转换器
    python_虚拟环境
    python_正则表达式
    mysql_pymysql模块
    mysql_权限管理
    mysql_子查询
    sudo权限造成的故障
    22.Linux定时任务
  • 原文地址:https://www.cnblogs.com/yi-515/p/8855143.html
Copyright © 2011-2022 走看看