Vue核心特性之一: 响应式
Vue框架当数据发生改变时,视图会自动进行更新
访问和修改数据
通过实例.属性名进行修改
<script>
const V = new Vue(
{
// 通过el配置选择器,指定Vue管理的是那个盒子
el: "#app",
data:{
msg : "Hello, World",
}
}
)
</script>
<script>
// 访问数据
console.log("原始数据:", V.msg)
// 修改数据
V.msg = "你好, 世界"
console.log("修改后的数据:", V.msg)
</script>
完整版代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式数据</title>
</head>
<body>
<div id = "app">
<p>{{ msg }}</p>
</div>
<script src="../vue.js"></script>
<script>
const V = new Vue(
{
// 通过el配置选择器,指定Vue管理的是那个盒子
el: "#app",
data:{
msg : "Hello, World",
}
}
)
</script>
<script>
// 访问数据
console.log("原始数据:", V.msg)
// 修改数据
V.msg = "你好, 世界"
console.log("修改后的数据:", V.msg)
</script>
</body>
</html>
