01.《Vue.js》charp-01

Posted easy5

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了01.《Vue.js》charp-01相关的知识,希望对你有一定的参考价值。

源码

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>

下一篇

以上是关于01.《Vue.js》charp-01的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js 中的片段

vue.js 2 - 将单个文件组件的 html 片段提取到独立文件中

使用 Vue 模板清晰地分离视图和代码

第1129期对vue.js单文件(.vue)进行单元测试

Vue组件之全局组件与局部组件

Vue组件之全局组件与局部组件