VueJS简介


Vue是用于构建用户界面的JavaScript框架。它的核心部分主要集中在视图层,并且非常容易理解。我们将在本教程中使用的Vue版本是2.0。

由于Vue基本上是为前端开发而构建的,因此在接下来的章节中我们将处理许多HTML,JavaScript和CSS文件。为了理解细节,让我们从一个简单的例子开始。

例子


新建目录,添加index.html文件,将以下内容写到index.html中:

<html>

<head>
    <title>VueJs Introduction</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
</head>

<body>
    <div id="intro" style="text-align:center;">
        <h1>{{ message }}</h1>
    </div>
    <script type="text/javascript">
        var vue_det = new Vue({
            el: '#intro',
            data: {
                message: 'Hello VueJS'
            }
        });
    </script>
</body>

</html>

输出


这是我们使用VueJS创建的第一个应用程序。如上面的代码所示,我们在index.html文件的开头包含了vue.js。

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

在正文中添加了一个div来打印“Hello VueJS”在浏览器中。

<div id = "intro" style = "text-align:center;">
    <h1>{{ message }}</h1>
</div>

我们还在插值中添加了一条消息,即{{}}。这将与VueJS交互并在浏览器中打印数据。为了获得DOM中消息的价值,我们正在创建一个vuejs实例,如下所示:

var vue_det = new Vue({
    el: '#intro',
    data: {
        message: 'Hello VueJS'
    }
})

在上述代码段中,我们正在调用Vue实例,该实例采用DOM元素的ID,即e1:“#intro”,它是div的ID。带有消息的数据被分配了值“Hello VueJS”。 VueJS与DOM交互并使用以下命令更改DOM {{message}}中的值“Hello VueJS”。

hello-vuejs.jpg

如果我们碰巧在控制台中更改了消息的值,则在浏览器中也将反映出来:

vue-console.jpg


控制台详细信息


在上面的控制台中,我们打印了vue_det对象,该对象是Vue的一个实例。我们正在更新消息“ VueJs很有趣”并如上面的屏幕截图所示,立即在浏览器中进行了更改。

这只是一个基本示例,显示了VueJS与DOM的链接以及我们如何操作它。在接下来的几章中,我们将学习指令、组件、条件循环等。