vue.js实例对象+组件树的详细介绍

前端之家收集整理的这篇文章主要介绍了vue.js实例对象+组件树的详细介绍前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

vue的实例对象

首先用js的new关键字实例化一个vue

el: vue组件或对象装载在页面的位置,可通过id或class或标签

template: 装载的内容HTML代码/包含指令或者其他组件的HTML片段,template将是我们使用的模板

**data:** 数据通过data引入到组件中

在组件中的data要以函数的形式返回数据,当不同的界面用了同一个组件时,才不会以为一个组件的值发生改变而改变其他页面内容

{{ }} 双括号语法里面放入数据的变量

组件注册语法糖

全局组件

A方法

调用Vue.extend()方法创建组件构造器

调用Vue.component(组件标签,组件构造器)方法注册组件

在Vue实例的作用范围内才能够使用组件

方法全局组件1:*/ //1.Vue.extend() 创建组件构造器 var mycomponent = Vue.extend({ /*组件内容*/ template:……,data: …… }) //2.Vue.component注册组件 Vue.component('my-component1',mycomponent);

B方法(与A方法一样,只是交简单的写法):

没有A方法中的第1步,直接调用Vue.component(标签名,选项对象)方法

方法 全局组件2:*/ Vue.component('my-component2',{ /*组件内容*/ template:……,data: …… } /*在html中的组件调用,把组件标签直接用在html中相应的位置即可*/

局部组件 使用components属性

方法: 局部组件1 / 'part-component1': partcomponent1 }, /B方法 局部组件2 */ 'part-component2':{ el:……,data: { …… } } }) ```

子组件

创建方法和上面两种方法类似,不同的是位置是放在组件内部。

内置组件

不需要在components里面声明组件。而是直接用标签。例如在如下的myHeader中使用内置组件,root-view、keep-alived等也是vue本身提供的一个内置组件。

' }

总结

以上所述是小编给大家介绍的vue.js实例对象+组件树的详细介绍。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的Vue相关文章