App2.0配置:Vue双向绑定和获取dom节点
1、需求:效果展示如下,
当“获取第二个变淡里面数据”,弹出输入的文字,点击“确定”之后,box字体变红
2、源代码如下,
<template>
<!-- Vue双向绑定和获取dom节点 -->
<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>
<hr>
<div ref="box">我是一个box</div>
<input type="text" ref="userinfo" />
<button v-on:click="getInputValue()">获取第二个表单里面数据</button>
</div>
</template>
<script>
//双向数据绑定:MVVM vue就是一个MVVM框架
/*
M model
V view
model改变会影响视图,视图改变反过来会影响model
双向数据绑定必须在表单里面使用
*/
export default {
name: 'App', //组件名字,无实际含义
data() { //业务逻辑里面定的数据
return {
msg: 'Vue2.0'
}
},
methods: {
getMsg(){
//alert('vue方法执行了')
alert(this.msg)
},
setMsg(){
this.msg="恢复初始位置vue2.0";
},
getInputValue(){
//获取表单dom节点
console.log(this.$refs.userinfo);
this.$refs.box.style.background='red';
alert(this.$refs.userinfo.value)
}
}
}
</script>
<style>
</style>