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>

posted @ 2021-04-18 12:44 ~清风煮酒~ 阅读(110) 评论(0) 编辑收藏举报

刷新页面返回顶部

狂奔小蜗牛

vue 进阶

Vue.js进阶学习部分总结

课程详细

课程文件

小马视频频道

命令行安装

知识点

官网

实战演习

vue-cli命令选项

各种项目模板

知识点

实战演习

模板官网

webpack模板工程

知识点

官网

实战演习

webpack工程

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

引入Bootstrap4

知识点

实战演习

【可选】Bootstrap + Vue

使用Ajax库-axios

知识点

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

实战演习

VS Code workspace setting

自定义css样式

知识点

实战演习

组件的结构

知识点

组件文件夹

组件格式

实战演习

工程的结构

知识点

官网

webpack模板工程

路由知我心

知识点

官网

实战演习

路由组件的设定

src/router/index.js

src/main.js

路由初体验

知识点

实战演习

HelloWorld.vue

News.vue

About.vue

router/index.js

App.vue

动态路由

知识点

实战演习

Player.vue

router/index.js

App.vue

嵌套路由

知识点

实战演习

Player/Profile.vue

Player/Stats.vue

router/index.js

Player.vue

路由也编程

知识点

实战演习

App.vue

多路由拼图

知识点

实战演习

setting/Header.vue

setting/Sidebar.vue

setting/Detail.vue