开发学院

您的位置:首页>教程>正文

教程正文

VueJS 前言

VueJS 前言

  Vue是一个用于构建用户界面的JavaScript框架。其核心部分主要集中在视图层。我们将在本教程中使用的是Vue2.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>

输出

first_vuejs.jpg

  这是我们使用VueJS创建的第一个应用程序。如上所示,我们在的开头包含了vue.js。超文本标记语言文件。

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

  在body中添加了一个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实例,它首先获取指定id的DOM元素,即el: '#intro',它是div的id。数据message被分配了值“My first VueJS Task”。VueJS与DOM交互,并使用“My first VueJS Task”替换DOM {{ message }}中的值。

  如果我们更改了控制台中消息的值,浏览器中也会反映相同的值。例如:

vuejs_interesting.jpg

控制台细节

 

vuejs_is_interesting.jpg

  在上面的控制台中,我们已经打印了vue_det对象,它是Vue的一个实例。我们使用“vuejs is interesting”更新消息,浏览器中的消息会立即更改,如上面的屏幕截图所示。

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