数据响应式
监听数据变化并在视图（页面）中更新
例子
在谷歌浏览器的控制台中，可以查看vue对象的数据
修改vue对象的数据，页面内容也会跟着改变
双向数据绑定
数据改变，页面显示的数据也跟着改变
用户在页面改变数据（如：在输入框、单选按钮），数据跟着改变
例子
<div id="app">
{{msg}}<br>
<input type="text" v-model="msg"><br>
</div>
这是不符合格式的写法
<input type="button" value="打印app对象" onclick="printApp()">
<script type="importmap">
{
"imports": {
"vue": "./js/vue.esm-browser@3.5.13.js"
}
}
</script>
<script type="module">
import { createApp } from './js/vue.esm-browser@3.5.13.js'
createApp({
data() {
return {
msg: 'Hello Vue!'
}
}
}).mount('#app')
console.log(app)
function printApp(){
console.log(app.msg)
}
</script>
如下图：
解释：
用户该页面的内容（修改input控件的值），会改变模型中的数据
模型中的数据改变了，会影响页面中的div内容
应用场景
<div id="app">
<div>单价：{{price}}</div>
数量：<input type="text" v-model="num" />
<div>合计：{{price * num}}</div>
</div>
<script>
var app = new Vue(
{
el: '#app', //el是element缩写
data: { //数据
price:5800,
num:1,
}
})
</script>