基於Vue的簡單的單頁面應用的實現

原文連接：http://mrzhang123.github.io/2016/06/08/vue-demo-1/

本文基於vue1.x

基於vue2.x&webpack2.x請移步至

Vue2.x踩坑與總結
Webpack2.x踩坑與總結

基於Vue的簡單的單頁面應用

在對Vue和webpack有了必定了解後，咱們就能夠開始利用所瞭解的東西作一個簡單的webapp了，不瞭解的同窗能夠看下個人前兩篇關於vue和webpack的基本應用：
webpack+vue起步
利用webpack和vue實現組件化

構建項目

首先建立各個組件，個人目錄結構以下：

//沒有後綴名的都是文件夾
|-wechat
    |-dist
    |-src
    |  |-components         //存放vue組件
    |  |    |-tab           //存放home.vue中的tab，動態切換的模板
    |  |    |    |-tab_1.vue
    |  |    |    |-tab_2.vue
    |  |    |-home.vue      //app的首頁
    |  |    |-list.vue      //點擊home中的連接跳轉到
    |  |    |-detail.vue    //點擊list中的連接跳轉到
    |  |-app.vue            //主要的vue文件(用於將各個組件的掛載)
    |  |-main.js            //主要的js(用於配置路由)    
    |-static                //存放靜態資源
    |-index.html

配置路由

首先在咱們的項目中安裝vue-router

npm install vue-router

引入各個組件並配置路由：

//main.js

import Vue from 'vue';
import VueRouter from 'vue-router';
//引入組件
import App from './app.vue';
import home from './components/home.vue';
import list from './components/list.vue';
import detail from './components/detail.vue';

Vue.use(VueRouter);

var app=Vue.extend(App);

var router=new VueRouter();

//配置路由
router.map({
  '/home': {
    component: home
  },
  '/list': {
    component: list    
  },
  '/detail': {
    component: detail
  }
});
//設置默認狀況下打開的頁面
router.redirect({
  '/':'home'
});
router.start(app,'#app');
//暴露路由接口調試
window.router = router;

關於vue-router的介紹，官方文檔介紹很清楚，地址：http://router.vuejs.org/zh-cn/index.html。
配置好路由後，須要將匹配好的組件正確的渲染到頁面中，此時用到<router-view></router-view>，它基於Vue的動態組件系統，因此它會繼承一個正常動態組件的不少特性。在這裏咱們用到兩個：

• v-transition和transition-mode的完整支持，爲了切換效果能正常工做，路由組件必須不是一個片斷實例。

• 在路由的0.7.2+中支持keep-alive（關於keep-alive）

因此在app.vue寫入：

<template>
    <div class="main">
        <router-view
          keep-alive
          transition="fade"
          transition-mode='out-in'></router-view>
    </div>
</template>

打開命令行啓動webpack-dev-server：

$ webpack-dev-server --inline --hot

此時咱們在頁面中看到的頁面就是home.vue

在home.vue中實現tab切換

tab切換做爲一個常見的效果，出現的頻率很高，那麼如何用vuejs寫一個tab切換效果呢？
利用當前被點擊的tab是第幾個，從而動態的切換相應的動態組件是vuejs實現切換的一種方式。動態組件的介紹以下：https://vuejs.org.cn/guide/components.html#動態組件。因此實現代碼以下：

<template>
<div class="home">
    <div class="bd" style="height: 100%;">
        <div class="weui_tab">
            <ul class="weui_navbar">
                <li class="weui_navbar_item"
                    v-for="tab in tabs"
                    :class="{'weui_bar_item_on':$index===selected}"
                    @click="choose($index)">{{tab.tabName}}</li>
            </ul>
            <div class="weui_tab_bd">
                <component :is="currentView" transition="fade" transition-mode="out-in"></component>
            </div>
        </div>
    </div>      
</div>
</template>
<script>
import  tab_1 from './tab/tab_1.vue';
import  tab_2 from './tab/tab_2.vue';
export default{
    data(){
        return{
            tabs:[
                {tabName:'Vuejs'},
                {tabName:'VueTab'}
            ],
            selected:0,
            currentView:'view_0'
        }
    },
    components:{
        'view_0':tab_1,
        'view_1':tab_2
    },
    methods:{
        choose(index) {
            this.selected=index;
            this.currentView='view_'+index;
        }
    }
}
</script>

兩個動態組件爲tab_1.vue和tab_2.vue。引入這兩個模塊，對外輸出對組件的操做export default{}，在template模板中將動態組件加載進去，使用保留的<component>元素，動態地綁定它的is特性，從而根據不一樣的值動態的切換組件，在須要點擊的tab導航上，須要v-for循環出兩個導航，而後動態綁定class，根據當前點擊的tab導航$index動態的切換class名:class="{'weui_bar_item_on':$index===selected}"，而後給li綁定click事件，從而讓其在被點擊時執行事件@click="choose($index)"。
因爲默認狀況下顯示第一個組件且第一個tab變灰，因此在data設置默認值。爲了切換有過渡，添加了transition="fade" transition-mode="out-in"並在css中設置動畫的執行過程：

/*切換動畫*/
.fade-transition {
    transition: opacity 0.3s ease;
}
.fade-enter,
.fade-leave {
    opacity: 0;
}

利用v-link實現路由連接

在組件中，用到了路由，在給a寫路由連接時候要使用v-link而不是href。在帶有v-link指令的元素，若是v-link對應的URL匹配當前路徑，則該元素會被添加一個特定的class，默認爲.v-link-active，這個默認值，咱們能夠經過在建立路由時指定linkActiveClass全局選項來自定義，也能夠經過activeClass內聯選項來單獨制定：

<a v-link="{path:'/a',activeClass:'active'}">test</a>

遇到的一些問題

1.v-for循環插入圖片

在寫循環插入圖片的時候，寫的代碼以下：

<div class="bio-slide" v-for="item in items">   
    <img src="{{item.image}}">
</div>

此時在控制檯會出現警告
[Vue Warn]: src="{{item.image}}": interpolation in "src" attribute will cause a 404 request. Use v-bind:src instead.
這裏意思是在src屬性插值將致使404請求。使用v-綁定：src代替。
因此替換成以下：

<div class="bio-slide" v-for="item in items">   
    <img v-bind:src="item.image">
</div>

這裏須要主要，v-bind在寫的時候不建議再用雙花括號{{}}，根據官方的說法：

<a v-bind:href="url"></a>

這裏 href 是參數，它告訴 v-bind 指令將元素的 href 特性跟表達式 url 的值綁定。可能你已注意到能夠用特性插值 href="{{url}}" 得到一樣的結果：這樣沒錯，而且實際上在內部特性插值會轉爲 v-bind 綁定。

2.v-model的使用

v-model用於在表單上建立雙向綁定，只能用於<input>、<select>、<textarea>，若是用在其餘元素中，則會在產生警告。

3.如何讓組件的CSS樣式只在組件中起做用

在每個vue組件中均可以定義各自的css，js，若是想寫的css只對當前組件起做用，則在style中寫入scoped，即：

<style scoped></style>

這樣就完成了一個簡單的基於Vue+webpack+vue-router的單頁面應用，具體實現代碼見github:https://github.com/MrZhang123...