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 相关文章推荐
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
Mar 06 Javascript
Javascript基础教程之switch语句
Jan 18 Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
Javascript获取表单名称(name)的方法
Apr 02 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
Apr 14 Javascript
去除字符串左右两边的空格(实现代码)
May 12 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
May 26 Javascript
Javascript typeof与instanceof的区别
Oct 18 Javascript
微信小程序自定义tab实现多层tab嵌套功能
Jun 15 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
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数组的使用方法小结
2010/09/23 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
Laravel 5.4前后台分离,通过不同的二级域名访问方法
2019/10/13 PHP
你需要知道的JavsScript可以做什么?
2007/06/29 Javascript
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
JS事件在IE与FF中的区别详细解析
2013/11/20 Javascript
Javascript变量作用域详解
2013/12/06 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
2015/09/05 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
JS随机排序数组实现方法分析
2017/10/11 Javascript
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
2018/09/06 Javascript
nodeJS进程管理器pm2的使用
2019/01/09 NodeJs
微信小程序实现写入读取缓存详解
2019/08/30 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
ant design实现圈选功能
2019/12/17 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
Python中的面向对象编程详解(上)
2015/04/13 Python
python获取各操作系统硬件信息的方法
2015/06/03 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
Python使用Chrome插件实现爬虫过程图解
2020/06/09 Python
使用npy转image图像并保存的实例
2020/07/01 Python
测试时代收集的软件测试面试题
2013/09/25 面试题
Java的类与C++的类有什么不同
2014/01/18 面试题
安全员岗位职责
2013/11/11 职场文书
商务主管岗位职责
2013/12/08 职场文书
聚美优品恶搞广告词
2014/03/14 职场文书
写给领导的感谢信
2015/01/22 职场文书