1.vue中element-ui實現的slot分發和route路由
<!--單個啟用 並以 index 作為 path 進行路由跳轉-->
<el-menu unique-opened router v-show="!collapsed">
<!--動態路由到子元件 將不可見的路徑隱藏-->
<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
<el-submenu :index="index+``" v-if="!item.leaf">
<!--用el ui 的title進行slot分發選單-->
<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分發其實就是父元件需要在子元件內放一些DOM，它就是負責這些DOM是否顯示，在哪個地方顯示的。
具名slot
元素可以用一個特殊的屬性 name 來配置如何分發內容。多個 slot 可以有不同的名字。
使用：（1）父元件要在分發的標籤中新增屬性”slot=name名”
（2）子元件在對應分發位置上的slot標籤新增屬性”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中設定管道
Object.keys(filters).forEach(k => Vue.filter(k, filters[k]))
複製程式碼Object.keys 返回一個所有元素為字串的陣列，其元素來自於從給定的object上面可直接列舉的屬性。這些屬性的順序與手動遍歷該物件屬性時的一致。
如果你想獲取一個物件的所有屬性,，甚至包括不可列舉的，請檢視Object.getOwnPropertyNames。
developer.mozilla.org/zh-CN/docs/…
3.反向代理呼叫api
env: require(`./dev.env`),
port: 8092,
autoOpenBrowser: true,
assetsSubDirectory: `static`,
assetsPublicPath: `/`,
proxyTable: {
`/bdc-xapi`: {
target: ``,
changeOrigin: true,
pathRewrite: {
`^/bdc-xapi`: `/`
}
},
},
複製程式碼4.token機制完成登入狀態保持/身份認證
www.jianshu.com/p/8d28e60af…
5.nextTick
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus();
});
複製程式碼this.$nextTick作用：在下次dom更新迴圈結束之後執行延遲迴調。在修改資料之後立即使用這個方法，獲得更新後的dom。
6.element-ui元件中方法呼叫問題
<el-input type="text" :placeholder="fileName" v-model="uploadForm.reNameTxt" @keyup.enter.native="reNameSuccess"></el-input>
複製程式碼@keyup.enter.native多加了個native
關於keyup.enter.native
blog.csdn.net/fifteen718/…
注意！！！如果用了封裝元件的話，比如element，這個時候使用按鍵修飾符需要加上.native
!!當一個 form 元素中只有一個輸入框時，在該輸入框中按下回車應提交該表單。如果希望阻止這一預設行為，可以在 標籤上新增 @submit.native.prevent ;
即@submit.native.prevent是用來阻止預設行為的 ;
7.el-upload元件中的action路由問題
action中寫呼叫介面的名字，可以手動上傳，取消自動上傳
（要研究一下路由怎麼寫）
8 vue中backgroundImage的寫法
<div class="img2" :style="{backgroundImage: `url(` + bg2 + `)` }"></div>
blog.csdn.net/qq_35393869…
9 研究一下vue的生命週期
beforecreate : el 和 data 並未初始化。這個時候，資料還沒有掛載呢，只是一個空殼，無法訪問到資料和真實的dom，一般不做操作（可以在這加個loading事件 ）
created ：完成了 data 資料的初始化，el沒有。（在這結束loading，還做一些初始化，實現函式自執行 ）
beforeMount：完成了 el 和 data 初始化。在這個函式中虛擬dom已經建立完成，馬上就要渲染,在這裡也可以更改資料，不會觸發updated，在這裡可以在渲染前最後一次更改資料的機會，不會觸發其他的鉤子函式，一般可以在這裡做初始資料的獲取
mounted ：完成掛載。資料、真實dom都已經處理好了,事件都已經掛載好了，可以在這裡操作真實dom等事情…
（在這發起後端請求，拿回資料，配合路由鉤子做一些事情）
beforeUpdate：當元件或例項的資料更改之後，會立即執行beforeUpdate，然後vue的虛擬dom機制會重新構建虛擬dom與上一次的虛擬dom樹利用diff演算法進行對比之後重新渲染，一般不做什麼事兒
updated：當更新完成後，執行updated，資料已經更改完成，dom也重新render完成，可以操作更新後的虛擬dom
beforeDestroy： 當經過某種途徑呼叫$destroy方法後，立即執行beforeDestroy，一般在這裡做一些善後工作，例如清除計時器、清除非指令繫結的事件等等(比如你確認刪除XX嗎?)
destroyed ：當前元件已被刪除，清空相關內容
10.vue中繫結class的方法
繫結style的方法
<img :src="logo" :style="{`display`:isShowImg==true?`block`:`none`}" />
11 upload元件上傳後，怎麼清除檔案？？
12 調介面時記住做異常處理判斷
13.vue的路由傳參，子頁面重新整理保證引數不丟失
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}});
14. …mapGetters(vuex)
// 使用物件展開運算子將 getter 混入 computed 物件中
...mapGetters([
`doneTodosCount`,
`anotherGetter`,
// ...
])
複製程式碼15. checkbox：true-label
true-label,false-label規定v-modle的值。
如true-label=”a”,false-label=”b”。 v-modle=”data”
當選中時data為a，當沒選中時data為b