代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 1.引入vue.js -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> -->
<script src="./js/vue.min.js"></script>
</head>
<body>
<!-- 2.定义app div,此区域作为vue的接管区域 -->
<div id="app">
<!-- {{}} 双括号是vue的插值表达式,将表达式的值输出到html页面 -->
{{value}}<br>
{{person}}<br>
{{names}}<br>
</div>
</body>
<script>
//3.创建vue实例,接管app区域
var VM = new Vue({
//定义 vue实例的挂载元素节点,表示vue接管该div
el:'#app',
data:{
value:"测试数据",
//对象类型
person:{
name:"张三",
age:18
},
//数组类型
names:["王五", "赵六"],
},
});
//4.定义model(数据对象)
</script>
</html>
测试结果:
传统方式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
</div>
</body>
<script src="./js/jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function () {
$("#app").append("<h2>Hello World! !</h2>");
});
</script>
</html>
jQuery中,如果 DOM 发生变化, js代码也需要做相应的改变,高耦合
vue方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{name}}</h2>
</div>
</body>
<!-- <script src="./js/jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function () {
$("#app").append("<h2>Hello World! !</h2>");
});
</script> -->
<script src="js/vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app", //挂载点
data: {
name: "Hello Word! !",
},
});
</script>
</html>
在用 Vue中,只需要定义好展示数据,并把它放在 DOM 合适的位置就可以。