学习vue

考虑到这学期选的课需要用Vue.js做项目，就预习一下Vue.js，基本上是边学边用，不做深入的学习。顺便记录下笔记。基本上是根据官网的中文文档学习的，所以笔记其实和官网文档差不多。 要快速学习最好是边学边用，所以就做了一个显示任天堂游戏的页面 https://vistazx1.top/static/learn-vue/GamePage.html 一边学一边做，发现Vue.js是个好东西，比起以前自己写不熟悉的JS爽多了。vue的使用体验其实相当不错，新手能拿来用，但是要做大工程就还是要认真补好基础。 安装：我选了直接用 <script> 引入开发环境的版本。文档说不推荐新手用vue-cli，而且我对Node.js了解不多，于是避开这个坑。

代码： 图片列表的实现用了Vue.js的组件，每一幅图片就是一个组件。小型，独立，可复用。 导航栏也是用了组件，添加内容非常方便。

        <div class="card-container">
            <!--游戏图片列表-->
            <game-image-card
                    v-for="game in game_list"
                    v-bind:game="game"
                    v-bind:key="game.id"
            ></game-image-card>
        </div>

// 导航栏组件
    Vue.component('mdl-navigation', {
        props: ['link'],
        template: '<a class="mdl-navigation__link" :href="link.url">{{ link.text }}</a>'
    });

    // 游戏图片组件
    Vue.component('game-image-card', {
        props: ['game'],
        methods: {
            // 展示详细信息
            showGameInfo: function () {
                var title_id = this.game.title_id;
                app.game_info = app.game_json_data[title_id];
                console.log(app.game_json_data[title_id]);
                console.log("Show Game Information");

                var dialog = document.querySelector('#game_info_dialog');
                if (!dialog.showModal) {
                    dialogPolyfill.registerDialog(dialog);
                }
                dialog.querySelector('.close').addEventListener('click', function () {
                    dialog.close();
                });
                dialog.showModal();
            }
        },
        // HTML模板
        template: ' <div class="card-square mdl-card mdl-shadow--2dp">\n' +
            '                <div class="mdl-card__title mdl-card--expand" >\n ' +
            '                <img v-lazy="game.image_url"></div>\n' +
            '                <div class="mdl-card__actions mdl-card--border" >\n' +
            '                    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" v-on:click="showGameInfo">\n' +
            '                        <span style="color: black;font-size: large;" >{{ game.title }}</span> \n' +
            '                    </a>\n' +
            '                </div>\n' +
            '            </div>'
    });
    // 图片延迟加载
    Vue.use(VueLazyload, {
        preLoad: 1.3,
        error: 'loading.gif',
        loading: 'loading.gif',
        attempt: 3
    });
    // 创建vue实例
    var app = new Vue({
        el: '#app',
        data: {
            title: "Nintendo Switch Game Gallery",
            game_image_path: "./GameImages/",
            link_list: [
                {id: 1, text: 'Home', url: './'}
            ],
            game_list: [],
            game_json_data: "",
            game_info: "",
        },
        // 创建后就加载游戏详细信息json
		// 也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。
        created: function () {
            var url = "./GameInfo.json";
			// 获取实例
            var _self = this;
			// HTTP Get 用了JQuery
            $.get(url, function (data) {
                _self.game_json_data = eval(data);
				// 将信息处理后放入另一个列表
                for (titleid in  app.game_json_data) {
                    _self.game_list.push({
                        title_id: titleid,
                        title: app.game_json_data[titleid]['title'],
                        image_url: _self.game_image_path + titleid + ".jpg"
                    })
                }
            })
        }
    });