vue 快速入门系列 —— 初步认识 vue

时间 2021-04-03

标签 javascript html 前端 vue java react webpack web vue-router vuex 栏目 JavaScript 繁體版

原文原文链接

其余章节请看：javascript

vue 快速入门系列html

初步认识 vue

vue 是什么

Vue (读音 /vjuː/，相似于 view) 是一套用于构建用户界面的渐进式框架。前端

所谓渐进式，就是你能够一步一步、有阶段的使用 vue，没必要一开始就使用全部的东西。vue

命令式框架 vs 声明式框架

jQuery 是命令式操做 DOM 的前端框架。好比点击一个新增按钮，须要出现一个录入信息的弹框，在 jQuery 中，咱们须要在新增按钮被点击的时候，发出一个命令，让录入信息的弹框显示。随着交互愈来愈复杂，代码中会有至关一部分的代码是在操做 DOM，很差维护的问题也就出现了。java

如今主流的框架 vue、angular 和 react 都是声明式操做 DOM 的框架。所谓声明式，就是咱们只须要描述状态与 DOM 之间的映射关系，就能够将状态渲染成视图。状态到视图的转换，框架会帮咱们作，不须要咱们手动去操做 DOM。咱们只须要关注状态的维护，而不用再关心 DOM 的操做。react

hello-world

直接用 script 的方式引入 vue，开始咱们的第一个例子。webpack

// 新建 demo/1.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 模板将会替换挂载的元素。最后显示的是 section，而不是 div -->
    <div id='app'></div>
    <script type="text/x-template" id="tpl">
        <section>
            {{ message }}
            <p v-if="seen">如今你看到我了</p>
        </section>
    </script>

    <script>
    var app = new Vue({
        el: '#app',
        // 模板。描述状态与 DOM 之间的关系。
        template: '#tpl',
        // 状态
        data: {
            message: 'Hello Vue!',
            seen: true
        }
    })
    </script>
</body>
</html>

Tip：笔者使用 anywhere 来启动一个服务器。经过 npm install anywhere --global 便可安装。在任意目录下执行 anywhere 就能启动一个服务，也能够指定端口启动 anywhere -p 8090。web

进入 demo 目录，启动服务:vue-router

$ anywhere
Running at http://169.254.53.24:8000/
Also running at https://169.254.53.24:8001/

经过浏览器请求 1.html 页面：http://169.254.53.24:8000/demo/1.html
页面显示：
Hello Vue!
如今你看到我了

若是在浏览器控制台下执行 app.seen = false，你会发现页面中的 如今你看到我了 不见了。vuex

在这个例子中，明面上咱们作的只有：在模板中描述状态与 DOM 之间的关系。背地里，vue 帮咱们把状态渲染成视图，若是咱们更改了状态（数据），视图会自动更新，无需咱们操做 DOM。

vue 的开发模式

vue 框架的开发模式是多样化的。能够把 vue 当成 js 库来使用；也可使用 .vue 单文件形式配合 webpack 使用，必要时还可使用 vuex 来管理状态，vue-router 来管理路由。