new Vue({
el:"#root",
template:'<div>this is template</div>'
})
const app = new Vue({
// el:"#root",
template:'<div>{{text}}</div>'',
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=0
setInterval(()=>{
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更新的时候调用。有用的方法,调试利器复制代码
熟悉vue的各个api。少走弯路、高效开发。复习一遍,开始~~~