vue.js是一套渐进式Javascript框架。是一个小巧好用的框架。
简介
Vue既然是一个js框架，那么基本上js能做的事情它都能做。Vue跟大多数js框架类似，都是优化js对DOM的操作。什么是DOM操作呢？看下面：
<div id="app"></div>
如果想通过JS动态设置div的内容。纯JS的操作如下：
document.getElementById("app").innerHTML='Hello JS！';
以上就是一段简单的JS进行DOM操作的例子。Vue.js主要就是让DOM操作变得更简单和高效、灵活。
基本使用
如果Vue同样要完成以上js的案例。配置和使用如下：
第一步：引用Vue.js框架
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
第二步：html准备
<body>
<div id="app">
{{ message }}
</div>
</body>
说明：以上{{ message }}就是vue语法，此处的{{ message }}可以理解为一个占位变量，等待Vue给其赋值。
第三步：Vue激活
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
说明：
el：表示待操作的标签所对应的ID。
data：是Vue的变量定义区域。以上代码中Vue定义了一个变量名为message。此变量会自动注入到第二步中的占位变量所在的位置。
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
</body>
</html>
