vue 进阶

Vue.js进阶学习部分总结

Vue.js进阶学习课程，以命令行的方式开发您的应用程序。

课程详细

课程介绍
命令行安装
各种项目模板
webpack模板工程
引入Bootstrap4
使用Ajax库-axios
自定义css样式
组件的结构
工程的结构
路由知我心
路由初体验
动态路由
嵌套路由
路由也编程
多路由拼图
URL重定向
多参数路由

课程文件

https://gitee.com/komavideo/LearnVueJS2

小马视频频道

http://komavideo.com

命令行安装

==========

知识点

vue命令工具安装

官网

https://github.com/vuejs/vue-cli

实战演习

#最新版本确认
$ npm show vue-cli  
  {
      name: 'vue-cli',
      description: 'A simple CLI for scaffolding Vue.js projects.',
      'dist-tags': { latest: '2.9.6' },
$ [sudo] npm install -g vue-cli@2.9.6
#安装版本确认
$ vue -V
#命令帮助
$ vue -h

vue-cli命令选项

init
list
build
help [cmd]
实现参考：https://www.cnblogs.com/shaozhiqi/p/14661805.html

$ vue help init
//在对应的工作目录下执行 http://vuejs-templates.github.io/webpack/
$ vue init webpack myweb

各种项目模板

===========

知识点

vue命令默认提供的各种模板

实战演习

$ vue help
$ vue list

browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
browserify-simple - A simple Browserify + vueify setup for quick prototyping.
pwa - PWA template for vue-cli based on the webpack template
simple - The simplest possible Vue setup in a single HTML file
webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.

模板官网

https://github.com/vuejs-templates

webpack模板工程

==============

知识点

建立webpack模板工程

官网

http://vuejs-templates.github.io/webpack/

实战演习

$ vue init webpack myweb
$ cd myweb
$ npm run dev(npm start)
$ npm run build (编译打包)
$ code .

webpack工程

src:源文件文件夹
dist:打包文件夹
package.json:项目设置文件

修改 package.json 里的依赖为最新的

https://github.com/vuejs/vue/
https://github.com/vuejs/vue/releases

引入Bootstrap4

==============

知识点

vue-webpack工程导入bootstrap4框架

实战演习

$ cd myweb
$ npm install bootstrap --save --save-exact
// --save(把这个依赖库存储到package.json的文件目录中器)
"dependencies": {
    "vue": "2.6.11",
    "vue-router": "3.0.1"
  },
// --save-exact 精确版本号
$ nano main.js  // 编辑入口js,导入如下引用
...
import 'bootstrap/dist/css/bootstrap.min.css'
...
#编辑视图文件，测试Bootstrap功能
$ cd src
$ nano App.vue  // 用入口文件作测试，添加如下按钮
...
<button class="btn btn-primary">确定</button>
<button class="btn btn-success">使用</button>
<button class="btn btn-danger">注意</button>
...
$ npm start

【可选】Bootstrap + Vue

https://bootstrap-vue.js.org/
https://bootstrap-vue.org/docs/components

使用Ajax库-axios

================

知识点

为网页增加远程数据存取能力（Ajax）
HTTP库axios（浏览器 or Node.js）

axios:Promise based HTTP client for the browser and node.js

https://github.com/axios/axios

实战演习

$ cd myweb
$ npm install --save --save-exact axios vue-axios
#注册组件
$ nano main.js
...
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
...
#各个组件
$ nano HelloWorld_bak1.vue
...
<pre>{{content}}</pre>
...
export default {
  name: "HelloWorld",
  data() {
    return {
      content: ""
    };
  },
  mounted() {
    this.axios.get('https://autumnfish.cn/api/joke/list?num=3').then(body => {
      this.content = body.data;
    });
  }
};
...

VS Code workspace setting

自定义css样式

============

知识点

定义属于自己的样式单文件my.css

实战演习

$ cd assets
$ nano my.css
...
.myclass1 {
    color: red;
    border: 1px solid blue;
}
...
$ cd ../
$ nano App.vue
...
#这里必须是该文件对于my.css的相对路径
import './assets/my.css'
...
<div class="myclass1">你好！</div>
...

组件的结构

==========

知识点

vue命令行开发模式为我们带来的组件开发方式。

组件文件夹

所有的组件都被统一放在工程中的组件文件夹中。

{myproject}/src/components/*

组件格式

template:组件html内容
script:组件js脚本(ES6)
style:组件css样式单

实战演习

<template>
    <div class="container">
        <h1>{{ msg }}</h1>
    </div>
</template>

<script>
// import ...
export default {
    name: 'HelloWorld',
    data () {
        return {
            msg: 'Welcome to Your Vue.js App'
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
    font-weight: normal;
    color: red;
}
</style>

工程的结构

==========

知识点

webpack模板生成的工程结构

官网

http://vuejs-templates.github.io/webpack/

webpack模板工程

build
- webpack设置文件
config
- 工程设置文件
src
- 源文件夹
static
- 静态文件夹(编译时直接拷贝至发布文件夹)
index.html
- 网页启动入口文件

路由知我心

==========

知识点

路由组件vue-router

官网

https://router.vuejs.org/zh-cn/

https://github.com/vuejs/vue-router

实战演习

$ npm install vue-router --save --save-exact

路由组件的设定

src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            name: 'HelloWorld',
            component: HelloWorld
        }
    ]
})

src/main.js

import router from './router'
...
new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})

路由初体验

==========

知识点

做一个简单的路由

实战演习

HelloWorld.vue
News.vue
About.vue
router/index.js
App.vue

HelloWorld.vue

<template>
    <div>
        <h1>Hello World!</h1>
    </div>
</template>

News.vue

<template>
    <div>
        <h1>News Page</h1>
    </div>
</template>

About.vue

<template>
    <div>
        <h1>About Page</h1>
    </div>
</template>

router/index.js

import About from '@/components/About'
import News from '@/components/News'
...
    {
        path: '/',
        name: 'HelloWorld',
        component: HelloWorld
    },
    {
        path: '/about',
        name: 'About',
        component: About
    },
    {
        path: '/news',
        name: 'News',
        component: News
    }

App.vue

<template>
    <div id="app">
        <img src="./assets/logo.png">
        <p>
            <!-- 使用 router-link 组件来导航. -->
            <!-- 通过传入 `to` 属性指定链接. -->
            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
            <router-link to="/">Home</router-link>
            <router-link to="/news">新闻</router-link>
            <router-link to="/about">关于</router-link>
        </p>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view/>
    </div>
</template>

动态路由

========

知识点

动态路由是指在URL路径中含有动态参数的路由，
比如说：/player/1, /player/2, /player/3等等。

动态路由的匹配设置

实战演习

定制玩家的动态路径：/player/:id

Player.vue
router/index.js
App.vue

Player.vue

<template>
    <div>
        <h1>球员页面</h1>
        <p>{{ detail }}</p>
    </div>
</template>

<script>
    export default {
        name: "Player",
        data() {
            return {
                detail: {}
            };
        },
        mounted() {
            // 接受url参数id
            this.detail = this.getPlayer(this.$route.params.uid);
        },
        /*
        beforeRouteUpdate(to, from, next) {
            this.detail = this.getPlayer(to.params.uid);
            next();
        },
        */
        methods: {
            getPlayer(uid) {
                switch (uid) {
                    case '1':
                        return {uid: 1,name: '库里',point: 26};
                    case '2':
                        return {uid: 2,name: '哈登',point: 30};
                    default:
                        return {uid: -1};
                }
            }
        }
    };
</script>

router/index.js

...
import Player from '@/components/Player'
...
export default new Router({
    routes: [
        {
            path: '/player/:uid',
            name: 'Player',
            component: Player
        }
    ]
})

App.vue

<template>
    <div id="app">
        <p>
            <router-link to="/">Home</router-link>
            <router-link to="/player/1">库里</router-link>
            <router-link to="/player/2">哈登</router-link>
        </p>
        <router-view/>
    </div>
</template>

嵌套路由

========

知识点

嵌套路由是指在动态路由的基础上再加上附加的嵌套URL（即：组件），比如说：(/player/:uid/*)/player/1/profile, /player/1/stats等。

嵌套路由的使用方法

实战演习

Player/Profile.vue
Player/Stats.vue
router/index.js
Player.vue

Player/Profile.vue

<template>
    <div>
        <h2>球员简介:{{$route.params.uid}}</h2>
    </div>
</template>

Player/Stats.vue

<template>
    <div>
        <h2>球员数据:{{$route.params.uid}}</h2>
    </div>
</template>

router/index.js

import PlayerProfile from '@/components/Player/Profile'
import PlayerStats from '@/components/Player/Stats'
...
    {
        path: '/player/:uid',
        name: 'Player',
        component: Player,
        children: [
            {
                path: 'profile',
                component: PlayerProfile
            },
            {
                path: 'stats',
                component: PlayerStats
            },
        ]
    }

Player.vue

<template>
    <div>
        <h1>球员页面</h1>
        <ul>
            <li>编号：{{detail.uid}}</li>
            <li>名字：{{detail.name}}</li>
            <li>得分：{{detail.point}}</li>
        </ul>
        <router-link :to="profile">简介</router-link>
        <router-link :to="stats">数据</router-link>
        <hr>
        <router-view></router-view>
    </div>
</template>
...
<script>
...
    data() {
        return {
            detail: {},
            profile: '',
            stats: '',
        };
    },
    mounted() {
        this.detail = this.getPlayer(this.$route.params.uid);
        this.profile = '/player/' + this.$route.params.uid + '/profile';
        this.stats = '/player/' + this.$route.params.uid + '/stats';
    },
    beforeRouteUpdate(to, from, next) {
        this.detail = this.getPlayer(to.params.uid);
        this.profile = '/player/' + to.params.uid + '/profile';
        this.stats = '/player/' + to.params.uid + '/stats';
        next();
    },
...
</script>

路由也编程

==========

知识点

在前面的讲解中我是通过router-link标记来生成页面的a标记，然后进行url转向的，其实我们不仅可以通过标记来实现，还可以通过编程的方式来实现，今天我们就来学习一下。

router-link(之前做法)
router.push(location, onComplete?, onAbort?)

实战演习

App.vue

<template>
...
    <button @click="btnClick(1)">库里</button>
    <button @click="btnClick(2)">哈登</button>
    <hr>
    <router-link :to="{ name: 'Player', params: { uid: 1 }}">库里</router-link>
    <router-link :to="{ path: '/player/2/stats' }">哈登</router-link>
...
</template>
<script>
...
    methods: {
        btnClick(uid) {
            this.$router.push({ path: `/player/${uid}` });
            //this.$router.push({ path: `/player/${uid}/stats` });
            //this.$router.push({ name: 'Player', params: { uid: uid } });
            //this.$router.push({ path: '/player', query: { uid: uid }}); //url-get参数写法
            //url履历控制
            //this.$router.go(-1);
        }
    }
...
</script>

多路由拼图

==========

知识点

为一个路由(画面)组合多个组件，完成整个页面。

router-view[name]
components

实战演习

Header.vue
Sidebar.vue
Detail.vue
router/index.js
App.vue

setting/Header.vue

<template>
    <div>
        <h1>标题栏</h1>
        <div>欢迎来到小马Vue.js课程系列</div>
    </div>
</template>

setting/Sidebar.vue

<template>
    <div>
        <h1>边条</h1>
    </div>
</template>

setting/Detail.vue

<template>
    <div>
        <h1>详细显示</h1>
        <p>Vue.js是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。</p>
    </div>
</template>

router/index.js

import SettingDetail from '@/components/setting/Detail'
import SettingHeader from '@/components/setting/Header'
import SettingSidebar from '@/components/setting/Sidebar'
...
    routes: [
        {
            path: '/',
            name: 'Home',
            components: {
                myHeader: SettingHeader,
                mySidebar: SettingSidebar,
                myDetail: SettingDetail
            }
        }
    ]

App.vue

<template>
    <div id="app">
        <table width="100%">
            <tr>
                <td colspan="2" style="background-color:darkgoldenrod">
                    <router-view name="myHeader"></router-view>
                </td>
            </tr>
            <tr>
                <td width="20%" style="background-color:thistle">
                    <router-view name="mySidebar"></router-view>
                </td>
                <td width="80%" style="background-color:aquamarine">
                    <router-view name="myDetail"></router-view>
                </td>
            </tr>
        </table>
    </div>
</template>

URL重定向

=========

知识点

重定向指令：redirect
路由别名：alias

实战演习

About.vue
router/index.js
App.vue

About.vue

<template>
    <div>
        <h1>About Page</h1>
    </div>
</template>

router/index.js

import About from '@/components/About'
...
    {
        path: '/about',
        name: 'About',
        component: About,
        alias: '/aboutme'
    },
    {
        path: '/curry',
        redirect: '/player/1'
        //redirect: { name: 'About' }
        //redirect: '/about'
    }

App.vue

<template>
    <div id="app">
        <router-link to="/">Home</router-link>
        <router-link to="/about">About</router-link>
        <router-link to="/player/1">Player1</router-link>
        <router-link to="/curry">Curry</router-link>
        <hr>
        <router-view></router-view>
    </div>
</template>

多参数路由

==========

知识点

路由属性props

实战演习

User.vue
router/index.js
App.vue

User.vue

<template>
    <div>
        <h1>User</h1>
        <p>uid={{ uid }}, {{ nationality }}</p>
        <p>$route.params.uid={{ $route.params.uid }}</p>
        <p>$route.params.uid={{ $route.params.nationality }}</p>
    </div>
</template>

<script>
    export default {
        name: "User",
        props: ['uid', 'nationality']
    };
</script>

router/index.js

import User from '@/components/User'
...
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/user/:uid/:nationality',
        name: 'User',
        component: User,
        props: true
    },
...

App.vue

<template>
    <div id="app">
        <router-link to="/">Home</router-link>
        <router-link to="/user/1/usa">User1</router-link>
        <router-link to="/user/2/china">User2</router-link>
        <router-link to="/user/3/korea">User3</router-link>
        <hr>
        <router-view></router-view>
    </div>
</template>