一、单向绑定就是：修改视图，数据不变；修改数据（app.name="1234"），视图会变
二、双向绑定：修改视图，数据会变；修改数据，视图会变
demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-model表单数据双向绑定</title>
</head>
<body>
<!--
下面情况是：单向绑定
单向绑定就是：修改视图，数据不变；修改数据（app.name="1234"），视图会变
-->
<div id="app">
<input :value="name">
<span>{{name}}</span>
<br>
<!--
双向绑定：修改视图，数据会变；修改数据，视图会变
-->
<input :value="name" @input="output">
<!--等价写法如下-->
<!--<input :value="name" @input="event=> name=event.target.value"> -->
<span>{{name}}</span>
<br>
<!--
v-model
双向绑定：修改视图，数据会变；修改数据，视图会变
-->
<input v-model="name">
<span>v-model:{{name}}</span>
</div>
<script src="./node_modules/vue/dist/vue.global.js"></script>
<script type="text/javascript">
const {createApp} = Vue;
const app = createApp({
data(){
return {
name:"测试"
}
},
methods:{
output(event){
console.log("输入的值为：",event.target.value);
this.name=event.target.value;//将输入框的值赋值给视图。
}
}
}).mount("#app");
console.log("app:",app);
</script>
</body>
</html>
