Vue.js 的方法

浏览 14

课文

这节课我们开始学习 Vue 实例中的 method 属性。 methods 属性 在 Vue 实例中的作用的是定义所有的功能。 Vue 可以执行去执行这些功能。 这类似于普通的 JavaScript 方法/函数,因为它们也可以在任何地方定义,并且可以在需要或特定*事件*发生时调用。但是,在 Vue 实例中,它的功能只能在 methods 属性中定义。 # 方法语法 与 JavaScript 方法一样,Vue.js 方法可以定义为 functionName(){...},使用这种语法定义的示例方法如下所示: ```jsx methods: { sayHello() { alert('Hello'); } } ``` Vue.js 方法也可以分配给变量。这类似于原生 JavaScript 声明并使用该变量的名称进行调用。 在原生 JavaScript 中,变量名后跟 function 关键字及其主体,语法:variableName = function(){...}。 但是,在 Vue.js 中这样做的语法如下(声明方法的另一种语法): ```jsx methods: { sayHello: function(){ alert('Hello'); } } ``` **注意:**上面显示的两个函数都可以使用函数名称调用,例如 sayHello();。但是,第二种方法定义语法看起来更类似于 data 属性语法。 ### 函数参数 Vue 方法也可以带参数。同样,在方法参数方面,原生 JavaScript 方法和 Vue.js 方法之间没有太大区别。在这两种情况下,参数都可以在函数调用的括号中传递: ```jsx say('Hello'); ``` 这些参数需要在函数定义中声明,然后可以根据需要进行处理。 ```jsx say: function(argument){ alert(argument); } ``` ### template 和 data 绑定 像 data 变量一样,methods 函数也可以插入 template。 这意味着可以在 template 需要时调用这些函数。 此外,可以使用 {{}} 直接调用函数,例如 {{functionName()}}。 或将其绑定到事件处理程序,不过这部分要稍后再将介绍。 从 template 中调用函数的示例代码如下: ```html <!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