輕輕鬆鬆上手vue、vue-router、axios、express

時間  2019-11-08
標籤 輕輕 鬆鬆 上手 vue router axios express 简体版
原文   原文鏈接

輕輕鬆鬆上手vue、vue-router、axios、express

寫在前面

vue是一個很優秀的庫，可是你可能只是想在個別頁面用到vue，並非把vue做爲技術棧來使用，或者你是一個初學者，想迅速的入門vue，那這篇文章多是對你有幫助的html

本篇文章不打算用webpack、不打算用vue-cli腳手架等工具，只教你若是經過簡單的引入對應js文件來使用vue和vue經常使用組件前端

本文要實現的效果

用express返回一段數據，用axios請求這段數據，而後用vue渲染出來，用vue-router切換頁面vue

效果預覽

代碼解釋

首先在用express返回一個食物列表，而後在vue的mounted方法獲取到數據，在註冊3個組件，用vue-router進行切換，並把獲取到的數據傳入到home這個組件中去.本文把vue、vue-router、axios、express用最簡單的方式結合在一塊兒，你們能搞懂他們的基本用法就好。webpack

demo地址

vue

基礎閱讀

vue其實沒什麼好寫的，由於都被你們寫透了，因此列了幾篇文章給你們看一下，有興趣就跟着練一練。ios

第一個是vue官網，只須要先看一下它的基礎部分，第二個是你能夠把它當作是官網的重複，看一遍只當複習了，第三個是幾個簡單vue小例子，有興趣就作一作，沒興趣也要至少也要把代碼過一遍，固然若是以爲一切都是so easy就不用看啦。git

  1. vue官網github

  2. 我從未見過如此簡潔易懂的Vue教程web

  3. vue快速入門的三個小實例vue-router

用vue實現一個列表，並增長收藏功能

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>vue-demo1</title>
    <script src="https://unpkg.com/vue"></script>
    <style>
    * {
        padding: 0px;
        margin: 0px;
    }

    ul,
    li {
        list-style: none;
    }

    .list {
        width: 450px;
        margin: 100px auto;
    }

    .list li {
        height: 50px;
        line-height: 50px;
        background-color: #dee;
    }

    .list span {
        display: inline-block;
    }

    .list .name {
        padding-left: 30px;
        text-align: left;
        width: 150px;
    }

    .list img {
        width: 40px;
        height: 40px;
        margin-left: 100px;
        vertical-align: middle;
    }

    .list .price {
        width: 100px;
        text-align: center;
    }

    li.bgActive {
        background-color: #eed;
    }
    </style>
</head>

<body>
    <div id="list">
        <food-list :foodlist="foodList"></food-list>
    </div>
    <script>
    Vue.component('foodList', {
        template: `
                        <ul class="list">
                            <li v-for="(item,index) in foodlist" :class="{bgActive:index % 2 != 1}">
                                <span v-text="item.name" class="name"></span>
                                <span class="price">30</span>
                                <img :src="imgSrc(item)" alt="" @click="shouchangClick(item)">
                            </li>
                        </ul>
                    `,
        props: ['foodlist'],
        methods: {
            imgSrc: function(item) {
                if (item.isSelect) {
                    return './img/shouchang_fill.png'

                } else {
                    return './img/shouchang.png'

                }
            },
            shouchangClick: function(item) {
                item.isSelect = !item.isSelect
            }
        },
    });
    var foodList = [{ name: '香菇青菜', isSelect: false }, { name: '冬瓜排骨', isSelect: false }, { name: '青椒肉絲', isSelect: false }, { name: '爆炒蝦仁', isSelect: false }, { name: '紅燒茄子', isSelect: false }]
    new Vue({
        el: list,
        data: {
            foodList
        }
    })
    </script>
</body>

</html>

express

搭建簡單的服務器環境

在這裏使用express，是爲了演示axios的用法，爲了足夠簡單，這裏只是用express返回一段數據並把根目錄直接設置成靜態文件目錄便可vue-cli

const express = require('express')
const app = express()
app.use(express.static(__dirname))
const foodlist = [{ name: '香菇青菜', isSelect: false }, { name: '冬瓜排骨', isSelect: false }, { name: '青椒肉絲', isSelect: false }, { name: '爆炒蝦仁', isSelect: false }, { name: '紅燒茄子', isSelect: false }]
app.get('/foodlist', function(req, res) {
    res.send(foodlist)
})
app.listen(8000)

http://localhost:8000/index.html 會正常顯示index.html

http://localhost:8000/foodlist 會返回foodlist這個數組

axios

用vue中使用axios

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>vue-demo1</title>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
    * {
        padding: 0px;
        margin: 0px;
    }

    ul,
    li {
        list-style: none;
    }

    .list {
        width: 450px;
        margin: 100px auto;
    }

    .list li {
        height: 50px;
        line-height: 50px;
        background-color: #dee;
    }

    .list span {
        display: inline-block;
    }

    .list .name {
        padding-left: 30px;
        text-align: left;
        width: 150px;
    }

    .list img {
        width: 40px;
        height: 40px;
        margin-left: 100px;
        vertical-align: middle;
    }

    .list .price {
        width: 100px;
        text-align: center;
    }

    li.bgActive {
        background-color: #eed;
    }
    </style>
</head>

<body>
    <div id="list">
        <food-list :foodlist="foodList"></food-list>
    </div>
    <script>
    Vue.component('foodList', {
        template: `
                        <ul class="list">
                            <li v-for="(item,index) in foodlist" :class="{bgActive:index % 2 != 1}">
                                <span v-text="item.name" class="name"></span>
                                <span class="price">30</span>
                                <img :src="imgSrc(item)" alt="" @click="shouchangClick(item)">
                            </li>
                        </ul>
                    `,
        props: ['foodlist'],
        methods: {
            imgSrc: function(item) {
                if (item.isSelect) {
                    return './img/shouchang_fill.png'

                } else {
                    return './img/shouchang.png'

                }
            },
            shouchangClick: function(item) {
                item.isSelect = !item.isSelect
            }
        },
    });
    var foodList = []
    new Vue({
        el: list,
        data: {
            foodList
        },
        mounted: function() {
            _this = this
            axios.get('/foodlist')
                .then(function(res) {
                    _this.foodList = res.data
                })
                .catch(function(error) {
                    console.log(error)
                });
        }
    })
    </script>
</body>

</html>

經過http://localhost:8000/index.html ,這個時候網頁中的數據已是經過axios請求到服務器數據了

vue-router

資料

  1. 爲了更好的理解前端路由的存在，你須要看這篇文章：前端：你要懂的單頁面應用和多頁面應用

  2. 這篇文章可讓你快速入門vue-router vue-router 60分鐘快速入門

直接看代碼

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>vue-demo1</title>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vue-router"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
    * {
        padding: 0px;
        margin: 0px;
    }

    ul,
    li {
        list-style: none;
    }

    #linkList {
        width: 360px;
        height: 40px;
        margin: 50px auto;
    }

    #linkList li {
        width: 120px;
        height: 40px;
        line-height: 40px;
        background-color: #ddd;
        text-align: center;
        font-size: 18px;
        float: left;
    }

    #linkList li:hover {
        cursor: pointer;
    }

    #linkList li.router-link-active {
        background-color: #aee;
    }

    .list {
        width: 450px;
        margin: 100px auto;
    }

    .list li {
        height: 50px;
        line-height: 50px;
        background-color: #dee;
    }

    .list span {
        display: inline-block;
    }

    .list .name {
        padding-left: 30px;
        text-align: left;
        width: 150px;
    }

    .list img {
        width: 40px;
        height: 40px;
        margin-left: 100px;
        vertical-align: middle;
    }

    .list .price {
        width: 100px;
        text-align: center;
    }

    li.bgActive {
        background-color: #eed;
    }
    </style>
</head>

<body>
    <div id="app">
        <ul id="linkList">
            <router-link to="/home" tag="li">主頁</router-link>
            <router-link to="/shoucang" tag="li">收藏</router-link>
            <router-link to="/me" tag="li">個人</router-link>
        </ul>
        <router-view :foodlist="foodList"></router-view>
    </div>
    <script>
    const home = {
        template: `
                            <ul class="list">
                                <li v-for="(item,index) in foodlist" :class="{bgActive:index % 2 != 1}">
                                    <span v-text="item.name" class="name"></span>
                                    <span class="price">30</span>
                                    <img :src="imgSrc(item)" alt="" @click="shouchangClick(item)">
                                </li>
                            </ul>
                        `,
        props: ['foodlist'],
        methods: {
            imgSrc: function(item) {
                if (item.isSelect) {
                    return './img/shouchang_fill.png'

                } else {
                    return './img/shouchang.png'

                }
            },
            shouchangClick: function(item) {

                item.isSelect = !item.isSelect
            }
        }

    }
    const shouchang = {
        template: '<div style="text-align:center">收藏</div>'
    }
    const me = {
        template: '<div style="text-align:center">個人</div>'
    }

    const routes = [
        { path: '/home', component: home },
        { path: '/shoucang', component: shouchang },
        { path: '/me', component: me }
    ]
    const router = new VueRouter({
        routes
    })
    var foodList = []
    new Vue({
        el: "#app",
        data: {
            foodList
        },
        router,
        mounted: function() {
            _this = this
            axios.get('/foodlist')
                .then(function(res) {
                    _this.foodList = res.data
                })
                .catch(function(error) {
                    console.log(error)
                });
        }
    })
    </script>
</body>

</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程