概述
#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>
运行效果
如果在单项的input的value改变,其他两处不会发生改变,只有第一处改变了
如果在双向的input的value发生了改变,所有三处都会变
点击按钮,也是三处都会变,因为在funtion直接改变了内存
vue中的this是vue封装好给我们使用的,跟平常方法里面的this是不同的