Vue.js 的方法

浏览 160

课文

这节课我们开始学习 Vue 实例中的 method 属性。

methods 属性 在 Vue 实例中的作用的是定义所有的功能。

Vue 可以执行去执行这些功能。

这类似于普通的 JavaScript 方法/函数,因为它们也可以在任何地方定义,并且可以在需要或特定事件发生时调用。但是,在 Vue 实例中,它的功能只能在 methods 属性中定义。

方法语法

与 JavaScript 方法一样,Vue.js 方法可以定义为 functionName(){...},使用这种语法定义的示例方法如下所示:

methods: {
  sayHello() {
    alert('Hello');
  }
}

Vue.js 方法也可以分配给变量。这类似于原生 JavaScript 声明并使用该变量的名称进行调用。

在原生 JavaScript 中,变量名后跟 function 关键字及其主体,语法:variableName = function(){...}。

但是,在 Vue.js 中这样做的语法如下(声明方法的另一种语法):

methods: {
  sayHello: function(){
    alert('Hello');
  }
}

**注意:**上面显示的两个函数都可以使用函数名称调用,例如 sayHello();。但是,第二种方法定义语法看起来更类似于 data 属性语法。

函数参数

Vue 方法也可以带参数。同样,在方法参数方面,原生 JavaScript 方法和 Vue.js 方法之间没有太大区别。在这两种情况下,参数都可以在函数调用的括号中传递:

say('Hello');

这些参数需要在函数定义中声明,然后可以根据需要进行处理。

say: function(argument){
    alert(argument);
}

template 和 data 绑定

像 data 变量一样,methods 函数也可以插入 template。

这意味着可以在 template 需要时调用这些函数。

此外,可以使用 {{}} 直接调用函数,例如 {{functionName()}}。

或将其绑定到事件处理程序,不过这部分要稍后再将介绍。

从 template 中调用函数的示例代码如下:

<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>

	<div id="app"></div>

  <script>
  new Vue({
    el: '#app',
    template:
    `<div>
      <h1> Vue.js Application </h1>
      <p> My name is {{getMyName()}}. See how my name is retrived using a function!</p>
    </div>
    `,
    data: {
        name: '小乔'
    },
    methods: {
      getMyName: function(){
        return this.name;
      }
    }
  })
  </script>

</body>
</html>

如上所示,getMyName 函数在 template 中被调用了,并且该函数返回了存在于 data 中的 name 变量的值。这意味着在 methods 中也可以访问 data 中的变量。但是,您只能使用 this 关键字来引用变量。

**注意:**在 methods 中引用 data 的变量时,不需要使用 this.data.name。只需使用 this.name。这是因为 Vue 在背后做了一个 this 的绑定。而且,使用 this.data.name 会引发错误!

评论

登录参与讨论

暂无评论

共 0 条
  • 1
前往
  • 1