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>
若有疑问或是不解请在下方评论，谢谢。