1,網頁佈局:使用ElementUI外掛:
安裝elementui npm/cnpm i element-ui -S/–save;
在main.js程式入口檔案中完整引入elementui:
import ElementUI from ‘element-ui’;
import ‘element-ui/lib/theme-chalk/index.css’;
使用它: Vue.use(ElementUI)

將登入頁面寫過來:點選登入，請求資料，處理資料,獲取到token，有token，進入首頁

使用axios：
1.npm install axios --save
2.在main.js中引入 import Axios from ‘axios’
Vue.prototype.KaTeX parse error: Expected '}', got 'EOF' at end of input: …{ this.axios.get(‘url’).then(res => {console.log(res.data)}).catch(error => {})
}

#寫頭部，引入elementui:

//完整引入餓了麼UI：在需要使用到的vue專案目錄下，使用npm下載安裝： npm/cnpm i element-ui -S/–save
// 在程式入口檔案main.js【完整】引入餓了麼UI
import ElementUI from ‘element-ui’;
import ‘element-ui/lib/theme-chalk/index.css’;
Vue.use(ElementUI);

建立cookie，儲存資料到cookie的教程：
1,在src新建一個資料夾，生成一個cookie.js檔案：用來封裝cookie的set get方法
2.在登入頁面引入：import {setCookie,getCookie} from ‘@/utils/cookie.js’ 使用set get方法 儲存資料給cookie，取資料

設定攔截器：
1 路由攔截: 在需要進行登入驗證的路由設定meta: {requireAuth:true}
利用vue-router提供的鉤子函式beforeEach()對路由進行判斷 寫在路由入口檔案
2 axios攔截器—在路由攔截中，只要需要登入驗證並且token存在就可以進入首頁，如果token失效了但它依然存在，也可以進入首頁，不允許這樣的情況出現，所以需要axios攔截。
如果token存在就把token寫進請求頭【相當於將token狀態傳送給後臺】，後臺會給返回值告訴前臺token是否失效，如果失效就回去登入
寫在http.js

#iview的使用：
1 npm install iview --save
2 為了統一iview標籤的書寫規範，安裝iview loader npm install iview-loader --save
3 在main.js中引用並註冊iview:
import iView from ‘iview’;
import ‘iview/dist/styles/iview.css’;
Vue.use(iView)
4 修改webpack配置：
rules: [
…(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /.vueKaTeX parse error: Expected 'EOF', got '}' at position 234: … ] }̲, { t…/,
loader: ‘babel-loader’,
include: [resolve(‘src’), resolve(‘test’), resolve(‘node_modules/webpack-dev-server/client’)]
}

container放可以複用的元件；
components放首頁等頁面；
view放登入註冊錯誤頁面；

#使用vant：
安裝
==== 通過 npm 安裝
npm i vant -S
=======引入元件 自動按需引入元件 (推薦)
babel-plugin-import 是一款 babel 外掛，它會在編譯過程中將 import 的寫法自動轉換為按需
引入的方式 安裝外掛:
npm i babel-plugin-import -D
=====在 babel.config.js 中配置
module.exports = {
plugins: [
[‘import’, {
libraryName: ‘vant’,
libraryDirectory: ‘es’,
style: true
}, ‘vant’]
]
};
======== 接著你可以在程式碼中直接引入 Vant 元件
// 外掛會自動將程式碼轉化為方式二中的按需引入形式
import { Button } from ‘vant’;

在方法中引用輕提示：
function () {
this.$toast({
message:‘登入成功’,
})
}
#接入程式碼報錯，Module build failed 原因是package.json的依賴問題—“babel-plugin-import”: “^1.12.2”,
解決方法： cmd定位到專案根目錄，vue ui安裝babel-plugin-import依賴 再重啟專案npm run serve
E:\自學程式碼\VUE\companypro\permissionsys>vue ui
? Starting GUI…
? Ready on http://localhost:8000

https://blog.csdn.net/xxxxxxxxYZ/article/details/98039393 以上問題解決的方法參考

#列表和選單結合的思路 https://blog.csdn.net/caimaomaocai/article/details/83184965

#渲染選單介面資料 遇到選單名稱顯示不出來的問題的解決辦法： label

#vuex安裝和使用
#store中 state用來儲存資料，在子元件中使用this.KaTeX parse error: Expected 'EOF', got '#' at position 55: …易出錯，也不符合vuex原理 #̲在mutations中修改st…store.commit(‘方法名稱’，唯一的一個引數)】，
#getters只負責向呼叫者提供資料 $store.getters.方法名
1，npm i vuex -S
2.在main.js匯入包 import Vuex from ‘vuex’
3.在main.js註冊vuex到vue中: Vue.use(Vuex)
4.在main.js 中new一個vuex例項，得到一個資料倉儲物件
const store = new Vuex.Store({ //每個應用只有一個store例項，包含了全部的應用層級狀態，單一狀態樹
state: { //儲存資料 這裡儲存的資料，可以全域性使用，所有元件都可以使用 KaTeX parse error: Expected 'EOF', got '}' at position 34: … count: 0 }̲, mutations: …store.commit(‘方法名’)
state.count++;
}
},
getters: { //只負責對外提供資料，不負責修改資料 KaTeX parse error: Expected 'EOF', got '}' at position 191: …unt // } }̲ }) 5，把store掛載到…store訪問到
new Vue({
router,
store,
render: h => h(App)
}).$mount(’#app’)

#this.$emit(‘父元件中的方法名’)

#nginx配置，解決跨域問題：
1.安裝nginx，解壓到無中文名的路徑，start nginx啟動 修改nginx.conf配置檔案，nginx.exe -s reload重啟，localhost開啟頁面顯示welcome to nginx 或者人去管理器檢視程式有nginx說明啟動成功。
2.在根目錄新建vue.config.js檔案，遍歷配置資訊 儲存檔案重啟專案
module.exports = {
runtimeCompiler: true,
devServer: {
port: 8080,
host:“127.0.0.1”,
open:true,
proxy: {
     ‘/api’: { //請求的介面地址是以/api開頭的，就會走該代理
// ws:false,
          target: ‘http://192.168.91.4:8088/pms’, //後端介面地址
secure: false, //如果是https介面，需要配置這個引數
          changeOrigin: true, //是否允許跨越
          pathRewrite: { //重寫
            ‘^/api’: ‘api’ 
          }
        }
},
}
}
https://blog.csdn.net/weixin_44086376/article/details/89483362

#axios如何設定同步請求，async+await 從介面獲取到的資料為promise,怎麼轉成字串或陣列，如何使用promise來處理呼叫成功後的回撥，promise解決回撥地獄問題

#watch:{ //在watch不應該使用箭頭函式，因為箭頭函式繫結了父級作用域的上下文
//1 當值發生改變時觸發 監聽data資料的變化
//2 監聽非dom元素的變化，比如監聽路由地址的變化 this.$route.path/{/}^{\prime }$store.state.count’: function() {
// console.log(‘監聽到了count屬性值的變化’)
// },
// ‘$route.path’: function(newVal, oldVal) {
// // console.log(‘new: %s, old: %s’,val,oldval)
// // if(newVal===’/index’) {
// // console.log(‘當前是首頁’)
// // }
// console.log(newVal+’-----’+oldVal)
// },
// treedata: {
// function(newVal, oldVal) {
// alert(‘輸出介面資料===========’);
// this.treedata = newVal;
// console.log(this.treedata+oldVal);
// },
// immediate: true, //表示在watch裡宣告瞭treedata就會立即執行裡面的handler方法
// }
},

#computed: { //計算屬性 本質上是方法，但直接把名稱當成屬性來使用，不會當成方法去呼叫
//1 計算屬性在引用的時候直接引用名稱，不要加（）
//2 只要計算屬性function內部用到了data中的資料並且資料發生變化，就一定會重新計算該計算屬性的值
//3 計算屬性的求值結果會被快取起來，方便下次直接使用；
//4 在計算屬性內部的函式，都需要return一個值，在watch中不需要return
},

#// this.$axios(//method{:}^{\prime }ge{t}^{\prime },////url{:}^{\prime }http://192.168.91.4:8088/pms/Resource/getResourceTre{e}^{\prime },//url{:}^{\prime }http://192.168.91.4:8088/pms/Resource/getMenuPe{r}^{\prime },//headers://"Content-Type":"application/x-www-form-urlencoded;charset=utf-8"////)//.then(res=>//請求發送成功的操作////alert{(}^{\prime }請求發送成{功}^{\prime })////獲取到接口數據////console.log("=====請求菜單接口成功拿到的接口數據======")//console.log(res.data);//if(res.data{[}^{\prime }cod{e}^{\prime }]==1)//如果code1說明有權限並且能成功拿到數據//this.treedata=res.data.data//console.log("2")////console.log("=====獲取到的接口數據======")////console.log(this.treedata)////else//登錄失敗，彈出錯誤提示////alert(data{[}^{\prime }messag{e}^{\prime }]);////)//.catch(error=>//請求發送失敗的操作////alert{(}^{\prime }請求發送失{敗}^{\prime })//console.log(error);//);//this.$axios({ //獲取list介面
// method: ‘get’,
// // url:‘http://192.168.91.4:8088/pms/Resource/getResourceTree’,
// url:‘http://192.168.91.4:8088/pms/Resource/getResourceTree’,
// headers: {
// “Content-Type”: “application/x-www-form-urlencoded;charset=utf-8”
// }
// })
// .then(res => {
// console.log(res.data);
// if(res.data[‘code’] == 1) { //如果code1說明有許可權並且能成功拿到資料
// this.listdata = res.data.data
// }
// else { //登入失敗，彈出錯誤提示
// // alert(data[‘message’]);
// }
// })
// .catch(error => { // 請求傳送失敗的操作
// // alert(‘請求傳送失敗’)
// console.log(error);
// })

#迴圈渲染elementui的列表 https://www.cnblogs.com/layaling/p/10962858.html

#elementui樹型控制元件的點選事件 @node-click=“handleNodeClick”
節點被點選時，會回撥資料。共三個引數，依次為：傳遞給 data 屬性的陣列中該節點所對應的物件、節點對應的 Node、節點元件本身。
handleNodeClick(data) { //點選節點，獲取到節點的子節點資料並將資料傳給boddy–>content–>list
alert(“點選事件觸發了”);
console.log(data); //data為元件自帶的函式的返回值，返回當前節點資料
}

#父元件向子元件傳值：
父元件中：<子元件 v-bind:data=“data” />
子元件中：props: [‘data’]

#子元件向父元件中傳值：
1 原理：父元件將方法的引用，傳遞到子元件內部，子元件在內部呼叫父元件傳遞過來的方法，同時把要傳送給父元件的資料，在呼叫方法的時候當作引數傳遞進去；
2 父元件將方法的引用傳遞給子元件，其中，getMsg是父元件中methods中定義的方法名稱，func是子元件呼叫傳遞過來方法時候的方法名稱

在父元件中：
<子元件 @func=“getData” />
getData(data) { //拿到子元件傳遞過來的值
this.sondata = data;
}
在子元件中：
通過this.$emit(‘func’,要傳遞的資料)的方式來呼叫父元件的getData方法，同時把資料傳遞給父元件

#物件轉陣列：
{“accountfor”:“註冊資源”} =====> [{“accountfor”: “註冊資源”}]
var arr = [];
arr.push(需要轉陣列的資料);
sondata = arr; //將陣列賦值給sondata

#vue中對陣列的遞迴寫法：
為了實現點選樹選單，將相應的子節點資料和當前節點資料顯示在列表。遞迴遍歷多維陣列並解析成一維陣列
parseArr: function(arr,res){ //陣列扁平化，遞迴多維陣列成一維陣列顯示
for(var i=0;i<arr.length;i++){
res.push(arr[i]);
if(arr[i].children){ //如果當前元素是陣列
this.parseArr(arr[i].children,res);
}else{
res.push(arr[i]);
}
}
},

#this獲取props資料輸出物件為空的解決方法；
將資料在watch中監聽：
watch: {
treedata(newVal) { //拿到treedata所有資料，扁平化傳給list
var listdata = newVal;//把資料給到listdata
var array = [];
array.push(listdata); //把listdata轉陣列
var arrdata = [];
this.parseArr(listdata,arrdata); //遞迴listdata資料並將新生成的一維陣列賦值給arrdata
listdata = arrdata;
this.$emit(‘func’,listdata); //將listdata傳給父元件 父元件種使用sondata來接收這個資料
}
},

#釘釘掃碼登入

#獲取路徑中的引數
getQueryString:function(name) {
var reg = new RegExp(’(^|&)’ + name + ‘=([^&]*)(&|$)’, ‘i’);
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
}

#在index.vue設定掃碼登入的token
created() {
var tok=this.getQueryString(‘token’);
console.log(this.getQueryString(‘token’));
if(tok!null&&tok!’’) {
setCookie(“X-Access-Token”,this.getQueryString(‘token’),10006030);
}
},
methods: {
getQueryString:function(name) {
var reg = new RegExp(’(^|&)’ + name + ‘=([^&]*)(&|$)’, ‘i’);
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
}
}

#不可以超過十五個字元的正則/¹{2,15}KaTeX parse error: Expected 'EOF', got '#' at position 3: / #̲必須是中文且不超過15字的正則…/,

#彈框巢狀表單
點選獲取資料，處理資料，提交給介面傳參

#vue資料vue的[ob: Observer]轉字串 JSON.stringify()
#字串轉數字 parseInt()

#點選當前行獲取當前許可權id
rowClick(rowIndex){ //點選後的當前行
console.log(‘點選高亮’);
this.id=rowIndex.id;//點選獲取當前許可權的id
},

#列表點選當前行高亮：
/當前行選中狀態下高亮，需要和highlight-current-row="true"配合使用，否則無效/
.el-table–striped .el-table__botr.el-table__row–striped.current-row td,
.el-table__body tr.current-row > td {
background-color: #2aca76 !important;
}

#在圖示元件中的點選事件，由於列表的每一行都有圖示元件，所以一個圖示的點選事件會觸發所有行的圖示事件。解決方法是，在圖示元件中初定義方法，在父元件中的當前行的點選事件中重寫方法。
1，在父元件中重寫方法，在父元件中的子元件標籤新增ref
https://blog.csdn.net/byfate/article/details/90681625
<iconact_pool ref=“myinterface” />
2,在父元件的事件中重寫方法：我要在當前行的點選事件中重寫
rowClick(row,event,column){
this.$refs.myinterface.del=function() {

}
}
3.在父元件的事件中呼叫方法，this.$refs.myinterface.del();

#在列表中重寫圖示元件中的方法， 點選當前行觸發方法，雖然可以避免點選圖示觸發所有行的圖示事件，但是卻導致，點選當前行的任意位置，都會呼叫刪除圖示的事件.思路是，在父元件中定義一個點選刪除圖示的觸發事件，將重寫的刪除事件在此處引用【無法憑空定義一個觸發事件，需要將事件繫結到元素上，在當前行使用插槽，在插槽內新增元素，並繫結方法，當點選該元素的時候觸發方法，在該方法內引用子元件的刪除事件。這樣的話，需要在插槽中寫三個按鈕，在list寫三個方法，分別引用子元件的三個方法。而且這三個元素不應該顯示出來被看到，那麼就無法實現點選。所以有了思路2】。思路2是===將圖示操作提到和列表元件同級顯示，直接通過圖示的點選事件去觸發事件。得到解決。【但是許可權維護的彈框沒有顯示，並且，如何實現點選編輯圖示後，當前行由只讀屬性變為可編輯屬性，外掛中暫未找到相似的屬性；這樣的顯示方式，就不需要當前行的事件獲取id並傳值，圖示的事件可以直接獲取到當前行的所有資料，可以直接對資料進行處理並請求】
https://www.cnblogs.com/shj-com/p/8779965.html

<el-button id=“btn3” slot=“reference” @click=“del(scope.row)”>

del(row) {
console.log(row.id)
}

#傳參時請求頭出現content-type為text/plain的問題 修改post請求頭的content-type？？資料不進行stringify轉換，請求頭資料格式預設是json也不用設定，設定不設定都沒影響
https://blog.csdn.net/weixin_40402192/article/details/83178442
引數轉換寫在axios前面。請求頭設定在攔截器裡，然後在後面的所有請求介面都不需要設定請求頭了

#嘗試設定樹選單的最大高度與列表最大高度一致，未找到類似屬性，js操作dom去改變？？

#重寫後的許可權池列表，將圖示寫在插槽，popover彈框無效？？

#https://www.jianshu.com/p/53deecb09077
get請求傳參用params,delete用data

#角色管理的列表請求 資料返回引數為空 新增請求
角色新增成功後為什麼返回資料為空 傳參頁碼返回資料也為空
列表請求與新增請求同時觸發的問題

#許可權池的編輯，搜尋，角色管理的列表，都待完善。

#插槽裡使用插槽的踩坑

#所有get沒有content-type屬性，使用params接收引數，會自動轉換資料格式，不需要手動stringify post需要轉，有請求頭設定

https://www.cnblogs.com/weijiutao/p/10956808.html
#點選編輯當前行
https://blog.csdn.net/u013466380/article/details/84941658

#點選編輯，通過當前行的點選事件拿到當前許可權的id和許可權名，傳給彈框巢狀表單，id需要傳給介面，許可權名需要在彈框顯示 實現

#popover彈框的取消操作
第一步在彈框加入：:ref="popover-${scope.$index}"
第二步在取消按鈕新增點選事件：@click=“cancel(scope)”
第三步：
cancel(scope) {//點選取消關閉彈框
this.$toast(//權限查看的取消操作message{:}^{\prime }已取{消}^{\prime },)scope{.}_{s}elf.$refs[popover-${scope.$index}].doClose();
},

#檔案之間傳遞資料
一個msg.js檔案：
import Vue from ‘vue’
export default new Vue
傳遞資料：
Msg.$emit{(}^{\prime }函數{名}^{\prime },data)接收數據：Msg.$on(‘函式名’,res=>{})

#設定日期選擇器在最上面顯示

.hh{
z-index:999!important;
top:188px!important;
}

#控制彈框的關閉
方法一：只能關閉一個彈框
:ref="popover-${scope.$index}"
@click=“close(scope)”
cancel(scope) {//點選取消關閉彈框
this.$toast(//權限查看的取消操作message{:}^{\prime }已取{消}^{\prime },)scope{.}_{s}elf.$refs[popover-${scope.$index}].doClose();
},
方法二：可以關閉多個彈框 多個彈框的關閉事件的關鍵在於==:ref="popover--“中``裡面的內容不能重複
1 :ref=”popover--"
2 @click=“cancel()”
3 close() {
this.$refs[popover--].doClose();
}
4 cancel() {
this.close();
}

#重新整理當前頁面，區域性重新整理：
1.在父頁面：

export default{
provide() {
return {
reload:this.reload
};
},
data(){
return {
isRouterAlive:true
}
},
methods:{
reload() {
this.isRouterAlive = false;
this.$nextTick(function() {
this.isRouterAlive = true;
})
}
}
}
2.在需要重新整理的子頁面:
export default{
inject:[‘reload’], //匯入reload
}
3.在需要執行的地方直接呼叫 this.reload()

#當列表中每一行都有下拉框時，如何給每個下拉框都傳應用程式資料 目前只能給第一行的下拉框傳值，其他行拿不到資料

#使用v-if新增和刪除元件 https://www.jianshu.com/p/4c5bdd3b323e

Vue.component(‘HelloWorld’, {
template: ‘#helloworld’,
created() {
console.log(‘helloworld created!’)
},
destroyed() {
console.log(‘helloworld destroyed!’)
},
})
var app = new Vue({
el: ‘#app’,
data: {
showHelloWorld: true
}
})

#點選模組級核取方塊動態建立刪除元件 或者動態建立刪除html 給每個核取方塊都繫結showCheck屬性,showCheck控制html的顯示隱藏
給每個核取方塊繫結V-bind:showCheck
<el-checkbox-group v-model=“checkedCities” @change=“CheckedCitiesChange”>
<el-checkbox v-bind:showCheck=“true” style=“margin-right: 40px;margin-top: 20px;” v-for=“city in cities” :label=“city” :key=“city.accountfor” @change=“handleCheckedCitiesChange(city)”>{{city.accountfor}}

給html盒子通過v-if判斷顯隱

#v-for 迴圈動態繫結資料 v-model繫結
https://blog.csdn.net/weixin_44724060/article/details/88146731

{{value.accountfor}}-{{index}}
{{value}}

<!-- <checkboxes v-if="showCheck" :key="city.ischecked" :checkedCities="checkedCiti> -->

#元素的屬性繫結以及html的繫結
https://www.jianshu.com/p/fee0104eadc5

#元件的繫結建立和刪除
// Vue.component(‘checkboxes’,{
// template:’#checkboxes’,
// created() {
// console.log(‘checkboxes created’);
// },
// destroyed() {
// console.log(‘checkboxes destoryed’);
// },
// })

v-bind:showCheck=“true”

#v-for 巢狀v-for的v-model屬性繫結問題
https://blog.csdn.net/qq_40101922/article/details/82347632

#當在元件中使用v-for的時候,key屬性是必需的

#https://www.cnblogs.com/yysbolg/p/9876276.html v-model在input的用法

#el-checkbox的一些坑 https://blog.csdn.net/qq_33769914/article/details/81324267?utm_source=blogxgwz0

#天氣外掛 http://tianqi.2345.com/plugin/setting.htm?style=classicSmall3day

#彈框位置和偏移量

#:modal-append-to-body=“false” 讓dialog在最上層顯示

#:close-on-click-modal=“false” 點選彈出層以外區域時阻止彈框關閉

#color=“transparent” 設定顏色透明

#判斷陣列中是否包含某值
arr.indexOf(data) 如果存在data就會返回data的索引 如果不存在就會返回-1
https://www.cnblogs.com/zzsdream/p/11592309.html
if(ids.indexOf(config)!==-1){//如果屬於子資料

#深拷貝淺拷貝
https://juejin.im/post/5b5dcf8351882519790c9a2e#heading-2
JSON.parse(JSON.stringify(arr));深拷貝物件 要求arr中不能包含函式物件，因為此方法不能處理函式，如果使用這個方法拷貝帶有函式的資料會造成備份資料的函式部分丟失 這樣賦值處理的資料不會影響其他資料

#localStorage
儲存:window.localStorage.setItem(‘key’,JSON.stringify(Object));
讀取：window.localStorage.getItem(‘key’);
刪除：window.localStorage.removeItem(‘key’);
清空：window.localStorage.clear();

#el-checkbox文字和核取方塊的點選事件分開觸發
<el-checkbox :indeterminate=“app.isIndeterminate” v-bind:checkAll=“app.checkAll” v-model=“app.checkAll” :label=“app” :key=“app.id” @change=“checkornot(app)”>

#巢狀迴圈，內層迴圈不執行的問題
foreach 不需要迴圈條件直接一個個遍歷出所有資料，最好不要通過foreach對資料進行處理，remove/add或者修改資料。當使用foreach來迭代訪問陣列元素時，foreach中的迴圈變數相當於一個臨時變數，系統會把陣列元素依次賦給這個臨時變數，而這個臨時變數並不是陣列元素，它只是儲存了陣列元素的值。因此，如果希望改變陣列元素的值，則不能使用這種 foreach 迴圈。https://blog.csdn.net/sx_while/article/details/89299397?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

#陣列去重總結 https://juejin.im/post/5b041fa4f265da0b722b774b

#prototype Array.prototype

#https://github.com/sunyongjian/blog/issues/18 迴圈總結 迭代器
forEach用來遍歷陣列==簡潔，但不能中斷跳出迴圈；
for(var key in obj) 用來遍歷物件/陣列（可以遍歷，不適用），可以獲取物件的Key值，只能提取key，value值需要obj[key]訪問；
for(var item of arr) 用來遍歷集合型別和字串，但是物件不行；
http://gaoupon.github.io/2016/08/04/ES6-Iterator/

#el-tree讓父子節點之間不關聯
check-strictly true互不關聯，只會改變當前節點的勾選狀態/false父子節點之間關聯，父節點勾選，子節點一定會勾選，子節點勾選，父節點也會勾選

#陣列合並
concat() 連線多個陣列，生成新陣列，原陣列不會改變—效率低，記憶體浪費
for迴圈 效能高，但會改變陣列本身的值
map() 效能高，會改變陣列本身的值
apply() arr1.push.apply(arr1,arr2) 遍歷arr2，push合併，會改變陣列本身的值

#陣列遍歷並刪除自己
有效方式：使用for(var i = 0 ;i < arr.length;i++){
if(){
arr.splice(i,1);
i–;//如果不改變下標，將會漏掉一個元素 為什麼呢？
}
}

#將物件轉陣列
let arr = [];
for(let i in data){//將物件轉陣列
this.$set(arr,i,data[i]);
}
console.log(arr);

#@click.native 給子元件繫結原生事件，當父元件引入子元件後，如果要觸發子元件的點選事件，直接使用@click不會觸發事件，需要@click.native才會觸發 相當於把子元件中的方法傳給父元件讓父元件中可以觸發 如果給router-link新增事件的話，需要新增.native，事件才會觸發！
當用了封裝元件的話，使用按鍵修飾符需要新增.native才會觸發

#@click.prevent 阻止事件的預設行為
<a href=“http://www.baidu.com” @click.prevent=“test4”>百度一下 //阻止a標籤跳轉，僅執行函式test4()

#@click.stop 阻止事件冒泡

#@click.self 事件觸發時判斷是否是self

#@keyup.enter 鍵盤按下enter鍵時觸發
<input type=“text” @keyup.enter=“test7()”>

#強制對屬性重新賦值/動態修改物件的屬性值 value.checked = !value.checked; 容易遇到坑，有時候可以賦值，有時候不行 ，為什麼，怎麼解決。？？？

#自動重新整理頁面，區域性重新整理頁面 https://www.jb51.net/article/14397.htm

#js實現螢幕自適應
window.onload = function () { //載入頁面的時候就執行 螢幕自適應
var tensor_obj = document.getElementById(“login”); //根據ID獲取html元素
var heigth_screen = window.screen.height; //獲取整個螢幕的解析度
var width_screen = window.screen.width;
// heigth_screen = heigth_screen * 0.85; //在這裡分配整個介面的85%給iframe來顯示巢狀的介面
tensor_obj.style.height = heigth_screen + “px”;
// width_screen = width_screen * 0.85;
tensor_obj.style.width = width_screen + “px”;
}

v-bind:style=" {height:fullHeight+‘px’,width:fullWidth+‘px’}"
mounted() {
this.fullHeight=document.documentElement.clientHeight;
this.fullWidth=document.documentElement.clientWidth;
},

#js程式碼執行順序
https://www.jb51.net/article/127025.htm

#跨域問題 為什麼會產生跨域 什麼是跨域 跨域的種類有哪些 分別會造成什麼影響 分別需要怎麼解決 多瞭解方法 爭取找到最優解
https://www.cnblogs.com/yongshaoye/p/7423881.html

#html將圖片轉base64
https://www.sojson.com/image2base64.html

#js物件賦值的問題 深拷貝淺拷貝問題 賦值不成功/ 賦值影響原始資料/賦值丟失資料 /賦值改變資料型別等？
https://blog.csdn.net/weixin_33699914/article/details/88624156

#背景圖片大小螢幕自適應
https://www.cnblogs.com/xjd-6/p/10931061.html

background: url(’…/assets/app.jpg’) no-repeat;
/* 讓整個div固定在螢幕的最上方和最左方*/
position: fixed;
top: 0;
left: 0;
/* 讓整個div跟螢幕大小尺寸一樣 /
width: 100%;
height: 100%;
/ 讓div層級在最下面 /
z-index: -10;
zoom: 1;
/ 讓圖片隨螢幕大小同步縮放 /
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
/ chrom/opera相容 */
background-position: center 0 ;

#區域性高度自適應 比如頁面內的列表高度隨著螢幕大小自適應寬高

#清除路徑上的引數
https://blog.csdn.net/qq_38906555/article/details/82688586
let url = window.location.href;//當前頁面路徑 http://hcfasys.cn:9090/home?token=…
// let urlparams = window.location.search.substr(1);//頁面引數 token=…
let beforeurl = url.substr(0,url.indexOf(’?’));//頁面主地址，引數之前的地址 http://hcfasys.cn:9090/home
url = beforeurl;
// let arr = new Array();
// if (urlparams != “”) {
// let urlParams = urlparams.split("&"); //將引數按照&符分成陣列
// for (let i = 0; i < urlParams.length; i++) {
// let paramArr = urlParams[i].split("="); //將引數鍵，值拆開
// //如果鍵雨要刪除的不一致，則加入到引數中
// if (paramArr[0] != paramKey) {
// arr.push(urlParamArr[i]);
// }
// }
// }
// if (arr.length > 0) {
// nextUrl = “?” + arr.join("&");
// }
// url = beforeUrl + nextUrl;
// return url;

#el-tree 橫向縱向滾動條
https://www.wandouip.com/t5i392382/

#判斷兩個陣列是否相等
https://www.jb51.net/article/174012.htm
JSON.stringify(arr1)==JSON.stringify(arr2)
1,如果兩個陣列型別相同，排序相同，JSON.stringify會相等；
2，如果兩個陣列型別不同，排序相同，用toString結果相等；
3，如果兩個陣列排序不同，型別相同，sort()從大到小排序，再JSON.stringify，結果相等；

#js如何讓鍵盤迴車事件只在當前頁面時觸發，假如一個專案中的多個頁面有多個不同的回車事件呢？

#this.$route和this.$router的區別
https://blog.csdn.net/u014395524/article/details/88194842?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

#讓回車事件只在當前頁面生效。
1，通過this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …nsole.log(that.router);
// console.log(that.$route);//leturl=that.$route.path;
// if(url==’/role’){//如果當前路徑是login_user，就執行回車登入
// console.log(‘role’);
// that.onSubmit();//如果輸入搜尋條件後沒有移除游標，回車會全域性重新整理，需要阻止el-form的全域性重新整理
// }
// }
// }
2，將事件繫結在DOM元素上：
----@submit.native.prevent寫在el-form上，阻止表單的預設行為（預設重新整理);
<el-form ref=“form” :model=“form” label-width=“190px” @submit.native.prevent>
--------在input上繫結回車事件，@keyup.enter.native=“onSubmit” ，加native表示阻止input的預設行為（預設回車全域性重新整理），並回車觸發onSubmit事件
<el-input placeholder=“請輸入角色名稱” v-model=“form.accountfor” style=“width: 100%;” @keyup.enter.native=“onSubmit”>
------在button繫結點選事件，@click=“onSubmit”
<el-button type=“danger” icon=“el-icon-search” circle @click=“onSubmit” >
這樣就能實現：在相應頁面觸發相應的回車事件，互不影響，並且不會發生表單或者input框的預設回車全域性重新整理問題。

#js物件轉陣列
https://www.cnblogs.com/ll15888/p/11993334.html

#el-tree使用default-checked-keys屬性，通過一個id陣列賦值，設定樹的核取方塊勾選狀態。但刪除選中狀態的話，清空陣列是無效的。陣列的資料被刪除無法直接反應在核取方塊取消勾選上。使用元件提供的this.$refs.tree.setCheckedKeys([]);來取消勾選this.$nextTick() dom更新之後再執行回撥

#路由守衛函式
https://www.jianshu.com/p/5107cb6c21e0

#van-tabs設定當前路由高亮必需是Number型別，否則設定無效

#字串轉陣列：

#字串轉布林：
// stringToBoolean: function(str) {//字串轉布林
// switch(str) {//toLowerCase把字串轉化寫
// case “true”: case “yes”: case"1":return true;
// case “false”: case “no”: case"0":case null: return false;
// default: return Boolean(str);
// }
// }

#模糊查詢，判斷一個字串中是否包含某個子字串
str.match(sonstr) 如果包含會返回資料，如果不包含會返回null

#清空頁面html元素 .remove() 或者隱藏hide() 通過document.getEle…呼叫

#子元件自適應容器高度，並設定最大高度，超出部分出現滾動條

#InfiniteScroll 無限滾動 elementui

#在建立一個Vue 3 的專案時，預設會給出兩個環境：
1、development（開發環境）：
對應的是 “serve”: “vue-cli-service serve”  ，也就是當執行 npm run serve  所執行的環境
2、production （釋出環境）：
對應的是 “build”: “vue-cli-service build”  ，也就是當執行 npm run build 所執行的環境

#Vue CLI 環境變數和模式 https://blog.csdn.net/qq_35366269/article/details/100334104

#解決頭像閃爍問題 ???

#Vue.prototype.方法名 = function() {}; 在main.js掛載全域性方法

https://blog.csdn.net/lwpoor123/article/details/85259614 vue使用axios傳送請求–Vue.prototype.$http = axios;

#el-tree改變懸浮樣式和選中狀態樣式

#el-table批量刪除
1.<el-table-column
type=“selection”
width=“55”

2.@selection-change="handleSelectionChange"繫結在table 3.handleSelectionChange(val) { this.selectedData = val; if(val.length!==0){//處理批量刪除按鈕是否禁用 this.disabled = false; }else{//如果沒有勾選，批量刪除按鈕需要禁用 this.disabled = true; } },

#el-table表格行號

#vue巢狀元件的生命週期 巢狀關係：A>B>C
https://juejin.im/post/5c80bd32518825407505f8bb

beforeCreate: Root
created: Root
beforeMount: Root
beforeCreate: A
created: A
beforeMount: A
beforeCreate: B
created: B
beforeMount: B
beforeCreate: C
created: C
beforeMount: C
mounted: C
mounted: B
mounted: A
mounted: Root
===beforeCreate、created、beforeMount是由外到內，由父到子，順序執行；
====mounted執行順序是由子到父。
所以如果子元件給父元件傳值的話，一定要在mounted傳遞資料。
如果父元件在created中接收，會存在先執行父元件的created再執行子元件的mounted或created，導致取不到值的問題。

destroyed====vue中生命週期的銷燬函式。例項銷燬後呼叫。常用來銷燬一些監聽事件和定時器。

#專案檔案結構
components放公用元件 多個地方都需要使用到的元件
container全都是重複的或者失效的或者暫時不需要的或者用來測試的元件
views存放各個模組的頁面資訊和登入註冊home等元件

#多個頁面共用同一個元件 方法一 在router-view裡新增key控制，這樣的弊端是如果router-view裡包含其他元件，切換其他元件會讓其他元件也重新渲染。這樣的問題是導致切換路由會閃爍一下。因為切換後所有鉤子函式都重新觸發了。
1.app.vue中 必須加上key屬性，讓每次進入路由時都重新觸發鉤子函式
computed: {
key() {
// 只要保證 key 唯一性就可以了，保證不同頁面的 key 不相同
// console.log(this.$route.fullPath);returnthis.$route.fullPath
}
},

2.在index.js檔案中： 讓多個路由共同同一個元件，保證path和name屬性具有唯一性 。
{
path: ‘/role’,
name: ‘role’, //角色
meta: {
requireAuth: true //表示該路由需要登入驗證後才能進入 在切換路徑跳轉路由之前作判斷
},
component: () => import(’@/views/policy/policy.vue’),
// children: [//新增和編輯使用同一個元件，但name必須不同。
// {path: ‘createrole’, component: form_role, name: ‘建立角色’},
// {path: ‘editrole’, component: form_role, name: ‘編輯角色’},
// ]
},
{
path: ‘/strategy’,
name: ‘strategy’, //策略
meta: {
requireAuth: true //表示該路由需要登入驗證後才能進入 在切換路徑跳轉路由之前作判斷
},
component: () => import(’@/views/policy/policy.vue’),
},

#多個頁面公用同一個元件時：通過以上方法，會讓router-view下的所有子元件都重新渲染，影響效能。還可以用第二種方法：通過監聽路由的變化，來重寫初始資料
參考 【https://www.dazhuanlan.com/2020/01/06/5e12c0b14066b/?cf_chl_captcha_tk=15752335c3e03d19df46231178225127e7dbb184-1588051351-0-AX69UpKqo9ice-NLT0mXfSRSbGP6hix_qGjzKbhdezY8rZXHgxUARbsX5rf5El9k0820ALN6sGcEsMPN1MNQVdBVolkWsu_XTFPJAZR5VYxPTJ75BjiAkzY89S-O_HWB_Ct-5q-CFalYsL4Qvpg7upyb2JkDnB0mEQW0VJPIjFWN2l2evj5eLmJfcKgyqM4GcE5ojEsGpSYsumYOo5GtI-Dez-iG5ip9CWxxOLYlEQaOPvkn48WVED78AuUgO7VHpZ6hW4fQR8k7fSH7-bGUcv9OmN7uhw9PGJtngsA1v4NDgYB_Dsbfl0FaN6it9yOAqyw0eprclySD8I8yiO5F6uKPG9qpMuxpo7cCbPtE3iaA】
//監聽$route的變化來初始化資料 當多個元件公用同一個元件時，切換路由不會重新觸發鉤子函式。可以通過監聽路由的方法或者router-view新增唯一key值的方法來重新觸發鉤子函式
1.
watch: {
KaTeX parse error: Expected 'EOF', got '}' at position 48: …Data', } }̲, 2. methods:{ …route.fullPath==’/strategy’||this.$route.fullPath==’/role’){
方法體
}
}

#el-tab-pane當切換標籤的時候如何重新觸發子元件的鉤子函式？
1：給每個子元件繫結一個isUpdata屬性，用來在點選切換的時候控制相應標籤頁元件是否重新渲染
<el-tabs v-model=“activeName” type=“card” @tab-click=“handleClick”>





</el-tab-pane

2.
return{
activeName: ‘role’,//根據使用者的點選,會自動改變activeName的值
isUpdatarole:false,
isUpdatastrategy:false
}
3.
methods: {
handleClick(){//控制點選tab時，讓子元件重新渲染
if(this.activeName == ‘role’){
this.isUpdatarole = true;
this.isUpdatastrategy = false;
}
else if(this.activeName == ‘policy’){
this.isUpdatarole = false;
this.isUpdatastrategy = true;
}
}
},

#router-link傳遞引數 https://blog.csdn.net/qq_35393869/article/details/80251099
1.
<i class=“el-icon-view” @click=“click(scope.row)”>
2.
// console.log(this.$route.query.url);//console.log(this.$route.query.id);

#this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …rams:{url:this.route.fullPath,id:row.id}});//this.$route.params.取值
https://blog.csdn.net/qq_40851816/article/details/80695124

#兄弟元件之間傳值 沒有直接的傳值方式，可以通過路由傳值，router-link傳值 this.$router.push傳值

#離開路由時執行的鉤子函式 【只有當使用keep-alive時才有效 不對 】這是頁面消失時執行的路由守衛函式 與mounted函式同級
deactivated:funtion() {
this.isshow = false;
}
},

#待所有資料全部請求完畢後，再渲染頁面，請求資料時頁面轉圈圈
方法一：表格等區域性內容區域載入
.el-table 載入

:data=“data”
v-loading=“loading”

2.return 中預設loading值 data() { return { loading: true, } } 3，獲取到資料後修改loading值

方法二：全屏頁面載入

1. v-loading.fullscreen.lock=“fullscreenLoading”
   注意，使用的是elementui的外掛，所以屬性應該寫在elememntui的元素上
   

2. data() { return { fullscreenLoading: true, } } 3.請求到資料後更改fullscreenLoading值

#進入當前路由之前的鉤子函式 beforeRouteEnter此時還沒有this 路由守衛
https://www.cnblogs.com/huihuihero/p/12133670.html
beforeRouteEnter(to, form, next) {
next()
},
beforeRouteEnter不能訪問this如何處理？
可以通過next回撥，通過vm訪問元件例項
beforeRouteEnter (to, from, next) {
next(vm => {
// beforeRouteENnter不能通過this訪問元件例項，但是可以通過 vm 訪問元件例項
console.log(vm.permidata) //vm.demodata即this.demodata
})
}

#路由監聽：
方法一：全域性監聽 所有路由發生切換時，都會觸發該監聽方法collect()
1.
watch:{
KaTeX parse error: Expected 'EOF', got '}' at position 39: …collect' } }̲, 2, methods: {…route":{
handler(route){
const that=this;
if(route.name==‘Hello’){
that.fetchData();
}
}
}
},
2,
methods: {
fetchData() {
有效程式碼段
},
}

#相容IE瀏覽器
1、 安裝外掛babel-polyfill 
【主要針對不相容ES6新語法的瀏覽器】
npm install --save-dev babel-polyfill   
2、在你的VUE專案的src目錄下找到main.js
新增下面一行程式碼：
import ‘babel-polyfill’
3.最後，重新開啟瀏覽器，應該就能相容開啟頁面了。

#相容問題考慮：
1 vue 只相容ie8以上版本；
2 IE 不相容 axios的promiss物件;
3 IE 不相容es6語法；
4 IE不支援sessionStorage
5 解決相容性問題：將ES6轉ES5
轉換語句：npm i babel-preset-es2015
並且在專案的根目錄下，修改.babelrc的內容，新增’es2015’

#解決瀏覽器相容性 IE
https://blog.csdn.net/qq_24985715/article/details/93764818?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.nonecase

#關於解決es6-promise在瀏覽器的相容性
1、說明：若在專案中使用了ES6 promise物件，它在Chrome、Safari瀏覽器下可以正常執行，但在360相容模式、IE核心中不支援；
2、安裝：npm install es6-promise；
3、配置：在main.js中加入require(‘es6-promise’).polyfill()，用於在node或瀏覽器中支援ES6 與CommonJS。

#事件代理/事件委託 捕獲/冒泡 https://www.jianshu.com/p/593ac34a3826
原理：利用事件冒泡，把事件監聽繫結到其父容器上
應用場景：頁面上又新增的元素，且新增的元素也需要繫結事件時。

#正則 判斷字元是否全是中文 form_pool
var isChinese = (rule, value, callback) => {
let regg = /²+$/;
if(!regg.test(value)){
callback(new Error(‘許可權名稱必須是中文’));
}else {
callback();
}
};

#html每個標籤都有title屬性

#npm install mockjs

在el-input輸入框中參入字首/字尾圖示

slot方式插入字首/字尾圖示：
或者

屬性方式插入字首/字尾圖示

---

1. \u4e00-\u9fffa-zA-Z ↩︎

2. \u4e00-\u9fa5 ↩︎