脚本宝典收集整理的这篇文章主要介绍了vuejs 检视组件结构,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
我们可以使用vue-devtools很方便检验页面的组件结构,包括组件的列表,嵌套关系,以及每个组件的内部数据成员的值。为此,我们做一个简单的布局结构,界面如下:
其中嵌套了一个header和一个content组件,content组件内还有c1,c2两个组件嵌套其中。嵌套结构为
->ROOT
->header
->content
->c1
->c2
代码:
<script src="https://unpkg.COM/vue/dist/vue.js"></script>
<div id="app">
<hdr></hdr>
<ctnt><c1></c1><c2></c2></ctnt>
</div>
<script>
var hdr = {
'template':'<div>{{title}}</div>',
data () {
return {title: 'header'}
}
}
var ctnt = {
'template':'<div>{{title}}<slot></slot></div>',
data () {
return {title: ''}
}
}
var c1 = {
'template':'<div class="c1">{{title}}</div>',
data () {
return {title: 'c1'}
}
}
var c2 = {
'template':'<div class="c2">{{title}}</div>',
data () {
return {title: 'c2'}
}
}
var app = new Vue({
components:{
hdr,ctnt,c1,c2
}}
)
app.$mount('#app')
</script>
<style type="text/css">
.c1{
border: solid 1px blue ;
float: left;
}
.c2{
border: solid 1px green;
float: left;
}
</style>
可以使用chrome直接打开文件,并记得在插件内配置vue-devtools,允许它访问文件网址。随后打开Chrome devtools,点开vue面板。可以看到
组件的树形结构在左边展示
点击此树形结构的组件项目,可以在右侧看到组件的数据成员值,且在用户界面上,对应的组件会被加亮。
vue-devtools检视组件的能力,查看vue组件内部,从而可以帮助我们调试程序
作者:刘传君
创建过产品,创过业。好读书,求甚解。
可以通过 1000copy#gmail.com 联系到我
bootstrap小书 https://www.gitbook.com/book/...
http小书 http://www.ituring.com.cn/boo...
Git小书 http://www.ituring.com.cn/boo...
以上是脚本宝典为你收集整理的vuejs 检视组件结构全部内容,希望文章能够帮你解决vuejs 检视组件结构所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。