vue单向绑定和双向绑定
一、单向绑定就是：修改视图，数据不变；修改数据（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>