主要操作技能:
双向数据绑定 mvvm: model view view model
ref获得dom节点: ref="username" ==>显示数据this.$refs.username.value
编写代码:
<template>
<div id="app">
<h2>{{msg}}</h2><br />
<input type="text" v-model="msg">
<button @click="getMsg()">获得get表单的数据</button>
<button @click="setMsg()">设置set表单的数据</button><br /><br /><br />
<!--ref主要是获取DOM节点哦!-->
<input type="text" ref="username"/>
<button @click="getInput2()">获得getInput2表单的数据</button><br /><br /><br />
<div ref="box">这是个box</div>
</div>
</template>
/* 双向数据绑定
* MVVM: model view view model
vue 就是一个MVVM框架
model改变会影响试图view;
view 改变会影响模型model;
注意: 双向数据必须在表单里使用哦!
*
*/
<script>
export default {
name: 'app',
data() { //业务逻辑的数据
return {
msg: 'hello'
}
},
methods: {
getMsg() { //get
alert(this.msg);
},
setMsg() {//set
this.msg="我是改变后的数据哦!";
},
getInput2(){
//获取ref定义的dom节点
console.log(this.$refs.username);
//获取ref定义的dom节点改变颜色
this.$refs.box.style.background="red";
//获取文本username数据
alert(this.$refs.username.value);
}
}
}
</script>
效果: