寫在前面的話：
文章是個人學習過程中的總結，為方便以后回頭在學習。
文章中會參考官方文檔和其他的一些文章，示例均為親自編寫和實踐，若有寫的不對的地方歡迎大家指出。
作者簡介：
一個不知名的前端開發，正在為能走向更高更遠的地方而努力。
VUE基礎系列目錄
一.前言
上一篇《VUE基礎系列（一）——VUE入坑第一篇》我們學習並實踐了下面的幾個點：
創建了一個vue實例
將實例掛載到了div#box這個DOM節點上
在html使用雙花括號插值法引用顯示了data中的數據
那么這篇呢，主要是學習總結給如何給在VUE構造函數中添加一些方法。
二.在VUE構造函數中添加methods屬性
#創建項目目錄
#基本語法
var vm = new Vue({
methods:{
//在此處定義方法
方法名：function(){
}
}
});
備注：在構造函數外部定義方法，直接使用vm.方法名 = function(){}；同樣，若想在構造函數外部調用methods中定義的方法，直接使用 vm.方法名 即可
#示例
在這個示例之前需要補充一個知識點：如在methods方法中訪問data的數據 。
前一篇文章我們介紹了在Vue構造函數外部使用vm.$data.屬性名去訪問data中的數據。而在methods方法中，我們可以直接使用this.屬性名去訪問data中的數據，其中this表示的就是vue實例對象。
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>給vue添加methods屬性</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
<h1>{{name}}</h1>
<h1>{{age}}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({ el: '#box', data:{ name: 'todo', age: 20, }, methods:{ add: function(){ //在methods內部訪問data中的數據：this.屬性名
console.log(this.name); // 'todo'
return this; } } }); // 構造函數外部調用add方法
var obj = vm.add(); //驗證methods中的this對象是否是vue的實例
console.log(obj == vm); //true
</script>
</body>
</html>
三.總結
1.使用methods屬性給vue定義方法
2.在方法中使用this.屬性名就可以直接訪問data中的數據
3.在構造函數外部可以使用vm.方法名定義或者調用方法
要加油鴨