深入理解Vue数据绑定-优快云博客

本文链接：https://blog.youkuaiyun.com/Json_book/article/details/123850515

本文详细探讨了Vue.js中的数据绑定机制，包括如何使用v-bind和v-model指令实现视图与模型之间的双向数据同步，以及在实际开发中如何有效地利用这一特性进行状态管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue数据绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- Vue中有两种数据绑定方式
		 1、单向绑定(v-bind):数据只能从data流向页面
		 2、双向绑定(v-model):数据可以从data流向页面也可以从页面流向data
		 备注:双向绑定一般都应用再表单元素上,因为只有表单元素具有数据属性。	
		 -->
		<!-- 完成数据绑定 -->
		<div id="nav">
			<!-- 单项数据绑定仅仅为vue实例 -->
			单向数据绑定:<input type="text" v-bind:value="name" /><br />
			双向数据绑定:<input type="text" v-model:value="name" /><br />
			<!-- 简写 -->
			单向数据绑定:<input type="text" :value="name" /><br />
			双向数据绑定:<input type="text" v-model="name" />
		</div>
		<div id="root">
			<hr/>
			<h1>第二指定容器写法:{{name}}</h1>
		</div>
		<script type="text/javascript">
			//阻止vue再启动时生成生产提示
			Vue.config.productionTip = false;
			new Vue({
				el: '#nav',
				data: {
					name: '张三',
				}
			})
			/* 第二种写法 函数式 */
			const v = new Vue({
				data:function(){
					return {
						name:"李斯何许人也"
					}
				}
			})
			console.log(v);
			setTimeout(()=>{
				v.$mount("#root")
			},1000)
		</script>
	</body>
</html>