data数据的监听（侦听）

对于data的值的监听，可以用watch中与data中的参数命名一致的值做为函数进行获取监听变动前后的值再做逻辑判断，如下图所示。

示例代码

<template>
  <div>
   <p :class="classDemo">{{ msg }}</p>
    <button @click="change">切换</button>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        msg:'hello world',
        classDemo:{
          'active':true
        }
      }
    },
    methods:{
      change(){
        this.msg = 'new world'
      }
    },
    watch:{
      msg(newVal,oldVal){
        alert(newVal);
        alert(oldVal);
      }
    }
  }
</script>
<style>
  .active{
    color: red;
    font-size: 40px;
  }
</style>

表单绑定

表单作为Web中最重要的交互几乎无处不在，Vue 提供了v-mode进行绑定。

常见的修饰符：

.lazy --回车后响应 懒加载

.number --仅接收数字

.trim --去除左右空格

<template>
  <p>{{msg}}</p>
  <form>
    <input type="text" v-model="msg">
  </form>

</template>

<script>
  export default {
    data(){
      return{
        msg:'hello world'
      }
    }
  }
</script>

VUE 操作DOM

如何通过VUE进行DOM操作，通过给相应的ref值定位，然后获取并操作相应数据

示例

<template>
  <p ref="msg">{{msg}}</p>
  <form>
    <input type="text" v-model="msg" ref="inputName">
  </form>
  <button @click="handleClick">click</button>

</template>

<script>
  export default {
    data(){
      return{
        msg:'hello world'
      }
    },
    methods:{
      handleClick(){
        alert(this.$refs.inputName.value);
        this.$refs.msg.innerText='123456';
      }
    }
  }
</script>