Vue.js框架--双向数据绑定,用ref获取dom节点（四）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/hlx20080808/article/details/82182289

主要操作技能：

    双向数据绑定  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>

效果：