|
[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>
运行页面如下：
上面是初始加载页面后的效果， 我们来点击下面的按钮， 可以实现如下结果：
添加弹出的alert框确定， 会实现页面计数器数值的增加， 如下图：
| 
窥视卡
雷达卡
发表于 2018-12-13 17:34:43
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2018-12-13 17:47:37
发表于 2018-12-13 18:40:12
