昨天素素終於跳了誅仙台，我好開心呀！今兒個特地整理了下vue2.0開發過程中踩得坑！希望和大家交流！
一、聲明週期
聲明週期鉤子詳見這張圖 https://segmentfault.com/q/1010000007704114
1.0的ready替換成了mounted，即模板編譯掛載之後
數據data要寫成function的形式了，像這樣
data () {
return {
tableList: [],
currentModel: "",
modal: {
name: "",
ip: "",
ipList: [{"ip":"11"},{"ip":"22"},{"ip":"33"}], //
desc: "",
}
}
}二、路由中引入靜態js，全局組件，全局變量，全局function
1.引入全局的靜態js庫，建立一個與src同級的目錄例如static，然後把靜態資源放入該文件夾下，直接在根目錄的index.html中引入如下，其他路由頁面就都可以用了！（看起來好簡單啊 我可是折騰了好久！！）
<head>
<link rel="shortcut icon" href="./static/img/favicon.ico" />
<!-- 靜態css -->
<link rel="stylesheet" type="text/css" href="./static/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./static/css/framework.css">
<link rel="stylesheet" type="text/css" href="./static/css/common.css">
<link rel="stylesheet" type="text/css" href="./static/css/date-time-picker.css">
<link rel="stylesheet" type="text/css" href="./static/css/dataTables.bootstrap.css">
<!-- 靜態js -->
<script type="text/javascript" src="./static/js/lib/jQuery-2.1.4.min.js"></script>
<script type="text/javascript" src="./static/js/lib/bootstrap.min.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="./static/css/fixedColumns.bootstrap.min.css"> -->
<script type="text/javascript" src="./static/js/lib/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="./static/js/lib/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="./static/js/lib/date-time-picker.js"></script>
<!-- <script type="text/javascript" src="./static/js/lib/dataTables.fixedColumns.min.js"></script> -->
<meta charset="utf-8">
<title>XYvod</title>
</head>
2.頁面內的公共的參數
比如，用戶名，分組，權限等都放在framework.vue裏，子頁面用this.$parent.$parent.userInfo調用
3.引入公共組件 component
在main.js裏import singleSelect from './components/functional_select/single_select' //引入
Vue.component('singleSelect', singleSelect) //註冊這樣註冊後，所有路由頁面都可以使用singleSelect了
4.引入公共方法 function
在main.js裏，把一個方法綁定到vue的原型上，
Vue.prototype.hello = function(){
console.log('ppppp')
}
然後在路由頁面，調用this.hello('lemon',callback)就可以使用了
同樣適用於公共的util方法，不過我沒有使用這種拓展Vue原型鏈的方法，而是在每個路由頁面都單獨import util，使用公共方法
三、內插值屬性1.0和2.0的寫法不同了
<!-- 1.x -->
<div id="{{ selected.title }}"><!-- 2.0 -->
<div v-bind:title="selected.title" >test</div>
<div v-bind:someprop="testModel">test</div>
<div v-bind:class="'id-' + item.id">test</div>//字符串+變量四、v-for循環的key，value值互換了位置，還有track-by
<!-- 1.x -->
<div v-for="(index,item) in list" track-by="id"><!-- 2.0 -->
<div v-for="(item,index) in list" :key="item.id">五、filter過濾器
filter過濾器現在要定義到和methods同級的對象下
<div>{{ title | titleFilter }}</div>
methods: {},
filters: {
titleFilter: function(value){
return value+ 'ppp'
}
}六、遍歷數組時，key值不能做model
v-model綁定數據的時候，{key,value}這種數據類型，key值是不能做model的，js裏不能修改key值，value值未聲明的話會報錯，但是modal.value沒有的話，不會報錯，數組也是同理，會報錯
下面是錯誤的寫法：
taskList: ["lemontest1","lemontest2","lemontest3"]
<div class="form-group" v-for="(task,index) in taskList">
<input type="text" class="form-control" placeholder="請輸入任務名稱" v-model="task">
</div>改爲:：
taskList: [ {name: "lemontest1"},{name: "lemontest2"},{name: "lemontest3"} ]
<div class="form-group" v-for="(task,index) in taskList">
<input type="text" class="form-control" placeholder="請輸入任務名稱" v-model="task.name">
</div>
七、父子通信
其實父子通信踩得坑最多了，很多的api和方法1.0和2.0都完全不一樣了！詳見之前的一篇組件父子通信！