Vue双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点

Vue 双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点

这是所有的代码，注释做的都很详细

<template>

<!-- vue 的模板里面，所有的内容要被一个根节点包含起来-->
<div id="app">
<h3>{{msg}}</h3> <!-- 绑定业务逻辑里的数据-->
<br>

<input type="text" v-model="msg" /><!-- model实现双向数据绑定-->
<button v-on:click="getMsg()">获取表单里的数据get</button>
<button v-on:click="setMsg()">设置表单的数据set</button>
<br>
<hr>

<input type="text" ref="uid"/>  <!--指定一个ref=uid-->
<br>
<br>
<div ref="box">我是一个box</div> <!-- 指定一个ref=box-->
<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 { // 表示将组件暴露出去
// name: 'App',  给组件起个名字，可以删除
data () {   //业务逻辑里定义的数据
return {
msg: '这里是个vue',  //  msg: "这里是vue" 这里单引号和双引号是一样的结果
}
},
methods:{   //这里是放方法的地方
getMsg(){
//alert('验证一下有没有获取到数据');
alert(this.msg);//  获取到data里面的数据
},
setMsg(){
this.msg='这里是改变后的数据';  //手动设置了msg的值为  '这里是改变后的数据'
},
getinputValue(){
console.log(this.$refs.uid);

alert(this.$refs.uid.value);    //在这里用$refs 来获取dom节点 获取其value值
this.$refs.box.style.background='red';    //使用$refs 来指定样式背景为红色
}
}
}
</script>

<style>

</style>

这是总的运行效果：

再来看看部分代码的运行效果

<template>
<!-- vue 的模板里面，所有的内容要被一个根节点包含起来-->
<div id="app">
<h3>{{msg}}</h3> <!-- 绑定业务逻辑里的数据-->
<br>

<input type="text" v-model="msg" /><!-- model实现双向数据绑定-->
<button v-on:click="getMsg()">获取表单里的数据get</button>

</div>
</template>

<script>
/*
双向数据绑定   MVVM   vue就是一个MVVM的框架。

M  model

V  view

MVVM：  model改变会影响视图view，view视图改变反过来影响model

双向数据绑定必须在表单里面使用。

*/
export default { // 表示将组件暴露出去
// name: 'App',  给组件起个名字，可以删除
data () {   //业务逻辑里定义的数据
return {
msg: '这里是个vue',  //  msg: "这里是vue" 这里单引号和双引号是一样的结果
}
},
methods:{   //这里是放方法的地方
getMsg(){
alert('验证一下有没有获取到数据');

}
}
}
</script>

<style>

</style>

model实现双向绑定，在input中写入的value值也影响了msg数据里的值，因为model绑定了’msg’

<template>

<!-- vue 的模板里面，所有的内容要被一个根节点包含起来-->
<div id="app">
<h3>{{msg}}</h3> <!-- 绑定业务逻辑里的数据-->
<br>

<input type="text" v-model="msg" /><!-- model实现双向数据绑定-->
<button v-on:click="getMsg()">获取表单里的数据get</button>

</div>
</template>

<script>
/*
双向数据绑定   MVVM   vue就是一个MVVM的框架。

M  model

V  view

MVVM：  model改变会影响视图view，view视图改变反过来影响model

双向数据绑定必须在表单里面使用。

*/
export default { // 表示将组件暴露出去
// name: 'App',  给组件起个名字，可以删除
data () {   //业务逻辑里定义的数据
return {
msg: '这里是个vue',  //  msg: "这里是vue" 这里单引号和双引号是一样的结果
}
},
methods:{   //这里是放方法的地方
getMsg(){
//alert('验证一下有没有获取到数据');
alert(this.msg);//  获取到data里面的数据
}
}
}
</script>
<style>

</style>

若有疑问或是不解请在下方评论，谢谢。