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>