优秀的编程知识分享平台

网站首页 > 技术文章 正文

VUE简单入门基础教程(三)简介（vue简易教程）

nanyue 2024-10-29 14:50:26 技术文章 16 ℃

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

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

在此示例中，我们将使用vuejs的开发版本。

例

<html>
   <head>
      <title>VueJs Introduction</title>
      <script type = "text/javascript" src = "js/vue.js"></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: 'My first VueJS Task'
            }
         });
      </script>
   </body>
</html>

输出量

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

<script type = "text/javascript" src = "js/vue.js"></script>

正文中添加了一个div，该div 在浏览器中显示“我的第一个VueJS任务”。

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

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

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

在上面的代码片段中，我们正在调用Vue实例，该实例采用DOM元素的ID，即e1：'＃intro'，它是div的ID。消息中的数据分配了值“我的第一个VueJS Task”。VueJS与DOM交互，并通过“我的第一个VueJS Task”更改DOM {{message}}中的值。

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

控制台详细信息

在上面的控制台中，我们打印了vue_det对象，该对象是Vue的实例。我们正在使用“ VueJs有趣”更新消息，并且如上图所示，浏览器中的消息也立即更改。

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

Tags：

猜你喜欢

最近发表
标签列表