軽くて手を緩めvue、vue-router、axios、express

軽くて手を緩めvue、vue-router、axios、express
前に書く
vueは優れたライブラリですが、個別のページでvueを使いたいだけかもしれません.vueをテクノロジースタックとして使うのではなく、初心者で、迅速にvueに入りたいと思っています.この文章はあなたに役立つかもしれません.
この記事では、webpackやvue-cli足場などのツールを使うつもりはなく、対応するjsファイルを簡単に導入することでvueやvueの一般的なコンポーネントを使用することを教えています.
本稿で実現する効果
expressでデータを返し、axiosでデータを要求し、vueでレンダリングし、vue-routerでページを切り替えます.
コード解釈
まずexpressで食べ物のリストを返す、vueのmountedメソッドでデータを取得し、3つのコンポーネントを登録し、vue-routerで切り替え、取得したデータをhomeというコンポーネントに転送する.本文はvue、vue-router、axios、expressを最も簡単な方法で結びつけて、みんなは彼らの基本的な使い方を理解することができます.
demoアドレス
vue
基礎読書
vueは実は何も書くことができなくて、すべてみんなに透かされたので、いくつかの文章を並べてみんなに見せて、興味があれば練習します.
1つ目はvue公式サイトで、まずその基礎部分を見るだけで、2つ目はあなたがそれを公式サイトの繰り返しと見なすことができて、1回見て復習するだけで、3つ目はいくつかの簡単なvueの小さい例で、興味があればやって、興味がなくても少なくともコードを1回通すことができて、もちろんすべてso easyだと思ったら見なくてもいいです.

vue公式サイト

こんなに簡潔で分かりやすいVueチュートリアル

を見たことがありません.

vueクイックエントリーの3つの小さなインスタンス

vueでリストを実装し、コレクション機能を追加

    
    
    
    



    

        
    
    
    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
        }
    })
    

express
シンプルなサーバ環境の構築
ここでexpressを使うのはaxiosの使い方を示すためで、十分に簡単にするために、ここではexpressでデータを返してルートディレクトリを直接静的ファイルディレクトリに設定するだけでいいです.

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.htmlindexが正常に表示されます.html
http://localhost:8000/foodlistfoodlistという配列が返されます
axios
vueでaxiosを使用する

    
    
    
    
    



    

        
    
    
    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)
                });
        }
    })
    

に合格http://localhost:8000/index.htmlああ、この時点でウェブページのデータはaxiosでサーバデータを要求しています
vue-router
資料

フロントエンドルーティングの存在をよりよく理解するには、この文章を読む必要があります.フロントエンド:単一ページアプリケーションとマルチページアプリケーション

を理解する必要があります.

この記事では、vue-router vue-router 60分クイック

にアクセスできます.
コードを直接見る

    
    
    
    
    
    



    

        

              
              
              
        
        
    
    
    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)
                });
        }
    })