[Vue.js]学习笔记-Vue.js监听属性-watch

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

另： Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

Vue.js 监听属性关键词: watch。

Vue通过监听属性watch来响应数据的变化。

我们通过一下实现计数器的实例，来学习下Vue.js的监听属性watch。

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 苏飞论坛(sufeinet.com)</title>

<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>

</head>

<body>

<div id = "app">

<p style = "font-size:25px;">计数器: {{ counter }}</p>

<button @click = "counter++" style = "font-size:25px;">点我</button>

</div>

<script type = "text/javascript">

var vm = new Vue({

el: '#app',

data: {

counter: 1

}

});

vm.$watch('counter', function(nval, oval) {

alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');

});

</script>

</body>

</html>

运行页面如下：

[attach]7910[/attach]

上面是初始加载页面后的效果，我们来点击下面的按钮，可以实现如下结果：

[attach]7911[/attach]

添加弹出的alert框确定，会实现页面计数器数值的增加，如下图：

[attach]7912[/attach]