一丶代码实战
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">{{message}}</div>
<script src="../js/vue.js"></script>
<!--如果没有安装vue.js,就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script>
// let(变量)/const(常量)
// 编程范式:声明式编程
// 创建Vue对象的时候,传入了一些option:{}
// {}中包含了el属性:该属性决定了这个Vue对象挂载到哪一个元素上,
// 很明显,这里是挂载到了id为app的元素上
// {}中包含了data属性:该属性中通常会存储一些数据
// 这些数据可以是我们直接定义出来的,比如像上面这样
// 也可能是来自网络,从服务器加载的
const app = new Vue({
el: "#app",//用于挂载管理的元素
data:{//定义数据
message:"Hello Ting,I am key!"
}
})
//传统js的做法(编程范式:命令式编程)
//1.创建div元素,设置id属性
//2.定义一个变量叫message
//3.message变量放在前面的div元素中显示
</script>
</body>
</html>