第四课 本文件用于学习vue双向绑定
<template>
<!-- 本文件用于学习vue双向绑定 -->
<div id="app">
<h2>{{msg}}</h2>
<input type="text" v-model='msg' />
<button v-on:click="getMsg()">获取表单里面的数据get</button>
<button v-on:click="setMsg()">设置表单的数据set</button>
<br>
<br>
<hr>
<br>
<br>
<input type="text" ref="userinfo" />
<br>
<br>
<div ref="box">我是一个box</div>
<br>
<br>
<button v-on:click="getInputValue()">获取第二个表单里面的数据</button>
</div>
</template>
<script>
/*
双向数据绑定 MVVM vue就是一个MVVM的框架。
M model
V view
MVVM： model改变会影响视图view，view视图改变反过来影响model
双向数据绑定必须在表单里面使用。
*/
export default {
data () { /*业务逻辑里面定义的数据*/
return {
msg: '你好vue'
}
},methods:{ /*放方法的地方*/
getMsg(){
// alert('vue方法执行了');
//方法里面获取data里面的数据
alert(this.msg);
},
setMsg(){
this.msg="我是改变后的数据";
}, getInputValue(){
//获取ref定义的dom节点，函数绑定事件的固定用法this.$refs.userinfo
console.log(this.$refs.userinfo);
alert(this.$refs.userinfo.value);
//this.$refs固定用法，box与上面div标签对应
this.$refs.box.style.background='red';
}
}
}
</script>
<style lang="scss">
</style>
