知識點

1.vue-router之嵌套路由
http://router.vuejs.org/zh-cn/essentials/nested-routes.html
2.element-ui
導航組件、布局組件、加載動畫
http://element.eleme.io/#/zh-CN/component/menu
http://element.eleme.io/#/zh-CN/component/layout
http://element.eleme.io/#/zh-CN/component/loading

el-nav.vue:

<template>    <el-menu theme="dark" default-active="1" class="el-menu-demo" mode="horizontal" :router="true">        <el-menu-item index="/elindex/hot">處理中心</el-menu-item>        <el-submenu index="2">            <template slot="title">我的工作臺</template>            <el-menu-item index="2-1">選項1</el-menu-item>            <el-menu-item index="2-2">選項2</el-menu-item>            <el-menu-item index="2-3">選項3</el-menu-item>        </el-submenu>        <el-menu-item index="3">訂單管理</el-menu-item>    </el-menu></template>1
2
3
4
5
6
7
8

el-index:

<template>    <div>        <el-row>            <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>            <!--使用組件-->            <elnav></elnav>        </el-row>        <!--嵌套路由-->        <router-view></router-view>    </div></template><script>    // 引入elmenetui的導航組件    import elnav from "./el-nav.vue";    export default {        //加載組件        components:{elnav}    }</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

el-hot.vue:

<template>    <div>        <el-row v-for="hotNews in this.$store.state.ele.hot" justify="start" :gutter="2" align="middle">            <el-col :span="6">                <div class="grid-content bg-purple-dark hotimg">                    <img :src="hotNews.image"/>                </div>            </el-col>            <el-col :span="18">                <div class="grid-content bg-purple-dark hotcontent">                    <h2>{{hotNews.title}}</h2>                    <p>{{hotNews.desc}}</p>                </div>            </el-col>        </el-row>    </div></template><script>    export default{        mounted(){            this.$store.dispatch("getHot");        },        data(){            return {msg:"hello vue"}        }    }</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

eleModule.js:

import Vue from "vue";export default{    state:{        hot:[] //用來裝請求回來的數(shù)據(jù)    },    mutations:{        //寫個方法給hot數(shù)組設置數(shù)據(jù)        setHot(state, data){            state.hot = data;        }    },    actions:{        //寫個方法,做http請求        getHot(content){            //loading效果            let loading = Vue.prototype.$loading({text:"玩命加載中..."});            Vue.http.get("http://localhost/eleui.php",{},{emulateJSON:true})                .then(                    function (res) { //請求成功的回調(diào)函數(shù)                        //先結(jié)束loading效果                        loading.close();                        //調(diào)用設置hot數(shù)據(jù)的方法,把請求成功的數(shù)據(jù)給hot數(shù)組                        content.commit("setHot",res.body);                    },function(){}                );        }    }}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

入口文件jssrc/index.js:

import Vue from "vue";import pagenav from "./../components/page-nav.vue";import newsdetail from "./../components/news-detail.vue";// 引入import validate from "./../components/validate";// 使用Vue.use(validate);import VueRouter from 'vue-router';Vue.use(VueRouter); // 全局使用插件import VueResource from 'vue-resource';Vue.use(VueResource);import UserModule from "./../store/modules/UserModule";import NewsModule from "./../store/modules/NewsModule";import EleModule from "./../store/modules/eleModule";import Vuex from 'vuex';Vue.use(Vuex);import ElementUI from 'element-ui';import 'element-ui/lib/theme-default/index.css';Vue.use(ElementUI);import eltable from "./../components/el-table.vue";import elindex from "./../components/elmentui/el-index.vue";import elhot from "./../components/elmentui/el-hot.vue";const  vuex_store = new Vuex.Store({    modules:{        users:UserModule,        news:NewsModule,        ele:EleModule    }})const userlogin = resolve => {    // 成功之后的回調(diào)    resolve(require("./../components/user-login.vue")); // 這就是異步加載的方式}const newslist = resolve => {    // 成功之后的回調(diào)    resolve(require("./../components/news-list.vue")); // 這就是異步加載的方式}const routerConfig = new VueRouter({    routes: [        { path: '/', component: userlogin},        { path: '/news', component: newslist, name:"newslist"},        { path: '/news/:newsid', component: newsdetail, name:"newsdetail"},        { path: '/login', component: userlogin,name:"userlogin" },        { path: '/eltable', component: eltable,name:"eltable" },        { path: '/elindex', component: elindex,name:"elindex", children:[            {path:"hot",component:elhot,name:"elhot"}        ]}    ]})// 全局組件,不加入路由管理Vue.component("page-nav",pagenav);let myvue = new Vue({    el:".container",    store:vuex_store, //注入到vue    router:routerConfig,});1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

代碼分析

1、ele-nav導航組件是嵌套在 ele-index組件里的，ele-index里加載導航組件

import elnav from "./el-nav.vue";components:{elnav}1
2
1
2

<!--使用組件--><elnav></elnav>1
2
1
2

2、創(chuàng)建了eleModule模塊之后，需要在入庫文件里加載

//引入import EleModule from "./../store/modules/eleModule";// 使用const  vuex_store = new Vuex.Store({    modules:{        users:UserModule,        news:NewsModule,        ele:EleModule    }})1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10

3、給ele配置路由

// 引入import elindex from "./../components/elmentui/el-index.vue";import elhot from "./../components/elmentui/el-hot.vue";// 配置const routerConfig = new VueRouter({    routes: [        { path: '/', component: userlogin},        { path: '/news', component: newslist, name:"newslist"},        { path: '/news/:newsid', component: newsdetail, name:"newsdetail"},        { path: '/login', component: userlogin,name:"userlogin" },        { path: '/eltable', component: eltable,name:"eltable" },        { path: '/elindex', component: elindex,name:"elindex", children:[            {path:"hot",component:elhot,name:"elhot"}        ]}    ]})1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

這里用到了嵌套路由：

{ path: '/elindex', component: elindex,name:"elindex", children:[            {path:"hot",component:elhot,name:"elhot"}        ]}1
2
3
1
2
3

嵌套路由在組件里也需要配合：

<!--嵌套路由-->        <router-view></router-view>1
2
1
2

/elindex/hot

效果演示

PHP代碼:

<?php    // 指定允許其他域名訪問  header('Access-Control-Allow-Origin:*');  // 響應類型  header('Access-Control-Allow-Methods:GET');  header('Access-Control-Allow-Headers:x-requested-with,content-type');     //測試數(shù)據(jù) header("content-type:application/json"); //這句話TM很重要哦，否則到前端獲取時 只是普通字符串，不會自動識別$data=[          ["title"=>"SpaceX發(fā)射重啟計劃推遲 明年1月發(fā)射一箭十星","desc"=>"今年9月1日，搭載有以色列Amos-6通信衛(wèi)星的獵鷹9號火箭，在東海岸佛羅里達州卡納維拉爾角40號發(fā)射臺進行靜態(tài)點火測試前準備工作時突然起火爆炸，火箭連同價值2億美元的Amos-6通信衛(wèi)星一并被炸毀，40號發(fā)射臺也需要進行大修，隨后SpaceX公司被暫停了所有發(fā)射。","image"=>"http://inews.gtimg.com/newsapp_ls/0/884972898_300240/0"],          ["title"=>"iPhone炸完iPad炸 蘋果要重蹈三星覆轍？","desc"=>"寧波林先生怎么也沒想到，這么悲催的事情居然發(fā)生在自己頭上：他用了一年多的iPad半夜在充電時爆炸了，不僅寫字臺被炸開了一個洞，iPad零件更是炸得整個房間到處都是?！?","image"=>"http://inews.gtimg.com/newsapp_ls/0/884809358_300240/0"],          ["title"=>"遭唱衰的蘋果接連公布利好：AppStore上月營收創(chuàng)紀錄","desc"=>"騰訊科技訊 目前的蘋果，已經(jīng)進入了庫克接手之后最困難的階段，幾乎全部電子產(chǎn)品銷售出現(xiàn)同比下跌，財年收入出現(xiàn)了十多年來首次下滑。另外今年推出的新手機也遭遇了類似去年的低迷命運?！?","image"=>"http://inews.gtimg.com/newsapp_ls/0/885233382_300240/0"]      ];        sleep(2); //模擬網(wǎng)速很卡     echo json_encode($data,JSON_UNESCAPED_UNICODE);//精選1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

本站僅提供存儲服務，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊舉報。

免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

知識點

代碼分析

效果演示