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 相关文章推荐
JavaScript 内置对象属性及方法集合
Jul 04 Javascript
JS继承 笔记
Jul 13 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
Mar 24 Javascript
js实现div模拟模态对话框展现URL内容
May 27 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
Jun 24 Javascript
js实现的xml对象转json功能示例
Dec 24 Javascript
JS+DIV实现的卷帘效果示例
Mar 22 Javascript
详解Vuex管理登录状态
Nov 13 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
Sep 05 Javascript
一文看懂如何简单实现节流函数和防抖函数
Sep 05 Javascript
JavaScript实现鼠标经过表格某行时此行变色
Nov 20 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
PHP中,文件上传
2006/12/06 PHP
javascript,php获取函数参数对象的代码
2011/02/03 PHP
ThinkPHP简单使用memcache缓存的方法
2016/11/15 PHP
PHP实现获取ip地址的5种方法,以及插入用户登录日志操作示例
2019/02/28 PHP
使用PHP开发留言板功能
2019/11/19 PHP
jquery tools系列 expose 学习
2009/09/06 Javascript
javascript中scrollTop详解
2015/04/13 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
jquery插件格式实例分析
2016/06/16 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
2019/04/02 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
2020/10/18 Javascript
如何在 Vue 中使用 JSX
2021/02/14 Vue.js
[03:18]DOTA2放量测试专访820:希望玩家加入国服大家庭
2013/08/25 DOTA
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
在Python中进行自动化单元测试的教程
2015/04/15 Python
python实现SMTP邮件发送功能
2020/06/16 Python
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
python 设置输出图像的像素大小方法
2019/07/04 Python
CSS3教程(6):创建网站多列
2009/04/02 HTML / CSS
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
如何理解委托
2012/01/06 面试题
经济系大学生求职信
2013/10/01 职场文书
面试自我介绍演讲稿
2014/04/29 职场文书
技术负责人任命书
2014/06/05 职场文书
经济国贸专业求职信
2014/06/18 职场文书
汽车转让协议书
2015/01/29 职场文书
接收函格式
2015/01/30 职场文书
超市店长竞聘书
2015/09/15 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书