[Vue] Use Vue.js Watchers to Respond to Async Updates
2017-01-20 19:49
453 查看
Use
watchersto keep an eye on your data. Watchers are methods that are invoked when the specified attribute changes. They are useful when you want to perform asynchronous operations in response to changing data.
<template> <section class="container"> <item-description></item-description> <h1 class="title"> {{message | capitalize}} </h1> <button @click="changeMessage" class="button">Change Message</button> <hr> <section> <h2>Mouse event</h2> <div>{{counter}}</div> <div @mouseover="inc">Mouse over here to change counter</div> </section> <section> <h2>Keyboard events</h2> <form @submit.prevent="submit"> <input type="text" v-model="firstName" @keyup.enter="submit" @keyup.alt.ctrl.shift.down="keyeventHandler"/> <button v-bind:disabled="buttonDisabled">{{buttonText}}</button> </form> <div> {{key}} </div> </section> </section> </template> <style scoped> .title { margin: 50px 0; } </style> <script> import ItemDescription from '../components/item-description'; export default { data() { return { message: 'this is my vue!', counter: 0, key: "", firstName: "", buttonText: "Add" } }, computed: { buttonDisabled: function() { return this.firstName == ""; } }, watch: { firstName: function(){ this.buttonText = this.firstName !== "" ? "Add " + this.firstName : "Add Dinosaur"; } }, components: { ItemDescription }, filters: { capitalize(value) { return value.charAt(0).toUpperCase() + value.slice(1).toLowerCase(); } }, methods: { changeMessage() { this.message = "Updated message here!" }, inc() { this.counter += 1; }, keyeventHandler() { this.key = "Ctrl + alt + shift + down is clicked" }, submit() { console.log("form is submitted, the value is", this.firstName); } } } </script>
相关文章推荐
- [Vue] Use Vue.js Component Computed Properties
- poj 3080 Blue Jeans (串)
- [Vue] Create Filters in Vue.js
- [Vue] Import component into page
- Hdu1560 DNA sequence(IDA*)
- 1041. Be Unique (20) PAT 甲级
- UIView的setNeedsLayout, layoutIfNeeded 和 layoutSubviews 方法之间的关系解释
- spark sql下parquet内幕解密
- Instruction set mismatch, PackageSetting搞出的幺蛾子
- spark sql下使用parquet最佳实战
- IEueditor无法使用-window.localstorage报错
- maven javadoc plugin build fails with Java 8 when Javadoc tags are incomplete
- Hive - Built-in Operators
- 跟我学习如何搭建直播页面-直播页面搭建~(3)
- requestAnimationFrame之缓动的应用
- UGUI中动态改变image的sprite
- tf.nn.atrous_conv2d(value, filters, rate, padding, name=None) {#atrous_conv2d}
- request.getSession()几种获取情况之间的差异
- Building Block[HDU2818]
- 小程序 之 require 请求数据绑定