环境准备
官方:https://cn.vuejs.org/
下载vue.js库,如果是在github中下载的js库,找到dist文件夹下的vue.js文件就是我们需要的js库.
helloword
下载好js库后,就可以开始来使用一把了,据说vue使用mvvm模型,将数据,视图,模型进行分离,我们下面就来使用原来js显示数据和vue显示数据的操作的对比来看看helloword:
1.js操作dom显示数据:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
//JS的方式需要操作dom来显示数据
//准备数据
var gareen = {"name":"盖伦","hp":616};
//获取html dom
var div1 = document.getElementById("div1");
//显示数据
console.log(div1);
div1.innerHTML = gareen.name;
}
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
2.vue绑定数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="vue.js"></script>
<div id="div1">
{{gareen.name+gareen.hp+"击飞"}}
</div>
<script>
// Vue的方式
//准备数据
var gareen = {"name":"盖伦","hp":616};
//通过vue.js 把数据和对应的视图关联起来
new Vue({
el: '#div1',
data: {
gareen
}
});
</script>
</body>
</html>