01.vue-charp-01 初识vue.js

源码

github:https://github.com/icarusion/vue-book
笔记: https://github.com/K-Artisan/vue.js-in-ation-book-note

系列目录

什么是Vue.js

使用Vue.js可以让Web开发变得简单,同时也颠覆了传统前端开发模式。它提供了现代Web开发中常见的高级功能,比如:

  • 解耦视图与数据。

  • 可复用的组件。

  • 前端路由。

  • 状态管理。

  • 虚拟DOM(Virtual DOM)。

MVVM模式

Vue.js在设计上也使用MVVM(Model-View-View Model)模式。

如何使用

传统前端开发模式

一套可称为“万金油”的技术栈被许多商业项目用于生产环境:
jQuery + RequireJS(SeaJS)+ artTemplate(doT)+Gulp(Grunt)

Vue.js开发模式

引用

安装:https://cn.vuejs.org/v2/guide/installation.html

自动识别最新稳定版本的Vue.js -->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<!--指定某个具体版本的Vue.js -->
<script src="https://unpkg.com/vue@2.1.6/dist/vue.min.js"></script>

简单示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 示例</title>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="book in books">{{ book.name }}</li>
        </ul>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                books: [
                    { name: '《Vue.js实战》' },
                    { name: '《JavaScript语言精粹》' },
                    { name: '《JavaScript高级程序设计》' }
                ]
            }
        })
    </script>
</body>

</html>

下一篇

原文地址:https://www.cnblogs.com/easy5weikai/p/13191404.html