1.v-if和v-show的區別
v-if每次都會重新刪除或創建元素；v-show每次不會重新進行DOM的刪除和創建操作，只是切換了元素的 display:none 樣式
2.重新渲染子組件：當v-if內的條件爲false時，組件就會結束渲染，然後再讓它爲True，就可以重新加載了，但是要注意，不能直接將變量改爲false後立即改爲true，需要在下一個事件循環“tick”後再修改，因爲dom異步更新要在下一個“tick”更新。
<v-SurveyViewer v-if="loadSurvey">
</v-SurveyViewer>
this.loadSurvey = false
this.$nextTick(()=>{
this.loadSurvey = true
})
3.如果less-loader在3.x及以上，需要給如下配置
//vue.config.js
module.exports = {
css: {
loaderOptions: {
less: {
javascriptEnabled: true//必須要有該配置
}
}
}
4.在vue中使用lodash
//第一種，_這種的引入是吧所有的方法都引入進來了
import _ from 'lodash';
_.add('xxx')直接用
//第二種，這種只是從庫中引入了其中的一個方法
import { add } from 'lodash'
5.關於生命週期created和mounted
created:在模板渲染成html前調用，即通常初始化某些屬性值，然後再渲染成視圖。
mounted:在模板渲染成html後調用，通常是初始化頁面完成後，再對html的dom節點進行一些需要的操作。
其實兩者比較好理解，通常created使用的次數多，而mounted通常是在一些插件的使用或者組件的使用中進行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常會有這一步，而如果你寫入組件中，你會發現在created中無法對chart進行一些初始化配置，一定要等這個html渲染完後纔可以進行，那麼mounted就是不二之選。
6.固定格式的坑
<ul><li></li></ul>因爲ES規範中ul下面只能放li，所以<ul><my-content></..></..>是會報錯的
修改：<li :is="my-content">
7.關於$ref
在普通的dom中他指向這個dom元素
在組件中它指向一個組件的引用
8.父子組件傳參
父組件向子組件傳參 :content=“xxxx” ，prop 注意點，在子組件中不能直接修改傳過來的值，而是要克隆一份副本，將穿過的值變成自己的（單向數據流） 你隨隨便便修改了父組件傳過來的參數，那如果其他參數也接受父組件傳過來的同樣的參數怎麼整？
子組件向父組件傳參 this.$emit('組件名字', 參數)
9.傳遞的參數格式
:content="xx" 有冒號，代表的是js表達式，所以 :content="123" 代表的是數字123
content="xx" 無冒號，代表的是字符串，所以 :content="123" 代表的是字符串“123”
10.給組件綁定原生事件
<my-child @click.navtive ="xxxx"> 注意要加上.navtive 不然對組件的click點擊會報錯
11.非父子組件的傳值 1.vuex 2.bus/總線/發佈訂閱模式/觀察者模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>非父子組件傳值(bus/總線/發佈訂閱模式/觀察者模式)</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<son content="firstClild"></son>
<son content="secondClild"></son>
</div>
<script>
// 實現非父子組件傳參的關鍵點,Vue類下面有一個原型屬性，將這個原型屬性指向Vue的一個實例對象
Vue.prototype.bus = new Vue();
Vue.component('son',{
props:{
content:String
},
template:'<div @click="handleClick">{{content}}</div>',
methods:{
handleClick:function(){
//this.prop指vue的一個實例，每一個實例上面都有$emit方法，傳遞
this.bus.$emit('change',this.content);
}
},
//生命週期鉤子，監聽
mounted:function(){
this.bus.$on('change',function(msg){
//此處彈出來兩次是因爲兩個組件都進行了同樣事件的監聽
alert(msg);
})
}
})
var app = new Vue({
el:"#app",
});
</script>
</body>
</html>
12.動態組件
哪一個toggle特效的dom爲例子
<component :is="xxx"> xxx是組件名字，是哪個組件就加載哪一個
另外v-once將組件加載過一次變放在內存緩存中了，就不會沒切換一次加載一次了
13.關於vue動畫
1）transition動畫
<transition name="fade">dom元素。。。</transition>
.fade-enter .fade-enter-active .fade-leave-to .fade-leave-active
2）css3 @keyframes自定義動畫 （見開發文檔）
3）animate.css動畫庫的使用
先引入，在在dom標籤上添加屬性 enter-active-class="animated swing" leave-active-class="animated swing"
頁面刷新，一進入頁面便執行動畫 apper apper-active-class
4）animate.css庫與 .fade（transition）相結合
注意如何自定義動畫的事件，以及以哪個結束時間爲基準 type=“xxx” :duration
5）js動畫
在<transition>利用js鉤子函數： 進入的動畫如下代碼，同樣消失的動畫也是如此
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js動畫</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<!-- js鉤子函數 -->
<transition
@before-enter="handleBefore"
@enter="handleEnter"
@after-enter="handleAfter"
>
<div v-if="show">Hello</div>
</transition>
<button @click="fadeClick">顯示隱藏切換</button>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
show:true
},
methods:{
fadeClick:function(){
this.show = !this.show;
},
handleBefore:function(el){
el.style.color = 'red';
},
handleEnter:function(el,done){
setTimeout( () => {
// 兩秒之後變綠
el.style.color = 'green';
},2000);
setTimeout( () => {
// 綠色持續5秒，整個動畫結束done()
done();
},5000)
},
handleAfter:function(el){
el.style.color = '#000';
}
}
})
</script>
</body>
</html>
6）velocity.js動畫庫的使用
首先引入這個js庫
在上述代碼的基礎上，改變鉤子函數中的內容
handleBefore:function(el){
el.style.opacity= 0;
},
handleEnter:function(el,done){
Velocity( el,
{ opacity:1 },
{duration:2000,complete:done})
},
14.vue-cli2.0 3.0 4.0 中涉及到的路由配置問題，關於在vue.config.js中加入配置
module.exports = {
//第一種方法：加入這個
runtimeCompiler: true,
productionSourceMap: false,
css: {
loaderOptions: {
less: {
modifyVars: {
},
javascriptEnabled: true
}
}
},
//第二種方法
// configureWebpack: {
// resolve: {
// alias: {
// 'vue$': 'vue/dist/vue.esm.js' // 預編譯 + 運行時，適用於 dev 環境
// }
// }
// }
}
可以看看別人博客總結的：http://www.kt5.cn/fe/2019/12/20/you-are-using-the-runtime-only-build-of-vue/
15.可以去掉vue 路由中的#，在代碼中加入配置即可
export default new Router({
mode: 'history',
...
})