vue 双向数据绑定

双向数据绑定

双向数据绑定 MVVM vue就是一个MVVM的框架

M model

V view

在改变数据时同时也会改变视图

 <input type="text" v-model="msg" />
 <li>{{msg}}</li>

通过v-model引入数据msg，和直接数据绑定，改变input文本框的时，li标签内的绑定数据也同时改变

按钮事件

<button v-on:click="getMsg()">获取表单里面的数据</button>

getMsg(){
      // alert('vue方法执行了')
      alert(this.msg)
    },

获取dom节点改变style

<div ref="box">这是一个BOX</div>
    <button v-on:click= "changeBackground()">改变box颜色</button>

changeBackground(){
      this.$refs.box.style.background = 'red'
    }