第四讲===>阐述vue单双向数据流及事件绑定

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页面

代码

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

	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
		console.log(this)
		new Vue({
			el:"#app",
			template:`
				<div>
				单向数据绑定
				<input type='text' v-bind:value="name" :class="name"><br>
				双向数据绑定
				<input type='text' v-model="name"></br>
				{{ name }}
				<button v-on:click="change">点击我改变name变量</button>
				</div>

			`,
			data:function(){
				return {
					name:'hello'
				}
			},
			methods:{
				change:function(){
					console.log(this)
					this.name='我改变了，是在方法属性里面定义的方法'
				},
			}
		})
	</script>
</body>
</html>
posted @ 2020-03-26 22:21  xl4ng  阅读(145)  评论(0)  编辑  收藏  举报