https://www.jianshu.com/p/dc5057e7ad0d (最全入坑教程)
http://doc.liangxinghua.com/vue-family/1.4.html（vue+vue-cli+vue-router+vuex+axios全套解決方案）
TodoList - 把資料儲存到 瀏覽器中，這樣不管怎麼重新整理，資料都不會丟失了
深度複製。深度監視 deep: true;
vue 指令
vue常用
vue 生命週期
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body> <div id="app">
<p>{{ message }}</p>
</div> <script type="text/javascript"> var app = new Vue({
el: '#app',
data: {
message : "xuxiao is boy"
},
beforeCreate: function () {
console.group('beforeCreate 建立前狀態===============》');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message)
},
created: function () {
console.group('created 建立完畢狀態===============》');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeMount: function () {
console.group('beforeMount 掛載前狀態===============》');
console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
mounted: function () {
console.group('mounted 掛載結束狀態===============》');
console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前狀態===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
updated: function () {
console.group('updated 更新完成狀態===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 銷燬前狀態===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
destroyed: function () {
console.group('destroyed 銷燬完成狀態===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
})
</script>
</body>
</html>
生命週期總結
beforecreate: 舉個栗子：可以在這加個loading事件created：在這結束loading，還做一些初始化，實現函式自執行mounted： 在這發起後端請求，拿回資料，配合路由鉤子做一些事情beforeDestroy： 你確認刪除XX嗎？ destroyed ：當前元件已被刪除，清空相關內容
vue1.0記錄：
事件物件:
@click="show($event)"
事件冒泡:
阻止冒泡:
a). ev.cancelBubble=true; b). @click.stop 推薦
預設行為(預設事件):
阻止預設行為:
a). ev.preventDefault(); b). @contextmenu.prevent 推薦
鍵盤:
@keydown $event ev.keyCode
@keyup
常用鍵:
回車
a). @keyup.13
b). @keyup.enter
上、下、左、右
@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down
.....
-----------------------------------------
事件繫結：
<img src="{{url}}" alt=""> 效果能出來，但是會報一個404錯誤
<img v-bind:src="url" alt=""> 效果可以出來，不會發404請求
-----------------------------------------
模板:
{{msg}} 資料更新模板變化
{{*msg}} 資料只繫結一次
{{{msg}}} HTML轉意輸出
-----------------------------------------
過濾器:-> 過濾模板資料
系統提供一些過濾器:
{{msg| filterA}}
{{msg| filterA | filterB}}
uppercase eg: {{'welcome'| uppercase}}
lowercase
capitalize
currency 錢
{{msg| filterA 引數}}
...
----------------------------------
使用者會看到花括號標記:
v-cloak 防止閃爍, 比較大段落
----------------------------------
<span>{{msg}}</span> -> v-text
{{{msg}}} -> v-html
----------------------------------
計算屬性的使用:
computed:{
b:function(){ //預設呼叫get
return 值
}
}
--------------------------
computed:{
b:{
get:
set:
}
}
* computed裡面可以放置一些業務邏輯程式碼，一定記得return
---------------------------------
vue例項簡單方法:
vm.$el -> 就是元素
vm.$data -> 就是data
vm.$mount -> 手動掛載vue程式
vm.$options -> 獲取自定義屬性
vm.$destroy -> 銷燬物件
vm.$log(); -> 檢視現在資料的狀態
---------------------------------
迴圈：
v-for="value in data" 會有重複資料？
track-by='索引' 提高迴圈效能
track-by='$index/uid'
無track-by情況：資料修改時，無論值是否被修改，dom都被重新渲染（控制檯可以看到）
加入track-by屬性：資料修改時，不變資料所在的dom不被重新渲染，已改變的資料所在dom才被重新渲染
vue2.0變化 ==》
https://www.cnblogs.com/listen9436/p/10025749.html
vue生命週期部分內容轉自：https://segmentfault.com/a/1190000008010666?utm_source=tag-newest