本文共 1542 字,大约阅读时间需要 5 分钟。
熟悉vue的各个api。少走弯路、高效开发。复习一遍,开始~~~
new Vue({ el:"#root", template:' '})const app = new Vue({ // el:"#root", template:' '', data:{ text:'text' }})app.$mouont("#root") //挂在到id为root的节点上setInterva(()=>{ app.$data.text +=1 //获取data中数据的方法 $data},1000)console.log(app.$data)console.log(app.$props)console.log(app.$el)console.log(app.$options)app.$options.render=(h)=>{ //重新赋值 render 方法 return h('div',{},'new render function')}console.log(app.$root === app) //同一个货console.log(app.$children) //子组件console.log(app.$slots) //插槽console.log(app.$scopedSlots) //可以通过这种方式引用插槽console.log(app.$refs) //模板的引用,返回节点对象console.log(app.$isServer) //服务端渲染时用const unWatch = app.$watch('text',(newText,oldText)=>{ console.log(`${newText}:${oldText}`)})setTimeOut(()=>{ unWatch()},2000)app.$on('test',(a,b)=>{ //事件监听,跟$emit方法配合使用 console.log(`test emited'+{a}{b}`)})app.$emit('test',(1,2)app.$once('test',(a,b)=>{ //只监听一次 console.log(`test emited ${a} ${b})})let i=0setInterval(()=>{ i++ app.text +=1 app.obj.a = i app.$set(app.obj,'a',i) app.$delete() app.$emit('test',1,2)},1000)app.$forceUpdate() //某个对象上的属性未声明,改变是不会触发响应式的。 //app.obj.a = 1 可以通过强制刷新, 少用app.$set(app.obj."a",100) //补救方案,vue会声明,app.$delete(app.obj.a) //对应删除方案app.$nextTick({}) //dom渲染完成,下次dom更新的时候调用。有用的方法,调试利器复制代码
转载地址:http://odzza.baihongyu.com/