VUE零碎小技巧1

一、回顧

• 建立項目 vue create myapp

• 準備 scss 庫

• 修改了頁面的主結構 App.vue 構建頁面的基本結構

• 分離頁面主結構，建立各個頁面組件 views

views/home/index.vue + views/home/store.js

• 配置各個頁面的路由結構 router/index.js

• App.vue 中添加路由視圖

• 頁面底部導航添加點擊連接

• 配置UI庫 - vant 、 mint-ui / element-ui 、iview

• 結合狀態管理器 編寫 每個頁面的業務邏輯

• 項目打包 cnpm run build ---- dist文件夾

day04/myapp

二、slot分發內容 -- 插槽

組件中內容是顯示仍是不顯示，在哪裏顯示，如何顯示，這就是內容分發所幹的活

默認狀況下，調用組件時，內部寫內容是不會顯示的，若是想要顯示，就須要使用到插槽

// 定義組件
<template>
  <header class="header">
    <ul>
      <li>左</li>
      <li>中</li>
      <li>右</li>
    </ul>
  </header>
</template>
// 使用組件
<Header>
  你好！！！！！
</Header>

瀏覽器中並未顯示 你好！！！！！

定義組件添加 slot 標籤，可使組件的內容顯示

// 定義組件
<template>
  <header class="header">
    <ul>
      <li>左</li>
      <li>
        <!-- +++++++++++++++++++++++++++++ -->
        <slot>中</slot>
      </li>
      <li>右</li>
    </ul>
  </header>
</template>
// 使用組件
<Header>
  你好！！！！！
</Header>   
<Header></Header>

第一個中間顯示 您好！！！！ 第二個中間顯示的是默認的 中

若是組件的結構都須要 可 自定義傳遞 ----- 具名插槽

// 定義組件
<header class="header">
  <ul>
    <li>
      <slot name="left">左</slot>
    </li>
    <li>
      <slot>中</slot>
    </li>
    <li>
      <slot name="right">右</slot>
    </li>
  </ul>
</header>
// 使用組件
<Header>
  你好！！！！！
</Header>
<Header></Header>
<Header>
  <div slot="left" @click="clickLogo">logo</div>
  <div>首頁</div>
  <div slot="right">掃一掃</div>
</Header>
<Header>
  <div slot="left" @click="back">返回</div>
  <div>詳情</div>
  <div slot="right">分享</div>
</Header>

能夠給各個組件添加不一樣的事件

組件中內容是顯示仍是不顯示，在哪裏顯示，如何顯示，這就是內容分發所幹的活
通常在 自定義組件 和 UI 庫使用時居多，能夠提升組件的 複用性

三、ref

能夠獲取DOM節點

<template>
  <div class="home">
    <h1 ref="title" id="title">標題</h1>
    <p ref="desc" id="desc">段落描述</p>
    <button @click="getDOM">獲取DOM節點</button>
  </div>
</template>

<script>
export default {
  methods: {
    getDOM () {
      console.log(document.getElementById('title'))
      console.log(document.getElementById('desc'))
      console.log('----------------------')
      console.log(this.$refs.title)
      console.log(this.$refs.desc)
    }
  }
}
</script>

獲取子組件的數據

<template>
  <div class="home">
    <Reftest ref="test" />
    <button @click="getData">獲取子組件的數據</button>
  </div>
</template>

<script>
import Reftest from '@/components/Reftest'
export default {
  components: {
    Reftest
  },
  methods: {
    getData () {
      console.log(this.$refs.test.msg)
    }
  }
}
</script>

四、$parent

子組件能夠直接獲取父組件中的數據和方法

<template>
  <div>
    <button @click="getData">子組件直接獲取父組件的數據</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      msg: 'child-----------------------------'
    }
  },
  methods: {
    getData () {
      // ++++++++++++++++++++
      console.log(this.$parent.message)
    }
  }
}
</script>

五、混入mixins

組件中的相同部分抽離爲一個 js 模塊，使用組件的混入選項導入便可,若是有相同的部分，以組件的選項爲主

mixins/header.js

import Header from '@/components/Header'
export default {
  components: {
    Header
  },
  methods: {
    userFn () {
      console.log('我的中心')
    }
  }
}

Home.vue

<template>
  <div class="home">
    <Header>
      <div>首頁</div>
      <div slot="right" @click="userFn">個人</div>
    </Header>
  </div>
</template>

<script>
import header from '@/mixins/header'
export default {
  mixins: [header]
}
</script>

About.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <Header>
      <div>關於</div>
      <div slot="right" @click="userFn">個人</div>
    </Header>
  </div>
</template>
<script>
import header from '@/mixins/header'
export default {
  mixins: [header],
  methods: {
    userFn () {
      console.log('about - 我的中心')
    }
  }
}
</script>

簡化組件的代碼 ----- 提交組件的複用性

六、自定義指令

• v-model/v-if/v-else-if/v-else/v-show/v-for/v-on/v-bind.....

<input type="text" autofocus/>

• 自定義指令實現 自動獲取焦點

全局的自定義指令 Vue.directive() ---- main.js

Vue.directive('focus', { // 此處不是一個函數
  // 當被綁定的元素插入到 DOM 中時……
  inserted: (el) => { // el表明DOM元素
    el.focus() // js操做DOM
  }
})

局部的自定義指令 { directives: {}} -- 哪裏使用哪裏定義 --- Home.vue

export default {
  directives: {
    'focus': {
      inserted: (el) => {
        el.focus()
      }
    }
  }
}

使用指令 v-name name爲自定義指令的名稱

<input type="text" v-focus>

七、過濾器

全局過濾器 --- main.js

Vue.filter('sexFilter', (val) => {
  return val === 0 ? '女' : '男'
})

局部過濾器 --- 哪裏使用哪裏定義 --- Home.vue

filters: {
  lessonFilter (val) {
    return val === 1 ? '一階段' : val === 2 ? '二階段' : '三階段'
  }
}

使用 {{ val | filtername }}

八、路由的過渡效果

頁面間切換效果

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <!-- transition 包裹 設置name值，設置css -->
    <transition name="slide">
      <router-view/>
    </transition>
  </div>
</template>

<style lang="scss">
* { padding: 0; margin: 0; list-style: none}
/* 能夠設置不一樣的進入和離開動畫 */
/* 設置持續時間和動畫函數 */
.slide-enter {
  // 定義進入過渡的開始狀態
  transform: translateX(100%);
}
.slide-enter-active {
  // 定義進入過渡的開始狀態
  transition: all 300ms;
}
.slide-enter-to {
  // 徹底進入
  transform: translateX(0%);
}
.slide-leave {
  // 開始離開
  transform: translateX(0%);
}
.slide-leave-active {
  transition: all 0;
}
.slide-leave-to {
  transform: translateX(-100%);
}
</style>

九、nextTick

• 狀態改變，視圖渲染，實際上DOM節點的值並未及時發生改變，使用nextTick能夠解決此問題

<template>
  <div class="home">
    <div ref="test"> {{ count }} </div>
    <button @click="getData">加1獲取div的值</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      count: 0
    }
  },
  methods: {
    getData () {
      this.count++

      // console.log(this.$refs.test.innerHTML) // 是上一次的DOM節點的值
      this.$nextTick(() => {
        console.log(this.$refs.test.innerHTML)
      })
    }
  }
}
</script>