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>