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 相关文章推荐
jQuery 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
基于jquery的划词搜索实现(备忘)
Sep 14 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
Jan 24 Javascript
jquery自定义函数的多种方法
Jan 09 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
Jan 18 Javascript
JavaScript中的时间处理小结
Feb 24 Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
Aug 25 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
JS插入排序简单理解与实现方法分析
Nov 25 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
Mar 06 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
Aug 22 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简单留言本功能实现代码
2017/06/09 PHP
Laravel5.4框架中视图共享数据的方法详解
2019/09/05 PHP
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
2009/12/28 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
jquery弹出关闭遮罩层实例
2013/08/06 Javascript
js网页实时倒计时精确到秒级
2014/02/10 Javascript
jQuery判断对象是否存在的方法
2015/02/05 Javascript
如何减少浏览器的reflow和repaint
2015/02/26 Javascript
轻松实现js图片预览功能
2016/01/18 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
vue项目中监听手机物理返回键的实现
2020/01/18 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
跟老齐学Python之编写类之二方法
2014/10/11 Python
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
python检测某个变量是否有定义的方法
2015/05/20 Python
Python global全局变量函数详解
2018/09/18 Python
Tornado实现多进程/多线程的HTTP服务详解
2019/07/25 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
荷兰家电销售网站:Welhof
2020/12/08 全球购物
.net工程师笔试题
2012/06/09 面试题
城市规划毕业生求职信
2013/10/10 职场文书
承办会议欢迎词
2014/01/17 职场文书
物流业务员岗位职责
2014/02/08 职场文书
幼儿园保育员岗位职责
2014/04/13 职场文书
小学国庆节活动总结
2015/03/23 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
如何使用vue3打造一个物料库
2021/05/08 Vue.js
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL
Sentry的安装、配置、使用教程(Sentry日志手机系统)
2022/07/23 Python
python中validators库的使用方法详解
2022/09/23 Python