Hello Vue
1.1. 命令式编程
原生js做法(命令式编程)
创建div元素,设置id属性
定义一个变量叫message
将message变量放在div元素中显示
修改message数据
将修改的元素替换到div
1.2 . 声明式编程
vue写法(声明式)
创建一个div元素,设置id属性
定义一个vue对象,将div挂载在vue对象上
在vue对象内定义变量message,并绑定数据
将message变量放在div元素上显示
修改vue对象中的变量message,div元素数据自动改变
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<p>{{name}}</p>
</div>
<script>
//let变量/const常量
//编程范式:声明式编程
const app = new Vue({
el:"#app",//用于挂载要管理的元素
data:{//定义数据
message:"HelloVuejs",
name:"zzz"
}
})
</script>
</body>
</html>