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”。
如果我们碰巧在控制台中更改了消息的值,则在浏览器中也将反映出来:
控制台详细信息
在上面的控制台中,我们打印了vue_det对象,该对象是Vue的一个实例。我们正在更新消息“ VueJs很有趣”并如上面的屏幕截图所示,立即在浏览器中进行了更改。
这只是一个基本示例,显示了VueJS与DOM的链接以及我们如何操作它。在接下来的几章中,我们将学习指令、组件、条件循环等。