vue2.0開發聊天程序(四) 完總體驗一次Vue開發（上）

在我一輩子的黃金時代,我有好多奢望。我想愛,想吃,還想在一瞬間變整天上半明半暗的雲。
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　——王小波
上一章研究了vue中組件的通訊，算是對vue的組件通訊有了大體的瞭解。綜合上三章對搭建項目也算是心有成竹了，這一章我將把本身在開發整個項目時的一些總結分享給你們。

X-chat項目github地址：https://github.com/ermu592275...
X-chat是我仿照別人項目的UI純手打的，在這裏表示感謝，同時貼上CookIM(我仿照的項目)的地址：
碼雲地址：http://git.oschina.net/cookee...
演示地址：https://im.cookeem.com/chat/#...

1、關於CSS
衆所周知，vue組件的css樣式能夠寫在<style></style>中，固然也能夠寫成一個css文件而後link進去。
我在項目中對於CSS的寫法以下：

1.使用bootstarp.css

安裝npm install bootstarp --save
引入有兩種方法：在index.html中link或者main.js也就是入口文件中improt，須要注意的是import不支持使用cdn，因此若是是cdn能夠在index.html中link進來
import以下：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import VueRouter from 'vue-router'
import Vuex from 'vuex'
import router from './router'
import store from './store'

import App from './App'
import 'bootstrap/dist/css/bootstrap.css' //只需引入就夠了
import 'animate.css/animate.css'
import './base.css'

Vue.use(VueRouter)
console.log(store)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

2.使用base.css聲明基本樣式
我在src目錄下建立了base.css將reset樣式以及公共的樣式都放在了base.css中，也在main.js中引入

import './base.css'

3.在每一個組件中聲明對應的樣式
在每一個組件中寫對應的樣式，而且加上scoped顯示樣式的做用域，能有效的防止樣式衝突，今後再也不爲css樣式的命名而頭疼。

<style scoped> // 加上scoped
.hint {
    margin: 0;
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 99;
}
....
</style>

若是要使用sass或less語法，請參考：https://segmentfault.com/a/11...

4.過渡效果

組件的切換，要是能加上過渡效果就更好了。在vue中能夠經過一下方式實現過渡效果：

• 在 CSS 過渡和動畫中自動應用 class

• 能夠配合使用第三方 CSS 動畫庫，如 Animate.css

• 在過渡鉤子函數中使用 JavaScript 直接操做 DOM

• 能夠配合使用第三方 JavaScript 動畫庫，如 Velocity.js

我在項目中使用了animate.css，用法和bootstarp十分類似，只須要安裝以後在main.js中引入就能夠了。

npm install animate.css --save

main.js

import 'animate.css/animate.css'

也使用了Vue提供的transition封裝組件，transition多用在條件渲染(v-if)，動態數組等情形下。
我在項目中的使用以下：
APP.vue

<template>
    <div>
<!-- 1.使用transition組件將須要實現過渡效果的組件(也能夠是元素)包裹,而且定義一個name屬性 -->
        <transition name="listbar">   
            <listbar></listbar>
        </transition>
        <div class="rightpart" v-bind:style="height">
            <router-view></router-view>
        </div>
        <transition name="daggerbar">
            <daggerbar></daggerbar>
        </transition>
        <transition name="hinttst">
            <hint></hint>
        </transition>
    </div>
</template>

<script>
import Headerbar from './Header.vue'
import Listbar from './List.vue'
import Footerbar from './Footer.vue'
import Daggerbar from './Dagger.vue'
import Hint from './Hint.vue'

export default {
    components: {
        Headerbar,
        Listbar,
        Footerbar,
        Daggerbar,
        Hint
    },
    data () {
        return {
            height: 'height:'+document.documentElement.clientHeight+'px',
            showdagger: this.$store.state.cCtrl.showDagger
        }
    },
    methods: {
        daggerCtrl: function(){
            this.$store.commit('daggerCtrl')
        }
    }
}

</script>

<style>
.rightpart {
    position: relative;
    float: left;
    width: 83%;
}
/*2. 添加對應的style，注意前綴爲transition的name屬性名 ！！*/
.daggerbar-enter-active, .daggerbar-leave-active {
      transition: opacity .5s;
}
.daggerbar-enter, .daggerbar-leave-active {
      opacity: 0;
}
.hinttst-enter-active {
      transition: all .3s ease;
}
.hinttst-enter {
      transform: translateX(-100%);
      opacity: 0;
}
/*.listbar-enter-active {
    transition: all .3s ease;
}
.listbar-enter {
    margin-left: -100%;
}*/
</style>

transition有四個類名，用於定義enter/leave的過渡效果：

1. v-enter: 定義進入過渡的開始狀態。在元素被插入時生效，在下一個幀移除。

2. v-enter-active: 定義進入過渡的結束狀態。在元素被插入時生效，在 transition/animation 完成以後移除。

3. v-leave: 定義離開過渡的開始狀態。在離開過渡被觸發時生效，在下一個幀移除。

4. v-leave-active: 定義離開過渡的結束狀態。在離開過渡被觸發時生效，在 transition/animation 完成以後移除。

在項目中使用到的CSS相關暫時是這些，其餘坑留着之後踩。

2、關於template
template包含了html的代碼，vue和angular同樣，也有本身的模版語法，可大體分爲如下幾類：

1. 賦值 包括{{}} v-html v-bind等

2. 控制 包括 v-if v-on等

3. 過濾 vue2.0廢棄了自帶的fitler，如今只能本身寫了

首先聲明，如下內容大可能是從vue官網中copy過來的，只是爲了作一個總結性的概述，知足喜歡快速閱讀的朋友，更詳細的內容請移步到官網中。
賦值
所謂賦值，就是把Vue實例中的數據（data聲明的部分）渲染到html中。vue相比angular沒有髒檢查機制，而是用了基於依賴追蹤的觀察系統。不會像angular那樣watcher越多，愈來愈慢。
賦值有一下幾種方式：

• {{}} 最多見的方式

  <span>Message: {{ msg }}</span>

• v-once一次性插值，當數據改變時，插值處的內容不會改變

  <span v-once>This will never change: {{ msg }}</span>

• v-html 插入html文本的時候用此方式

  <div v-html="rawHtml"></div>

• v-bind 爲屬性賦值時使用此方式，能夠簡寫爲:

  <div v-bind:id="dynamicId"></div>
    <div :id="dynamicId"></div>

  其中css的綁定以下：

<!-- isActive值爲true就添加active屬性 -->
<div v-bind:class="{ active: isActive }"></div>

• v-for用於以數組的形式渲染html

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

v-model 雙向數據綁定，不一樣的類型綁定的方式個有不一樣，下面是一個input類型的簡單事例，其餘類型請看文檔：http://cn.vuejs.org/v2/guide/...

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

以上就是賦值操做的簡單介紹，更多複雜的操做（特別是v-bind:class和v-for）請閱讀官網http://cn.vuejs.org/v2/guide/...

控制
我在這裏將條件渲染和事件監聽歸於控制一類，其實不太好，可是又不知道該怎麼分。有點牽強，厚着臉皮往下寫

• 條件渲染
  v-if根據條件顯示或隱藏組件

<h1 v-if="ok">Yes</h1>

v-else放在v-if的後面，表示當v-if爲false時，要顯示的內容。

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

v-else-if，顧名思義，用做 v-if 的 else-if 塊。能夠鏈式的屢次使用：

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-show： 和v-if用法相同，可是v-show的元素會始終渲染並保存在DOM中，只是改變display值。

<h1 v-show="ok">Hello!</h1>

v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。所以，若是須要頻繁切換使用 v-show 較好，若是在運行時條件不大可能改變則使用 v-if 較好。

• 事件監聽
  v-on: 監聽DOM事件觸發綁定的methods。

<div id="example-1">
  <button v-on:click="counter += 1">增長 1</button>
  <p>這個按鈕被點擊了 {{ counter }} 次。</p>
</div>

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

能夠簡寫爲@click="counter += 1"。vue還提供了事件修飾符和按鍵修飾符.
事件修飾符好比阻止冒泡：

<a v-on:click.stop="doThis"></a>

按鍵修飾符指按下鍵盤上的某個鍵觸發此methods，好比enter鍵：

<input v-on:keyup.enter="submit">

還能夠自定義按鍵修飾符：

//main.js
Vue.config.keyCodes = { 
  v: 86,
  f1: 112,
  mediaPlayPause: 179,
  up: [38, 87]
}

過濾
改變數據顯示的方式而不改變數據本來的值，不如時間顯示格式改成yyyy-MM-dd但本來的date對象不會改變。vue2.0廢棄了以前1.0上的全部自帶過濾器，如今要本身寫了。用法以下：

<!-- in mustaches -->
{{ msg| capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

<script>
export default {
    name: 'hello',
    data () {
        return {
            msg: 'Welcome to Your Vue.js App！'
        }
    },
    filters: {
        capitalize: function (value) { // value對應 | 前面的數據
          if (!value) return ''
          value = value.toString()
          return value + 'you are lovely'
        }
      }
}
</script>