vue.js中$watch的用法示例_javascript技巧
vue.js是一个数据驱动的web界面库。Vue.js只聚焦于视图层，可以很容易的和其他库整合。代码压缩后只有24kb
Vue.js 提供了一个方法 watch，它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。
在实例化时为每个键调用 $watch() ;
&template&
　　//观察数据为字符串或数组
　　 &input v-model="example0"/&
　　 &input v-model="example1"/&
　　/当单观察数据examples2为对象时，如果键值发生变化，为了监听到数据变化，需要添加deep:true参数
　　 &input v-model="example2.inner0"/&
&/template&
　　 export default {
　　　　　　data(){
　　　　　　　　return {
　　　　　　　　　　example0:"",
　　　　　　　　　　example1:"",
　　　　　　　　　　example2:{
　　　　　　　　　　　　inner0:1,
　　　　　　　　　　　　innner1:2
　　　　　　　　　　}
　　　　　　　　}
　　　　　　},
　　　　　　watch:{
　　　　　　　　example0(curVal,oldVal){
　　　　　　　　　　console.log(curVal,oldVal);
　　　　　　　　},
　　　　　　　　example1:'a'，//值可以为methods的方法名
　　　　　　　　example2:{
　　　　　　　　　//注意：当观察的数据为对象或数组时，curVal和oldVal是相等的，因为这两个形参指向的是同一个数据对象
　　　　　　　　　　handler(curVal,oldVal){
　　　　　　　　　　　　conosle.log(curVal,oldVal)
　　　　　　　　　　},
　　　　　　　　　　deep:true
　　　　　　　　}
　　　　　　},
　　　　　　methods:{
　　　　　　　　a(curVal,oldVal){
　　　　　　　　　　conosle.log(curVal,oldVal)
　　　　　　　　}
　　　　　　}
以上就是这篇的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问的大家可以留言交流。24183人阅读
最近公司用vue框架写交互，之前没怎么写过，但是很多数据双向绑定的东东跟angular很像！所以上手很快！哈哈
今天就碰到一个vue的问题啊！！产品需求是，datetimepick时间选择器一更改时间，就重新ajax获取数据渲染图表，很简单的需求啊！用angula ng-change监听inpu框框，分分钟搞定啊！用特么js原生 on-change也分分钟搞定啊！问题是尼玛的VueJs对input框没有change事件！尼玛坑爹啊！（不知道是不是我没找到，反正api里没有，goole了半天，也没有，要是有的话，麻烦留言告诉我，谢谢！！）
翻了半天api最后换了$watch()方法，才搞定这个需求，我梳理了方法如下，$watch()监听某个值（双向绑定）的变化，一旦发生变化，就调用引号里的方法，从而达到change事件监听的效果！！
var v_assetManage_controller = new Vue({
el: '.LSee-index',
trendQueryTimeCtr: {
startTime: '',
endTime: ''
ready: function() {
methods: {
queryTrendData: function(){
//do some here
'trendQueryTimeCtr.startTime': 'queryTrendData',
'trendQueryTimeCtr.endTime': 'queryTrendData'
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：88777次
积分：1048
积分：1048
排名：千里之外
原创：29篇
评论：10条
(2)(1)(2)(3)(1)(2)(1)(2)(13)(1)(1)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'1.{{message}}输出data数据中的message。
2.v-for="todo in todos"输出data数据中的dotos数组
3.v-on:click="aaaa"绑定methods中的aaaa()事件，可以简写为@click
4.v-model="input" 输出data数据中input的值，双向绑定。
5.this.$dispatch("aaa", this.msg)向上派发事件，aaa写在events中
6.:id="branch"表示id的值由data数据中的branch决定，通常用于for循环&template v-for="branch in branches"&
　　&!--:为传入的branch值--&
　　&input type="radio" name="branch" :id="branch" :value="branch" v-model="currentBranch"&&label :for="branch"&{{branch}}&/label&&/template&
7.:class="{bold: isFolder}"或:class="{isFolder1 & 0 ? 'aaa1' : 'bbb1' }"表示当isFolder为true时class=bold。
8.v-show="open"表示当open为true时显示
9.v-if="isFolder"表示当isFolder为true时显示
10.v-show与v-if的区别为当元素不显示时，v-show可以将data中的open设置为false，实现双向数据绑定
11.子组件获取数据的方式
例：在父级中设置&item class="item" :model="treeData"&&/item&子级中使用poent("item", {
props: ['model']
...})的方式获取
12.created：生命周期，DOM还未形成之前
13.computed：生命周期，在例如:class="{bold: isFolder}中的isFolder是true还是false的时候执行
14.在子级下的数据data的写法为
data：function() {
open: false
以上的return值表示open的获取，不表示将open返回到父级，与双向绑定无关.
var Person = Vue.extend({
template: "&div&&span&name: &/span&{{name}}&span&age: &/span&{{age}}&/div&",
data: function() {
name: "lili",
15.{{key | filter}}表示key通过filters中的filter()函数进行过滤
16.v-for="entry in data | filterBy filterKey"表示在循环中直接进行数据过滤
16.debounce="300"表示延迟执行300ms
17.v-html相当于&div v-html="html"&&/div&&!-- 相同 --&&div&{{{html}}}&/div&即可以输出html的标签，在表单提交的时候不使用，防止xss攻击
18.watch表示监听watch: {& & currentBranch: 'fetchData'}当打他数据中的currentBranch发生改变时，执行fetchData函数
19.slot的使用
&div class="modal-header"&
&slot name="header"&
default header
&div class="modal-body"&
&slot name="body"&
default body
&h3 slot="header"&custom header&/h3&
slot会将defaut中的default header变为custom header。
20.sync实现双向数据绑定，将父级通过props传入到子级中的变量通过子级进行修改，双向绑定后会改变父级中的对应传到子级的那个变量
21.transition添加css属性实现动态效果例一个class="expand"的属性
.expand-transition {
transition: all .3
height: 30
padding: 10
background-color: #
}//表示正常情况下的效果
.expand-enter, .expand-leave {
height: 0;
padding: 0 10
opacity: 0;
}//元素在消失或显示的时候展示的效果
&div transition="expand"&&/div&直接写在html标签中
&div v-if="show" :transition="transitionName"&hello&/div&
el: '...',
show: false,
transitionName: 'expand'
//写在Vue里
写在Vue里22.
var data = {a: 1};
var vm = new Vue({
el: '#app',
data: data
console.log(vm.a === data.a);//true
console.log(data.a);//2
data.a = 3;
console.log(vm.a);//3
23.v-for循环输出，点击事件可以通过设置参数获取位置例:&button v-on:click="removeTodo($index)"&X&/button&23.子级下的子级添加组件的方式例：
var Person = Vue.extend({});
var Contact = Vue.extend({
template: "&person&&/person&",
components: {
'person': Person
&24.项目实例：
阅读(...) 评论()vuejs怎么watch对象里某个属性的变化呢？ - 知乎25被浏览40732分享邀请回答02 条评论分享收藏感谢收起
import Store from './store.js';
export default {
//将Store.state绑定在data上
data:Store.state,
// 通过这种语法来watch就行，文档里有。。。看需求，还可以直接watch data，使用deep:true来深度观察
'data.status':{
handler:(val,oldVal)=&{
//要执行的任务
//这里不知道怎么才能修改到this.data的数据，有知道的麻烦告知
//现在知道的就是通过直接修改Store.state的方式来更新数据，当然效果和修改this.data是一样的
// 深度观察
613 条评论分享收藏感谢收起查看更多回答