最近在学习Vue，感觉methods还是有必有总结一下的，看的米斯特吴的视频，讲的很精髓。下面是我对methods的理解。
- methods是Vue对象中作为函数块的包装盒，methods中可以包含多个函数，函数也可以传参，同时在HTML代码中可以直接使用，例如methods中有greet(time)函数，可以这样使用
<p>{{greet('evening')}}</p>，这样就会自动执行函数gree（time），同时methods中的函数有返回值，返回的是对象，调用data（）中的数据可以用this.变量名。 - return 字符串时可以用“+”拼接，例如 return
"good night" + this.name;但是不推荐使用，因为如果字符串过长容易出错，比较流行这种写法：
- methods包含的函数块可以用这种方式来写
greet: function () { return "good night" + this.name;}，但是不推荐那样写，对于学过JS的人看起来很别扭，所以推荐这样写greet(time) { return "good night" + this.name; }
代码示例：
JS
// 实例化vue对象
new Vue({
el: "#vue-app",//elment
data() {
return {
name: "小哥哥",
wechat: '2004343',
website: 'https://www.baidu.com',
}
},
methods: {
// greet: function () {
// return "good night" + this.name;
// }
greet(time) {
// return "good night" + this.name;
return `Good ${time} ${this.name}`;
},
haveLunch() {
return `吃过午饭了吗？`;
}
}
});
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Vue CDN</title>
</head>
<body>
<div id="vue-app">
<h1>Data binding</h1>
<h1>hello,{{name}}</h1>
<p>你的微信是：{{wechat}}</p>
<p>{{greet('evening')}}</p>
<p>{{haveLunch()}}</p>
<p>
<a v-bind:href="website">baidu</a>
</p>
<p><input type="text" v-bind:value="name" /></p>
</div>
</body>
<script src="app.js"></script>
</html>
运行结果：
