0104.单双向数据绑定及事件绑定_单记录数据绑定定义-优快云博客

本文链接：https://blog.youkuaiyun.com/w_wangewanbuhuidege/article/details/114335648

001_XXXX(h3)

vue单向数据流绑定属性值 v-bind: (属性) 简写 :(属性)
- 例子：<input v-bind:value="name" v-bind:class="name">
- 单向数据绑定内存改变影响页面改变
- v-bind就是对属性的简单赋值,当内存中值改变，还是会触发重新渲染
vue双向数据流 v-model 只作用于有value属性的元素
- 例子：<input v-model="name" v-bind:class="name">
- 双向数据绑定页面对于input的value改变，能影响内存中name变量
- 内存js改变name的值，会影响页面重新渲染最新值
事件绑定v-on:事件名=“表达式||函数名” 简写 @事件名=“表达式||函数名”
- 事件名可以是原生也可以是自定义的
总结
- v-model 双向数据绑定
  - vue页面改变影响内存（js）
  - 内存（js）改变影响vue页面
- v-bind 单向数据绑定只是内存（js）改变影响vue页面
源代码

<html>
<head>
	<title></title>
</head>
<body>
	<div id="app"></div>

	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript">
		console.log(this)
		new Vue({
			el:"#app",
			template:`
				<div>
				单向数据绑定
				<input type='text' v-bind:value="name_dl" :class="name_dl"><br>
				双向数据绑定
				<input type='text' v-model:value="name_dl" ></br>
				{{ name_dl }}
				<button v-on:click="change_dl">点击我改变name_dl变量</button>
				<!--简写形式   v-on:click 等价于 @click -->
				<button @click="change_dl">点击我改变name_dl变量</button>
				</div>
			`,
			data:function(){
				return {
					/* 变量初始化 */
					name_dl:'hello',
					input_coreclassname_dl:'xxx_dl'
				}
			},
			methods:{
				change_dl:function(){
					console.log(this+'AAA')
					this.name_dl='我改变了，是在方法属性里面定义的方法'
				},
			}
		})
	</script>
</body>
</html>