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

最新推荐文章于 2020-07-17 18:15:17 发布

yuehp

最新推荐文章于 2020-07-17 18:15:17 发布

阅读量507

点赞数 1

分类专栏：读书笔记文章标签： Vue.js

本文链接：https://blog.csdn.net/yuehp/article/details/82804447

版权

读书笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

日期：2018年9月19日 - 2018年9月20日

地点：玉泉慧谷

图书：

《Vue.js实战》
官方教程 https://cn.vuejs.org/v2/guide/index.html

一、记录

闲下来，有点时间，看下 Vue.js。先从京东上看了下相关图书，找评论比较多的书看下先。

Vue.js 图书列表

《Vue.js 实战》 - 8000+ 评论
《Vue.js 权威指南》 - 3600+ 评论
《Vue.js 前端开发快速入门与专业应用》 - 2400+ 评论
《Vue2 实践揭秘》 - 1400+ 评论
《Vue 移动开发实战技巧》 - 2018年新书 - 290+ 评论
《JavaScript 核心技术开发解密》 - 2018年新书 - 书名没有 Vue
《Vue.js 项目开发实战》 - 2018年8月新书 - <50 评论

找了评论前 2 的书看了下目录，然后翻到官方教程看下，书先放下了。

二、官方教程

跟着教程，只看了第一个网页。

三、《Vue.js 实战》

第1章初识 Vue.js
第2章数据绑定和第一个 Vue 应用
第9章 9.1 什么是 Virtual DOM
第10章 10.1 前端工程化和 Webpack
第11章 11.1.1 什么是前端路由

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

书名	出版时间	作者	出版社	译者	主题	页数	定价	京东评论数	评论数采集日期
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>

yuehp

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【读书笔记】Vue.js 初次接触

日期：2018年9月19日 - 2018年9月20日地点：玉泉慧谷图书：《Vue.js实战》官方教程 https://cn.vuejs.org/v2/guide/index.html目录一、记录二、官方教程三、《Vue.js 实战》四、附录 - Vue.js 图书评论数五、附录 - 官方教程练习代码一、记录闲下来，有点时间，看下 Vue.js。先从京东...
复制链接

扫一扫