1.vue中element-ui實現(xiàn)的slot分發(fā)和route路由
<!--單個激活 并以 index 作為 path 進(jìn)行路由跳轉(zhuǎn)-->
<el-menu unique-opened router v-show="!collapsed">
<!--動態(tài)路由到子組件 將不可見的路徑隱藏-->
<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
<el-submenu :index="index+''" v-if="!item.leaf">
<!--用el ui 的title進(jìn)行slot分發(fā)菜單-->
<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
<!--item.name和item.children.name來配置菜單欄和子菜單欄的名稱-->
<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item>
</el-submenu>
<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
</template>
</el-menu>
slot分發(fā)其實就是父組件需要在子組件內(nèi)放一些DOM，它就是負(fù)責(zé)這些DOM是否顯示，在哪個地方顯示的。
具名slot
<slot> 元素可以用一個特殊的屬性 name 來配置如何分發(fā)內(nèi)容。多個 slot 可以有不同的名字。
使用：（1）父組件要在分發(fā)的標(biāo)簽中添加屬性"slot=name名"
（2）子組件在對應(yīng)分發(fā)位置上的slot標(biāo)簽添加屬性"name=name名"
代碼如下：
<body>
<div id="app">
<child>
<span slot="one">123456</span>
<span slot="two">abcdef</span>
</child>
</div>
<script>
new Vue({
el:'#app',
components:{
child:{
template:"<div><slot name='two'></slot>我是子組件<slot name='one'></slot></div>"
}
}
});
</script>
</body>
2.vue中設(shè)置管道
Object.keys(filters).forEach(k => Vue.filter(k, filters[k]))
Object.keys 返回一個所有元素為字符串的數(shù)組，其元素來自于從給定的object上面可直接枚舉的屬性。這些屬性的順序與手動遍歷該對象屬性時的一致。
如果你想獲取一個對象的所有屬性,，甚至包括不可枚舉的，請查看Object.getOwnPropertyNames。
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
3.反向代理調(diào)用api
env: require('./dev.env'),
port: 8092,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/bdc-xapi': {
target: '',
changeOrigin: true,
pathRewrite: {
'^/bdc-xapi': '/'
}
},
},
4.token機(jī)制完成登錄狀態(tài)保持/身份認(rèn)證
http://www.itdecent.cn/p/8d28e60af440
5.nextTick
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus();
});
this.$nextTick作用：在下次dom更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個方法，獲得更新后的dom。
6.element-ui組件中方法調(diào)用問題
<el-input type="text" :placeholder="fileName" v-model="uploadForm.reNameTxt" @keyup.enter.native="reNameSuccess"></el-input>
@keyup.enter.native多加了個native
關(guān)于keyup.enter.native
https://blog.csdn.net/fifteen718/article/details/80359844
注意?。?！如果用了封裝組件的話，比如element，這個時候使用按鍵修飾符需要加上.native
!!當(dāng)一個 form 元素中只有一個輸入框時，在該輸入框中按下回車應(yīng)提交該表單。如果希望阻止這一默認(rèn)行為，可以在 <el-form> 標(biāo)簽上添加 @submit.native.prevent ;
即@submit.native.prevent是用來阻止默認(rèn)行為的
7.el-upload組件使用
<el-upload
class="avatar-uploader"
:http-request="handleGiftImgUpload"
:show-file-list="false"
:before-upload="beforeUpload"
:on-success="
(res, file) => {
return onUploadSuccess(res, file)
}
"
>
<img v-if="bindForm.urlPic !== ''" :src="bindForm.urlPic" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
if (!isJPG) {
this.$message.error('只能上傳圖片格式!')
}
return isJPG
},
handleGiftImgUpload(fileObj) {
const formData = new FormData()
formData.append('file', fileObj.file)
return giftManagerUpdateImage(formData)//接口名字
},
onUploadSuccess(res) {
this.bindForm.urlPic = res.data
},
8. vue中backgroundImage的寫法
<div class="img2" :style="{backgroundImage: 'url(' + bg2 + ')' }"></div>
https://blog.csdn.net/qq_35393869/article/details/80333564
9. vue的生命周期
beforecreate : el 和 data 并未初始化。這個時候，數(shù)據(jù)還沒有掛載呢，只是一個空殼，無法訪問到數(shù)據(jù)和真實的dom，一般不做操作（可以在這加個loading事件 ）
created ：完成了 data 數(shù)據(jù)的初始化，el沒有。（在這結(jié)束loading，還做一些初始化，實現(xiàn)函數(shù)自執(zhí)行 ）
beforeMount：完成了 el 和 data 初始化。在這個函數(shù)中虛擬dom已經(jīng)創(chuàng)建完成，馬上就要渲染,在這里也可以更改數(shù)據(jù)，不會觸發(fā)updated，在這里可以在渲染前最后一次更改數(shù)據(jù)的機(jī)會，不會觸發(fā)其他的鉤子函數(shù)，一般可以在這里做初始數(shù)據(jù)的獲取
mounted ：完成掛載。數(shù)據(jù)、真實dom都已經(jīng)處理好了,事件都已經(jīng)掛載好了，可以在這里操作真實dom等事情...
（在這發(fā)起后端請求，拿回數(shù)據(jù)，配合路由鉤子做一些事情）
beforeUpdate：當(dāng)組件或?qū)嵗臄?shù)據(jù)更改之后，會立即執(zhí)行beforeUpdate，然后vue的虛擬dom機(jī)制會重新構(gòu)建虛擬dom與上一次的虛擬dom樹利用diff算法進(jìn)行對比之后重新渲染，一般不做什么事兒
updated：當(dāng)更新完成后，執(zhí)行updated，數(shù)據(jù)已經(jīng)更改完成，dom也重新render完成，可以操作更新后的虛擬dom
beforeDestroy： 當(dāng)經(jīng)過某種途徑調(diào)用$destroy方法后，立即執(zhí)行beforeDestroy，一般在這里做一些善后工作，例如清除計時器、清除非指令綁定的事件等等(比如你確認(rèn)刪除XX嗎?)
destroyed ：當(dāng)前組件已被刪除，清空相關(guān)內(nèi)容
10.vue中綁定class的方法
https://blog.csdn.net/qq_38093702/article/details/81205370
綁定style的方法
<img :src="logo" :style="{'display':isShowImg==true?'block':'none'}" />
11.調(diào)接口時記住做異常處理判斷
12.vue的路由傳參，子頁面刷新保證參數(shù)不丟失
1.使用query:
this.$router.push({ path: '/NewsDetail', query: { newsUrl: url } })
2.在路由配置頁面配置好，然后可以用params方法傳
routes: [ { path: '/list/:id', name: 'list' } ]
this.$router.push({name:'list', params:{id: id}});
13. ...mapGetters(vuex)
// 使用對象展開運算符將 getter 混入 computed 對象中
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
14. checkbox：true-label
true-label,false-label規(guī)定v-modle的值。
如true-label="a",false-label="b"。 v-modle="data"
當(dāng)選中時data為a，當(dāng)沒選中時data為b
15.微信小程序和vue的雙向數(shù)據(jù)綁定有什么區(qū)別
http://www.cnblogs.com/zhangruiqi/p/9412948.html
以上內(nèi)容僅供參考，有錯誤的地方還請多多指教
