Vue学习——双向数据绑定
双向数据绑定
1.vue是一种MVVM的数据语言，V指View，M指Model，双向数据绑定指的就是View改变能够影响Model，Model改变也能影响View。
2.双向数据绑定只能够在表单里面使用。
使用举例
<template>
<div id="app">
<h2>{{msg}}</h2>
<input type="text" v-model='msg' />
</div>
</template>
<script>
export default { /*export default 与export、new Vue的区别①*/
data () { /*业务逻辑里面定义的数据*/
return {
msg: '你好vue'
}
}
}
</script>
程序解释：
上述代码表示将表单元素输入框与msg数据绑定，双向绑定体现在改变input输入框的内容，显示在页面上的输入框也会进行改变。
进一步学习
vue的双向数据绑定，从上面例子输入框对msg内信息进行绑定后改变输入框的内容随之msg的内容也会改变，我们可以通过设置一个按钮alert出msg的内容并且我们也可以去改变msg的内容来改变输入框的内容，让双向数据绑定看起来更加直观：
<template>
<div id="app">
<h2>{{msg}}</h2>
<input type="text" v-model='msg' />
<button v-on:click="getMsg()">获取表单里面的数据get</button>
/* v-on：click绑定了名为getMsg（）的methed*，v-on是vue提供一种属性/
<button v-on:click="setMsg()">设置表单的数据set</button>
<br>
<br>
<hr>
<br>
<br>
<input type="text" ref="userinfo" />
<br>
<br>
<div ref="box">我是一个box</div>
<br>
<br>
<button v-on:click="getInputValue()">获取第二个表单里面的数据</button>
</div>
</template>
<script>
export default {
data () { /*业务逻辑里面定义的数据*/
return {
msg: '你好vue'
}
},methods:{ /*放方法的地方*/
getMsg(){
// alert('vue方法执行了');
//方法里面获取data里面的数据
alert(this.msg);
},
setMsg(){
this.msg="我是改变后的数据";
}, getInputValue(){
//获取ref定义的dom节点
console.log(this.$refs.userinfo);
this.$refs.box.style.background='red';
alert(this.$refs.userinfo.value);
}
}
}
</script>
<style lang="scss">
</style>
【注】：
1、export与export default的作用是实现组件的复用，在组件所在文件中与new Vue是一样的作用。
2、export代表把这个组件A导出去，那么我们可以在另一个文件中通过：import{组件名1，组件名2…} from ‘组件A所在js文件名.js’。
3、export default与export不同的是二者不能同时使用并且export default只能有一个，通过export default导出的组件时引入方式为：import 组建名 from ‘组件A所在js文件名.js’。
4、$ref是vue提供的一个属性，用来获取dom节点。