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>
输出
这是我们使用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 }}中的值。
如果我们更改了控制台中消息的值,浏览器中也会反映相同的值。例如:
控制台细节
在上面的控制台中,我们已经打印了vue_det对象,它是Vue的一个实例。我们使用“vuejs is interesting”更新消息,浏览器中的消息会立即更改,如上面的屏幕截图所示。
这只是一个最基本的示例,显示了VueJS与DOM的交互以及我们如何操作它。在接下来的几章中,我们将了解指令、组件、条件循环等。