1.vue单向数据流绑定属性值 v-bind: (属性) 简写 :(属性)
例子:<input v-bind:value="name" v-bind:class="name">
单向数据绑定 内存改变影响页面改变
v-bind就是对属性的简单赋值,当内存中值改变,还是会触发重新渲染
2.vue双向数据流 v-model 只作用于有value属性的元素
例子:<input v-model="name" v-bind:class="name">
双向数据绑定 页面对于input的value改变,能影响内存中name变量
内存js改变name的值,会影响页面重新渲染最新值
3.事件绑定v-on:事件名=“表达式||函数名” 简写 @事件名=“表达式||函数名”
事件名可以是原生也可以是自定义的
总结:
v-model 双向数据绑定
vue页面改变影响内存(js)
内存(js)改变影响vue页面
v-bind 单向数据绑定只是内存(js)改变影响vue页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/vue.min.js"></script>
<style type="text/css">
.red{
color:red;
}
</style>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/javascript">
new Vue({
el:'#app',
template:`
<div>
单项数据绑定
<input type="text" v-bind:value="name" :class="redClass"><br/>
双向数据绑定
<input type="text" v-model="name"><br/>
{{ name }}
<hr/>
<h1>事件绑定</h1><br/>
方式一:
<button v-on:click="change">点击我改变name变量</button><br/>
方式二:
<button @click="change">点击我改变name变量</button>
</div>
`,
data:function(){
return {
name:'hello',
redClass:'red',
}
},
methods:{
change:function(){
this.name = "hahaha";
}
}
})
</script>
</html>
运行效果图: