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的交互以及我们如何操作它。在接下来的几章中，我们将了解指令、组件、条件循环等。