vue的实例对象
首先用js的new关键字实例化一个vue
el: vue组件或对象装载在页面的位置,可通过id或class或标签名
template: 装载的内容。HTML代码/包含指令或者其他组件的HTML片段,template将是我们使用的模板
**data:** 数据通过data引入到组件中
在组件中的data要以函数的形式返回数据,当不同的界面用了同一个组件时,才不会以为一个组件的值发生改变而改变其他页面的内容。
{{ }} 双括号语法里面放入数据的变量
组件注册语法糖
全局组件
A方法:
调用Vue.extend()方法创建组件构造器
调用Vue.component(组件标签,组件构造器)方法注册组件
在Vue实例的作用范围内才能够使用组件
/*A方法全局组件1:*/
//1.Vue.extend() 创建组件构造器
var mycomponent = Vue.extend({
/*组件内容*/
template:…… ,
data: ……
})
//2.Vue.component注册组件
Vue.component('my-component1', mycomponent);
B方法(与A方法一样,只是交简单的写法):
没有A方法中的第1步,直接调用Vue.component(标签名,选项对象)方法
/*B方法 全局组件2:*/
Vue.component('my-component2', {
/*组件内容*/
template:…… ,
data: ……
}
/*在html中的组件调用,把组件标签直接用在html中相应的位置即可*/
<mycomponent1></mycomponent1>
<mycomponent2></mycomponent2>
局部组件 使用components属性
```javascript
var partcomponent2 = {
el:…… ,
data: { …… }
}
new Vue({
el: '#app',
data: {
……
},
components: {
/* A方法: 局部组件1 /
'part-component1': partcomponent1
},
/B方法 局部组件2 */
'part-component2':{
el:…… ,
data: { …… }
}
})
```
子组件
创建方法和上面两种方法类似,不同的是位置是放在组件内部。
var compentChild ={
el:……,
data:……
}
component: {
el: ……,
data: {……}
components: {
'component-child': componentChild
}
}
内置组件
不需要在components里面声明组件。而是直接用标签。例如在如下的myHeader中使用内置组件,root-view、keep-alived等也是vue本身提供的一个内置组件。
var myHeader = {
template: '<component></component> <root-view></rooot-view>'
}
总结
以上所述是小编给大家介绍的vue.js实例对象+组件树的详细介绍,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
标签:
vue.js,对象,组件树
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
暂无“vue.js实例对象+组件树的详细介绍”评论...
更新日志
2025年10月24日
2025年10月24日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]
