平常工做知識點集合之vue(一)

時間 2019-11-09

標籤平常知識點集合 vue 简体版

原文原文鏈接

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是否顯示，在哪一個地方顯示的。html

具名slot

元素能夠用一個特殊的屬性 name 來配置如何分發內容。多個 slot 能夠有不一樣的名字。vue

使用：（1）父組件要在分發的標籤中添加屬性"slot=name名"算法

（2）子組件在對應分發位置上的slot標籤添加屬性"name=name名"vuex

代碼以下：element-ui

<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多加了個nativeapi

關於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的方法

blog.csdn.net/qq_38093702…

綁定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

16.微信小程序和vue的雙向數據綁定有什麼區別

www.cnblogs.com/zhangruiqi/…

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。