VUE 学习 StudyLearning-4-事件监听

事件监听

HTML:

<div id="app">
<p style = "font-size:25px;">计数器: {{ counter }}</p>
<button @click = "counter++" style = "font-size:25px;">点我</button>
</div>

JS:

var vue = new Vue({
    el: '#app',
    data: {
        counter: 1
    }
});
vue.$watch('counter', function(nowData, oldData) {
    alert('计数器值的变化 :' + oldData + ' 变为 ' + nowData + '!');
});

1. 使用watch 函数 监听vue.$watch(‘监听属性’,function 回调函数(原数据 ,现数据)

补充：

除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如：

实例
<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>Alexa : {{alexa}}</h1>
</div>
<script type="text/javascript">
// 我们的数据对象
var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
var vm = new Vue({
    el: '#vue_det',
    data: data
})
 
document.write(vm.$data === data) // true
document.write("<br>") 
document.write(vm.$el === document.getElementById('vue_det')) // true
</script>