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


Posted in Javascript onOctober 20, 2017

vue的实例对象

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

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

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

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

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

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

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

组件注册语法糖

全局组件

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实例对象+组件树的详细介绍,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Ext面向对象开发实践(续)
Nov 18 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
Jan 09 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
Feb 13 Javascript
javascript设计模式Constructor(构造器)模式
Aug 19 Javascript
Node.js中看JavaScript的引用
Apr 22 Javascript
Angular中ng-options下拉数据默认值的设定方法
Jun 21 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
Nov 20 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 Javascript
js实现轮播图的完整代码
Oct 26 Javascript
javascript实现超好看的3D烟花特效
Jan 01 Javascript
JS async 函数的含义和用法实例总结
Apr 08 Javascript
element-ui点击查看大图的方法示例
Dec 14 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
Oct 20 #Javascript
JavaScript html5 canvas实现图片上画超链接
Oct 20 #Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 #Javascript
jquery select插件异步实时搜索实例代码
Oct 20 #jQuery
移动端效果之IndexList详解
Oct 20 #Javascript
详解webpack性能优化——DLL
Oct 20 #Javascript
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 #Javascript
You might like
星际中的相关伤害
2020/03/04 星际争霸
php笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
PDO::getAttribute讲解
2019/01/28 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
asp.net+js 实现无刷新上传解析csv文件的代码
2010/05/17 Javascript
jQuery 图片切换插件(代码比较少)
2012/05/07 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
2014/05/11 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
node.js中的path.extname方法使用说明
2014/12/09 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
JS中跳出循环的示例代码
2017/09/14 Javascript
vue 虚拟dom的patch源码分析
2018/03/01 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
Vue Extends 扩展选项用法完整实例
2019/09/17 Javascript
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
利用Fn.py库在Python中进行函数式编程
2015/04/22 Python
在Python中操作字典之fromkeys()方法的使用
2015/05/21 Python
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
详解Python进阶之切片的误区与高级用法
2018/12/24 Python
解决python写入带有中文的字符到文件错误的问题
2019/01/31 Python
Python list列表中删除多个重复元素操作示例
2019/02/27 Python
浅析Python3中的对象垃圾收集机制
2019/06/06 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
flask 实现token机制的示例代码
2019/11/07 Python
Keds加拿大官网:购买帆布运动鞋和皮鞋
2019/09/26 全球购物
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
给学校建议书范文
2014/05/13 职场文书
小学生五年级大队长竞选发言稿
2014/09/12 职场文书
收款授权委托书
2014/10/02 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
应用最多的公文《通知》如何写?
2019/04/02 职场文书
微信告警的zabbix监控系统 监控整个NGINX集群
2022/04/18 Servers