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 相关文章推荐
js change,propertychange,input事件小议
Dec 20 Javascript
利用毫秒减值计算时长的js代码
Sep 22 Javascript
JS注释所产生的bug 即使注释也会执行
Nov 19 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
Apr 23 Javascript
javascript中键盘事件用法实例分析
Jan 30 Javascript
jQuery的remove()方法使用详解
Aug 11 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
JS实现回到页面顶部动画效果的简单实例
May 24 Javascript
简单实现AngularJS轮播图效果
Apr 10 Javascript
详解动画插件wow.js的使用方法
Sep 13 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
vue数据操作之点击事件实现num加减功能示例
Jan 19 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
解决Codeigniter不能上传rar和zip压缩包问题
2014/03/07 PHP
php实用代码片段整理
2016/11/12 PHP
Nigma vs Liquid BO3 第二场2.13
2021/03/10 DOTA
ie和firefox不兼容的解决方法集合
2009/04/28 Javascript
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
标题过长使用javascript按字节截取字符串
2014/04/24 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
js实现多选项切换导航菜单的方法
2015/02/06 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
AngularJs实现ng1.3+表单验证
2015/12/10 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
vue中的scope使用详解
2017/10/29 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
2017/12/25 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
使用JavaScript计算前一天和后一天的思路详解
2019/12/20 Javascript
JS实现容器模块左右拖动效果
2020/01/14 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
详解JavaScript类型判断的四种方法
2020/10/21 Javascript
Python数据结构之翻转链表
2017/02/25 Python
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
Python Socket使用实例
2017/12/18 Python
python使用Matplotlib改变坐标轴的默认位置
2019/10/18 Python
Python request中文乱码问题解决方案
2020/09/17 Python
NBA欧洲商店(英国):NBA Europe Store UK
2018/07/27 全球购物
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
美国球迷装备的第一来源:FOCO
2020/07/03 全球购物
法定代表人授权委托书范文
2014/08/02 职场文书
村主任群众路线个人对照检查材料
2014/09/26 职场文书
公安纪律作风整顿剖析材料
2014/10/10 职场文书
体育教师个人总结
2015/02/09 职场文书
工伤调解协议书
2016/03/21 职场文书
详细聊聊Oracle表碎片对性能有多大的影响
2022/03/19 Oracle