Vue.js 的方法
浏览 682
课文
这节课我们开始学习 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 会引发错误！
评论
暂无评论