<template>
<div id="app">
<h1>{{ msg }}</h1>
<input type="text" v-model="msg" />
<button v-on:click="getMsg()">获取表单里面的数据</button>
<button v-on:click="setMsg()">设置表单里面的数据</button>
<hr>
<br>
<input type="text" ref="userinfo" />
<button v-on:click="getInputValue()">获取第二个表单里面的数据</button>
<div ref="box">我是一个box</div>
</div>
</template>
<script>
/*
双向数据绑定 MVVM Vue就是一个MVVM框架
M model
V view
MVVM model改变会影响view,view反过来会影响model
双向数据绑定必须在表达里面使用
*/
export default {
name: 'app',
data () {
return {
msg: '双向数据绑定'
}
}, methods: {//自定义方法
getMsg(){
//alert("vue方法执行了");
//方法里面获取data的数据
alert(this.msg)
},
setMsg(){
this.msg="我是改变后的数据";
},
getInputValue(){
//获取ref定义的dom节点
console.log(this.$refs.userinfo);
//获取节点的value
alert(this.$refs.userinfo.value);
//改变box颜色
this.$refs.box.style.background='red';
},
}
}
</script>
<style lang="scss">
</style>
运行截图: