Vue功能總結

1、點擊菜單展示隱藏-----與------點擊菜單外地方隱藏菜單

        <div v-on:click="toggle()" class="drop-entry"><i class="iconfont icon-sandian"></i></div>
        <div v-show="isShow" class="drop-down J_drop_down">
            <router-link to="/" class="drop-item">首頁</router-link>
            <router-link to="personal" class="drop-item">個人中心</router-link>
        </div>

    data() {
            return {
                isShow : false
            }
        },
        mounted() {
            let _this = this;
            document.addEventListener("click",function(e){
                //console.log(e.target)
                // 下面這句代碼是獲取 點擊的區域是否包含你的菜單，如果包含就返回true，說明點擊的是菜單以外，不包含就返回false則爲菜單以內
                let flag = e.target.contains(document.getElementsByClassName("J_drop_down")[0])
                if(!flag) return;
                _this.isShow = false;
                //注意，這裏不能直接this.isShow = !this.isShow; 要_this
            })
        },
        methods: {
            toggle: function(){
                this.isShow = !this.isShow; //改變data狀態達到顯示隱藏
            },
            goToPrev: function(){
                this.$router.go(-1)  //返回上一瀏覽頁面
            }
        }

<style>.drop-down{display: none}</style>

 

2、contains

在Java語言中，contains可以用於判斷str1是否包含str2

原生JS中是有contains方法的

但它並不是字符串方法，，僅用於判斷DOM元素的包含關係，參數是Element類型

 

 若要在JS中判斷倆字符串的包含關係，用indexOf()

 

3、v-if v-show

v-if是真實的條件渲染，因爲它會確保條件塊在切換當中適當地銷燬與重建條件塊內的事件監聽器和子組件。
v-if也是惰性的：如果在初始渲染時條件爲假，則什麼也不做——在條件第一次變爲真時纔開始局部編譯（編譯會被緩存起來）。
相比之下，v-show簡單得多——元素始終被編譯並保留，只是簡單地基於 CSS 切換。
一般來說，v-if有更高的切換消耗而v-show有更高的初始渲染消耗。因此，如果需要頻繁切換使用v-show較好，如果在運行時條件不大可能改變則使用v-if較好。

 

4、created  mounted

created:在模板渲染成html前調用，即通常初始化某些屬性值，然後再渲染成視圖。

mounted:在模板渲染成html後調用，通常是初始化頁面完成後，再對html的dom節點進行一些需要的操作。

通常created使用的次數多，而mounted通常是在一些插件的使用或者組件的使用中進行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常會有這一步，而如果你寫入組件中，你會發現在created中無法對chart進行一些初始化配置，一定要等這個html渲染完後纔可以進行，那麼mounted就是不二之選
 

5、Tab切換

方法一: 實現二級路由（三級路由同理）實現   不是返回真正的上一頁面，而是上一組件

//先導入

    import MapWrap from './components/Carrier/MapWrap/MapWrap.vue'
    import MapTravel from './components/Carrier/MapWrap/MapTravel.vue'
    import MapMating from './components/Carrier/MapWrap/MapMating.vue'

//配置路徑

    {path:"/map",component:MapWrap,redirect:"/map-travel",children:[
        {path:"/map-travel",component:MapTravel},
        {path:"/map-mating",component:MapMating}
    ]}

 

//模塊

<template>
    <section>
        <ul>
           <router-link to="map-travel" tag="li"><span>出行情況</span></router-link>
           <router-link to="map-mating" tag="li"><span>配套情況</span></router-link>
        </ul>
        <div class="tab-block active">
              <router-view></router-view>
        </div>
    </section>
</template>

搞定，但是如果此刻還有返回上一頁的按鈕的話就要使用tab切換的方式，這樣返回就會返回組件，

而不是返回真正的上一頁面。所以就要換一種tab切換方法

返回上一頁也可以用 this.$router.go(-1)

<a href="javascript:history.back(-1)" class="nav-bar-left"></a>

如果按照以上方法，會導致地址欄後暴露路由，顯然不是我們想要的，我想要的只是一個內部的tab切換

 

方法二: Tab切換之------------------v-show展示

(本方法：tab對應的選項卡只是普通文本，多用於展示性組件)

（地址路由不會展示在地址欄中，所以如果返回上一頁，就可以返回真正的上一頁而不是上一路由）

        <ul>
          <li class="li-tab" v-for="(item,index) in tabsParam"
            @click="toggleTabs(index)"
            :class="{active:index===nowIndex}">{{item}}
          </li>
        </ul>
      <!--切換項組件-->  
      <search v-show="nowIndex===0"></search>
      <location v-show="nowIndex===1"></location>

    data() {
          return {
                tabsParam:['搜索','地址'],
                nowIndex: 0,
                isShow: false
          }
      },
      methods: {
               //切換tab項
             toggleTabs(index){
                 this.nowIndex = index;
             }
      }

以上方法已經實現tab切換，但是這不是一個組件寫法。所以準備封裝

 

Tab切換組件封裝

地址欄中無路由名字，並且是一個tab封裝組件

效果圖：

需求

1. 簡易版
   tab對應的選項卡只是普通文本，多用於展示性組件
2. 複雜版
   tab對應的選項卡包括表格，按鈕，圖標，表單等多種元素，包括數據交互、與父組件的通信等
3. 性能優化
   切換tab時，緩存組件

方案

• Prop
  父組件向子組件傳遞參數
  tabList(tabs標題列表)、tabIndex(當前的tab序號)
• 自定義事件
  切換tab事件
• slot
  內容分發
• 動態組件
  keep-alive：如果把切換出去的組件保留在內存中，可以保留它的狀態或避免重新渲染

 

複雜化

如果是第一種需求，可以不必自己寫組件，UI框架中現有的功能完全可以滿足需求。

如果是第二種需求，一般沒有完全合適的UI組件，而本例是一種解決方案。

• 封裝tab公共部分
• tab對應的內容區域使用slot內容分發
• ajax請求數據等操作是在分發內容組件中執行的
• 鉤子函數activated
  通過activated監聽組件是否激活

實現

新建組件

main.js或者路由文件裏面引入並註冊
import MyTab from './components/Tab/MyTab.vue'
import EnterpriseUser from './components/Tab/UserTab/EnterpriseUser.vue'
import GovernmentPark from './components/Tab/UserTab/GovernmentPark.vue'

    {path:"/my-tab",component:MyTab},
    {path:"/enterprise-user",name:"enterprise-user",component:EnterpriseUser},
    {path:"/government-park",component:GovernmentPark},

    

應用組件，如在index頁面中（或者其他頁面）
        <my-tab :tabList="tabList" :tabIndex="tabIndex" @changeTab="changeTab">
            <keep-alive>
            <component :is="currentContent"></component>
          </keep-alive>
        </my-tab>

    import MyTab from './Tab/MyTab'
    import EnterpriseUser from './Tab/UserTab/EnterpriseUser'
    import GovernmentPark from './Tab/UserTab/GovernmentPark'

export default {
      data() {
          return {
              tabIndex: 0,
              currentContent: 'enterprise-user',
              tabList: [
                {
                  index: 0,
                  name: '企業用戶',
                  component: 'enterprise-user'
                },
                {
                  index: 1,
                  name: '政府園區',
                  component: 'government-park'
                }
              ]
       },
      components: {
              'my-tab': MyTab,
              'enterprise-user': EnterpriseUser,
              'government-park': GovernmentPark
        },
        methods: {
            // 切換選項卡
            changeTab: function (tab) {
              this.tabIndex = tab.index
              this.currentContent = tab.component
            }
        }
    }

搞定收工！

 

6、列表渲染動態數據

首先，vue3.x靜態json需要放在publice文件夾下

列表頁

data(){
            return {
                carrierList: [],
                labels: []
            }
},

created(){
            /* 請求http資源 jsonplaceholder
            this.$http.get('http://jsonplaceholder.typicode.com/posts')
            .then(function(data){
                console.log(data)
                this.carrierList = data.body.slice(0,10) //獲取前面10條數據
            }) 
            */

            //請求本地json資源
            this.$http.get('json/carrierListShow/carrierList.json')
            .then(res =>{
                this.carrierList = res.body.list;
            },(error) =>{
                console.log("失敗提示爲：" + error)
            })

}

 

 

n、錯誤信息

 

錯誤信息1：少了個s

[Vue warn]: Unknown custom element: <nav-bar> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <WinnewsShow>
       <App> at src/App.vue
         <Root>

因爲component少了個s

 

錯誤信息2：少了個逗號“”，“”

Unexpected token, expected "," (54:1) 52 | 'nav-bar': NavBar 53 | } > 54 | data(){ | ^ 55 | return { 56 | 57 | }

因爲component少了個逗號“”，“”

錯誤信息3： 圖片未找到而報錯，引用地址出錯

Module not found: Error: Can't resolve './resources/images/logo.png'

 

錯誤信息4：標籤錯誤也會導致顯示組件出錯

[Vue warn]: Unknown custom element: <sectiion> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Register> at src/components/Personal/Register.vue
       <App> at src/App.vue
         <Root>

<sectiion class="form-section"></sectiion>

應該爲<section class="form-sectiion"></section>

 

錯誤提示5: 檢查組件名字是否寫對

`F:\hvzhao-mobile\i.hvzhao\src\components\Winnews\WinNewsHeader.vue` does not match the corresponding path on disk `WinNews`.

 

組件，不能和html標籤重複

vue報錯 Do not use built-in or reserved HTML elements as component id:header

組件，不能和html標籤重複

header組件，h5新標籤重複

Do not use built-in or reserved HTML elements as component id:header

 

由於在模板需要插入到 DOM 中，所以模板中的標籤名必須能夠被 DOM 正確地解析。主要有三種情況：

　　　　一是完全不合法的標籤名，例如 </>；

　　　　二是與 HTML 元素重名會產生不確定的行爲，例如使用 input 做組件名不會解析到自定義組件，使用 button 在 Chrome 上正常但在 IE 上不正常；

　　　　三是與 Vue 保留的 slot、partial、component 重名，因爲會優先以本身的意義解析，從而產生非預期的結果。