在寫了相當一段時間的後端之後，主管決定磨練磨練我寫前端的能力，故最近都會撲在js和vue上面，那麼，就來梳理一下這些日子以來我遇到的前端的一些問題和解決的方法吧！
1.如何在頁面上嵌入一個部分顯示pdf文檔
本來想用pdf.js來實現的，但是偶然發現，HTML5本身就支持這個功能，只需要一條語句就能實現：
<div class="article">
<iframe id="showPdf" height="753px" width="745px"></iframe>
</div>就是這個<iframe>標籤的功勞啦！pdf文件的文件路徑需要用src屬性引入，但注意，最好不要直接在標籤內寫，因爲ie11在這裏有bug（在這裏我要嫌棄它兩秒鐘），可能會顯示不了，所以要在js語句中這麼寫：
$('#showPdf').attr('src','/static/pdf/河海雲ER.pdf');這樣才能兼容所有瀏覽器。
2.vue中動態屬性的寫法
當我們需要在標籤所帶屬性中添加一些變量值時，需要在屬性名稱前加一個:號
<span><img class="download-file" :src="downloadUrl"></span>3.類似第2點，如果點擊超鏈接跳轉時的url需要帶一個變量（如id等等），則再配置router時，應該這麼寫：
{
path:'detail/:id',
components: {
default:_import('index/detail'),
headnav:Headnav,
bottom:Bottom
},
name:'詳情'
}4.如何去掉pdf展示插件的工具欄（不允許用戶下載的時候要這麼做）
原來是這樣的：
去掉之後的效果：
有沒有人像我一樣，找遍了iframe的屬性，前前後後弄了非常久，都無法實現這個功能，後來忽然發現，使用<embed>也可以展示pdf文件，並且它可以去掉工具欄！！！
<embed src = "/static/pdf/河海雲ER.pdf#toolbar=0&navpanes=0&scrollbar=0" height="753px" width="745px" type="application/pdf"><!--type="application/pdf"這個屬性要加上，否則會顯示該插件無法加載-->5.$nextTick()函數
我在寫一個子目錄展開功能時，需要對其div高度進行動態的判斷，然而發現無論我怎麼獲取它的高度，都是上一次渲染之後的高度，而不是本次渲染完成之後的高度。後來發現，是因爲我這個獲取高度的函數寫在methods裏定義的函數中，這樣是不可以的，因爲每次執行這個函數的時候dom都尚未渲染完，所以獲取的只能是上一次渲染的高度數值。這就需要用到$nextTick()函數了：
this.$nextTick(function(){ //當dom渲染完成後執行的函數
let childDiv = this.$refs.childElement;
let height = childDiv.offsetHeight;
if(height > 80){
this.openBtn = true;
}
})6.vue中數組的值改變與頁面實時刷新
我在代碼中需要將一組元素與數組中的值進行綁定，但發現只有剛進頁面時值是改變的，無論我怎麼修改數組中的值，頁面都似乎沒有進行刷新一樣。這其實是一個坑：不熟悉vue的同學，肯定會認爲既然一個普通類型的變量能夠觸發元素刷新，那麼數組中的某個值發生改變，同理也能觸發刷新。實際上並沒有。
原因是：vue是通過檢測get和set方法才知道數據是否更新，但數組沒有，因此我們需要對數組的元素手動進行觸發。
this.$set(this.hasmore, key, false); //另一種寫法是Vue.set(target,key,value);這樣就能進行實時刷新啦！
參考資料：
vue.js中$set與數組更新
vue 綁定數組裏面對象變化無法更新view
7.打印iframe中的內容
由於兼容性需要，後臺上傳的文檔都要轉換成.html文檔在前端進行展示，然鵝在進行頁面打印時，不能直接使用window.print()方法，因爲它只能將整個頁面打印下來，而我只想打印文檔正文，那麼打印的js語句可以這麼寫：
var iframe = document.getElementById('htmlFile');
iframe.contentWindow.focus();
iframe.contentWindow.print();先獲取iframe中的焦點，然後進行打印，就可以啦！！經測試可兼容ie11、chrome以及FF。
8.幾個有用的css3樣式
- CSS3 background-size 屬性
定義：background-size 屬性規定背景圖像的尺寸。
用法：background-size: length|percentage|cover|contain;
值及描述：
length—設置背景圖像的高度和寬度。
第一個值設置寬度，第二個值設置高度。
如果只設置一個值，則第二個值會被設置爲 “auto”。
percentage—以父元素的百分比來設置背景圖像的寬度和高度。
第一個值設置寬度，第二個值設置高度。
如果只設置一個值，則第二個值會被設置爲 “auto”。
cover—把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。
背景圖像的某些部分也許無法顯示在背景定位區域中。
contain—把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域。
這個樣式的主要作用是幫助我們設置div的背景圖片的顯示模式，以達到我們想要的效果。
- CSS3 text-overflow 屬性
定義： text-overflow 屬性規定當文本溢出包含元素時發生的事情。
語法：text-overflow: clip|ellipsis|string;
值及描述：
clip—修剪文本。
ellipsis—顯示省略符號來代表被修剪的文本。 測試
string—使用給定的字符串來代表被修剪的文本。
有了這個屬性之後，我們可以非常方便地實現多出的文本用”…”代替的功能，以前我只能使用if語句+substring(0,60)+“…”的方法，非常具有特定性而且修改起來很麻煩，那麼知道這個屬性之後，就能直接使用text-overflow:ellipsis;來使文字只截取在該div內的長度，並自動加上“…”啦，也不需要對文本長度進行判斷，可以說是十分方便了。
參考資料：
CSS3 background-size 屬性
CSS3 text-overflow 屬性
9.vue控制輸入框的輸入狀態
有時候我們會想要根據某個操作來控制輸入框是否允許輸入，那麼這個時候可以這樣寫：
<input type="text" :disabled="flag">
data:{
flag:true
}只要修改flag的值，input的disabled的值就會隨之改變。
進階版：根據複選框勾選的狀態來控制輸入框的狀態。
<input type="checkbox" v-model="flag">
<input type="text" v-model="value" :disabled="!flag">
data:{
flag:true,
value:''
}即當複選框勾選時，輸入框的disabled屬性值爲false，允許輸入。
10.bootstrap validator的callback函數
以前一直認爲，bv的callback函數是隻能用if-else函數來返回布爾值，並且message的值只能定義一次，但其實不是，callback函數提供多樣的方式讓我們得到想要的檢查結果：
之前語句是這樣寫的：
callback:{
message:'不能爲負數'
callback：function(value,validator){
if(value<0){
return false;
}else{
return true;
}
}
}這種寫法着實有弊端，當我要判斷value既不能爲負數，又要保留2位小數時，這個語句就不好寫了，而且message只能返回“不能爲負數”，這當然是不合理的。
我查了很多資料之後發現，其實官網早就寫好了，並且非常簡單：
callback:{
callback：function(value,validator){
if(value<0){
return {
valid:false,
message:'不能爲負數'
}
}
if(!/正則表達式/.test(value)){
return {
valid:false,
message:'只能保留兩位小數'
}
}
return true;
}
}看！這樣就不用寫很複雜很複雜的if語句啦，是不是很簡單？？？
參考資料：callback validator （各位覺得英文看不懂的小朋友可以用谷歌打開把頁面翻譯了再看哦）