书名	出版时间	作者	出版社	译者	主题	页数	定价	京东评论数	评论数采集日期
Vue.js实战	2017-10-01	梁灏	清华大学出版社	N/A	Vue	330	79	8033	2018-09-19
Vue.js权威指南	2016-09-01	张耀春，黄轶，王静，苏伟	电子工业出版社	N/A	Vue	？	99	3666	2018-09-19
Vue.js前端开发快速入门与专业应用	2017-01-01	陈陆扬	人民邮电出版社	N/A	Vue	196	45	2430	2018-09-19
Vue2实践揭秘	2017-04-01	梁睿坤	电子工业出版社	N/A	Vue	304	79	1477	2018-09-19
Vue移动开发实战技巧	2018-01-01	李利德	电子工业出版社	N/A	Vue	288	58	292	2018-09-19
JavaScript核心技术开发解密	2018-03-01	阳波	电子工业出版社	N/A	JavaScript	232	69	155	2018-09-19
Vue.js项目开发实战	2018-08-01	张帆	机械工业出版社	N/A	Vue	342	89	49	2018-09-19

五、附录 - 官方教程练习代码

<!DOCTYPE html>
<html>
<head>
    <title>Vue, Hello World</title>
</head>
<body>

    <div id="app">
        {{ message }}
    </div>

    <div id="app-2">
        <span v-bind:title="message">
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
    </div>

    <div id="app-3">
        <p v-if="seen">Now, you see me!</p>
    </div>

    <div id="app-4">
        <ol>
            <li v-for="todo in todos">
                {{ todo.text }}
            </li>
        </ol>
    </div>

    <div id="app-5">
        <p>{{ message }}</p>
        <button v-on:click="reverseMessage">逆转消息</button>
    </div>

    <div id="app-6">
        <p>{{ message }}</p>
        <input v-model="message">
    </div>

    <div id="app-7">
        <ol>
            <todo-item
                v-for="item in groceryList"
                v-bind:todo="item"
                v-bind:key="item.id">
            </todo-item>
        </ol>
    </div>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })

    var app2 = new Vue({
        el: '#app-2',
        data: {
            message: '页面加载于 ' + new Date().toLocaleString()
        }
    })

    var app3 = new Vue({
        el: '#app-3',
        data: {
            seen: true
        }
    })

    var app4 = new Vue({
        el: '#app-4',
        data: {
            todos: [
                { text: 'Renee is a assistant' },
                { text: 'Sunny is a book editor' },
                { text: 'I am a java programmer' }
            ]
        }
    })

    var app5 = new Vue({
        el: '#app-5',
        data: {
            message: 'Hello Vue.js!'
        },
        methods: {
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
            }
        }
    })

    var app6 = new Vue({
        el: '#app-6',
        data: {
            message: 'Hello Renee!'
        }
    })

    Vue.component('todo-item', {
        props: ['todo'],
        template: '<li>{{ todo.text }}</li>'
    })

    var app7 = new Vue({
        el: '#app-7',
        data: {
            groceryList: [
                { id: 0, text: 'phone' },
                { id: 1, text: 'tv' },
                { id: 2, text: 'pc' }
            ]
        }
    })
</script>
</body>
</html>

【读书笔记】Vue.js 初次接触

一、记录

二、官方教程

三、《Vue.js 实战》

四、附录 - Vue.js 图书评论数

五、附录 - 官方教程练习代码

猜你喜欢