1-5 1.4.6Vue的实例方法ppt课件 Vue.js基础与应用开发实战（微课版）.pptx

1-5 1.4.6 Vue的实例方法教学课件 Vue.js基础与应用开发实战（微课版）1.4.6 Vue的实例方法1vm.$watch(data,callback,options)除了使用数据选项中的watch方法以外，Vue还可以使用实例对象的$watch方法，该方法的返回值是一个取消观察函数，用来停止触发回调。【实例1-9】应用Vue的$watch方法【操作要求】应用Vue的$watch方法输出与观察变量的新值与原值，并返回一个取消观察函数，停止触发回调。【实现过程】创建网页0109.html，编写以下代码要求的功能。x加1 message var vm=new Vue(el:#app,data:x:1,message:)【实现过程】var unwatch=vm.$watch(x,function(newVal,oldVal)if(newVal=5)/之后取消观察 unwatch();this.message=x的原值为+oldVal+，x的新值为+newVal;)上面的代码中，当x的值更新到5时，触发unwatch()，来取消观察。单击按钮时，x的值仍然会变化，但是不再触发watch的回调函数。2vm.$set(target,propertyName/index,value)返回设置的值，这是全局Vue.set的别名，参考Vue.set方法。3vm.$get(expression)为Vue实例传递一个表达式来获得结果，如果表达式抛出错误，该错误会被截获并返回undefined。4vm.$add(key,value)为Vue实例及其$data对象添加一个顶层属性。由于ES5的限制，Vue无法侦测到对象中属性的增加或者删除，所以当需要动态添加/删除属性的时候使用此方法和vm.$delete，但该方法要谨慎使用，因为该方法会使得当前vm对所有watcher进行一次脏检查。5vm.$delete(target,propertyName/index)这是全局Vue.delete的别名，参考Vue.delete方法。6vm.$eval(expression)对一个表达式求值，该表达式可以包含过滤器。7vm.$mount(elementOrSelector)返回vm实例自身，如果Vue实例在实例化时没有收到el选项，则它处于“未挂载”状态，没有关联的DOM元素。可以使用vm.$mount()手动地挂载一个未挂载的实例。如果没有提供elementOrSelector参数，模板将被渲染为文档之外的的元素，并且必须使用原生DOM API把它插入文档中。这个方法返回实例自身，因而可以链式调用其它实例方法。8vm.$forceUpdate()迫使Vue实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。9vm.$nextTick(callback)将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。它跟全局方法Vue.nextTick一样，不同的是回调的this自动绑定到调用它的实例上。10vm.$destroy()完全销毁一个实例，清理它与其它实例的连接，解绑它的全部指令及事件监听器。触发beforeDestroy和destroyed的钩子。在大多数场景中不应该调用这个方法，最好使用v-if和v-for指令以数据驱动的方式控制子组件的生命周期。快乐学习！高效学习！快乐学习！高效学习！祝学习进步！祝学习进步！