Vuejs第十三篇之组件——杂项

什么是组件?

组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。

本篇资料是小编参考官方文档的基础上整理的一篇更加细致的说明,代码更多更全,非常适合新手学习。

官方文档:

http://cn.vuejs.org/guide/components.html#u52A8_u6001_u7EC4_u4EF6

组件——杂项详细介绍如下所示:

①组件和v-for

简单来说,就是组件被多次复用;

例如表格里的某一行,又例如电商的商品橱窗展示(单个橱窗),都可以成为可以被复用的组件;

只要编写其中一个作为组件,然后使数据来源成为一个数组(或对象,但个人觉得最好是数组),通过v-for的遍历,组件的每个实例,都可以获取这个数组中的一项,从而生成全部的组件。

而数据传输,由于复用,所以需要使用props,将遍历结果i,和props绑定的数据绑定起来,绑定方法同普通的形式,在模板中绑定。

示例代码:

<div id="app">
<button @click="toknowchildren">点击让子组件显示</button>
<table>
<tr>
<td>索引</td>
<td>ID</td>
<td>说明</td>
</tr>
<tr is="the-tr" v-for="i in items" v-bind:id="i" :index="$index"></tr>
</table>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
items: [1, 2, 3, 4]
},
methods: {
toknowchildren: function () { //切换组件显示
console.log(this.$children);
}
},
components: {
theTr: { //第一个子组件
template: "<tr>" +
"<td>{{index}}</td>" +
"<td>{{id}}</td>" +
"<td>这里是子组件</td>" +
"</tr>",
props: ['id','index']
}
}
});
</script> 

说明:

【1】记得将要传递的数据放在props里!

【2】将index和索引$index绑定起来,因为索引从0开始,因此索引所在列是从0开始;id是和遍历items的i绑定在一起的,因此id从1开始。

【3】可以在父组件中,通过this.$children来获取子组件(但是比较麻烦,特别是组件多的时候,比较难定位);

②编写可复用的组件:

简单来说,一次性组件(只用在这里,不会被复用的)跟其他组件紧密耦合是可以的,但是,可复用的组件应当定义一个清晰的公开接口。(不然别人怎么用?)

可复用的组件,基本都是要和外部交互的,而一个组件和外部公开的交互接口有:

【1】props:允许外部环境数据传递给组件;

【2】事件:允许组件触发外部环境的action,就是说通过在挂载点添加v-on指令,让子组件的events触发时,同时触发父组件的methods;

【3】slot:分发,允许将父组件的内容插入到子组件的视图结构中。

如代码:

<div id="app">
<p>这是第一个父组件</p>
<widget
:the-value="test"
@some="todo">
<span>【第一个父组件插入的内容】</span>
</widget>
</div>
<div id="app2">
<p>这是第二个父组件</p>
<widget @some="todo">
</widget>
</div>
<script>
Vue.component("widget", {
template: "<button @click='dosomething'><slot></slot>这是一个复用的组件,点击他{{theValue}}</button>",
methods: {
dosomething: function () {
this.$emit("some");
}
},
events: {
some: function () {
console.log("widget click");
}
},
props: ['theValue']
})
var vm = new Vue({
el: '#app',
data: {
test: "test"
},
methods: {
todo: function () {
console.log("这是第一个父组件")
}
}
});
var vm_other = new Vue({
el: '#app2',
data: {
name: "first"
},
methods: {
todo: function () {
console.log("这是另外一个父组件")
}
}
});
</script> 

说明:

【1】在第一个父组件中使用了分发slot,使用了props来传递值(将test的值传到子组件的theValue之中);

【2】在两个组件中,子组件在点击后,调用methods里的dosomething方法,然后执行了events里的some事件。又通过挂载点的@some=”todo”,将子组件的some事件和父组件的todo方法绑定在一起。

因此,点击子组件后,最终会执行父组件的todo方法。

【3】更改父组件中,被传递到子组件的值,会同步更改子组件的值(即二者会数据绑定);

③异步组件:

按照我的理解,简单来说,一个大型应用,他有多个组件,但有些组件无需立即加载,因此被分拆成多个组件(比如说需要立即加载的,不需要立即加载的);

需要立即加载的,显然放在同一个文件中比较好(或者同一批一起请求);

而不需要立即加载的,可以放在其他文件中,但需要的时候,再ajax向服务器请求;

这些后续请求的呢,就是异步组件;

做到这种异步功能的,就是Vue.js的功能——允许将组件定义为一个工厂函数,动态解析组件的定义。

可以配合webpack使用。

至于如何具体使用,我还不太明白,教程中写的不清,先搁置等需要的时候来研究。

链接:

http://cn.vuejs.org/guide/components.html#u5F02_u6B65_u7EC4_u4EF6

④资源命名的约定:

简单来说,html标签(比如div和DIV是一样的)和特性(比如要写成v-on这样的指令而不是vOn)是不区分大小写的。

而资源名往往是写成驼峰式(比如camelCase驼峰式),或者单词首字母都大写的形式(比如PascalCase,我不知道该怎么称呼这个,不过这样写很少的说)。

Vue.component("myTemplate", {
//......略
})

Vue.js可以自动识别这个并转换,

<my-template></my-template>

以上那个模板可以自动替换这个标签。

⑤递归组件:

简单来说,递归组件就是组件在自己里内嵌自己的模板。

组件想要递归,需要name属性,而Vue.component自带name属性。

大概样子是这样的,

<div id="app">
<my-template></my-template>
</div>
<script>
Vue.component("myTemplate", {
template: "<p><my-template></my-template></p>"
}) 

这种是无限递归,肯定是不行的。因此,需要控制他递归的层数,例如通过数据来控制递归,当数据为空时,则停止递归。

示例代码如下:

<ul id="app">
<li>
{{b}}
</li>
<my-template v-if="a" :a="a.a" :b="a.b"></my-template>
</ul>
<script>
Vue.component("myTemplate", {
template: '<ul><li>{{b}}</li><my-template v-if="a" :a="a.a" :b="a.b"></my-template></ul>',
props: ["a", "b"]
})
var data = {
a: {
a: {
a: 0,
b: 3
},
b: 2
},
b: 1
}
var vm = new Vue({
el: '#app',
data: data,
methods: {
todo: function () {
this.test += "!";
console.log(this.test);
}
}
});
</script> 

说明:

【1】向下传递时,通过props传递a的值和b的值,其中a的值作为递归后组件的a和b的值的数据来源;
然后判断传递到递归后的组件的a的值是否存在,如果存在则继续递归;
如果a的值不存在,则停止递归。

⑥片断实例:

简单来说,所谓片断实例,就是组件的模板不是处于一个根节点之下:

片断实例代码:

Vue.component("myTemplate", {
template: '<div>1</div>' +
'<div>2</div>',
}) 

非片断实例:

Vue.component("myTemplate", {
template: '<div>' +
'<div>1</div>' +
'<div>2</div>' +
'</div>',
}) 

片断实例的以下特性被忽略:

【1】组件元素上的非流程控制指令(例如写在挂载点上的,由父组件控制的v-show指令之类,但注意,v-if属于流程控制指令);

【2】非props特性(注意,props不会被忽略,另外props是写在挂载点上的);

【3】过渡(就是transition这个属性,将被忽略);

更多的参照官方文档:

http://cn.vuejs.org/guide/components.html#u7247_u65AD_u5B9E_u4F8B

⑦内联模板

参照:http://cn.vuejs.org/guide/components.html#u5185_u8054_u6A21_u677F

以上所述是小编给大家介绍的Vuejs第十三篇之组件——杂项,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • Vue.js每天必学之过渡与动画

    通过 Vue.js 的过渡系统,可以在元素从 DOM 中插入或移除时自动应用过渡效果.Vue.js 会在适当的时机为你触发 CSS 过渡或动画,你也可以提供相应的 JavaScript 钩子函数在过渡过程中执行自定义的 DOM 操作. 为了应用过渡效果,需要在目标元素上使用 transition 特性: <div v-if="show" transition="my-transition"></div> transition 特性可以与下面资

  • Vue.js快速入门教程

    像AngularJS这种前端框架可以让我们非常方便地开发出强大的单页应用,然而有时候Angular这种大型框架对于我们的项目来说过于庞大,很多功能不一定会用到.这时候我们就需要评估一下使用它的必要性了.如果我们仅仅需要在一个简单的网页里添加屈指可数的几个功能,那么用Angular就太麻烦了,必要的安装.配置.编写路由和设计控制器等等工作显得过于繁琐. 这时候我们需要一个更加轻量级的解决方案.Vue.js就是一个不错的选择.Vue.js是一个专注于视图模型(ViewModal)的框架.视图模型是U

  • Vue.js 父子组件通讯开发实例

    vue.js,是一个构建数据驱动的 web 界面的库.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.(这是官方的一个解释!) 小编没使用过angularjs,也没使用过react.js,不能详细的说明三者的区别,想了解的话,在官方有一个分析,请点这里查看 小编从业前端开发也有了一年多的时间,刚开始的时候,前端开发展现的技术太多,小编有心无力,兼顾不过来,经过了解之后,还是选择了学原生js基础兼并jquery的学习上路.小编使用vue.js,也是因为业务的需求

  • Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 接下来给大家介绍vuejs单向绑定.双向绑定.列表渲染.响应函数基础知识,具体详情如下所示: (一)单向绑定 <div id="app"> {{ message }} </div> <sc

  • 强大Vue.js组件浅析

    什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 如何注册组件? 需要使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件.Vue.extend方法格式如下: var MyComponent = Vue.extend({ // 选项...后面再介绍 }) 如果想要其他地方使用这个创

  • 概述VUE2.0不可忽视的很多变化

    今天使用webpack-sample初始一个vue-cli项目,在app.vue文件中添加了个钩子函数ready,可是ready内的事件一直不执行,检查了webpack文件和package.json也没发现什么问题,浏览器也没报错或者提示,很令人捉急.然后去github看了webpack-simple源码,才发现原来vue init webpack-simple默认安装的vue是2.0版本.马上推测到是不是因为vue2.0废弃了ready的用法,果然不出所料,我真是太机智了.看了下vue2.0的

  • Vuejs第六篇之Vuejs与form元素实例解析

    本文是小编结合官方文档整理的一篇细致代码更多更全的详细教程,非常适合新手学习,感兴趣的朋友一起看看吧! 资料来于官方文档: http://cn.vuejs.org/guide/forms.html 表单绑定 ①常见绑定方法: [1]文本输入框绑定: [2]textarea绑定(类似[1]): [3]radio选中值绑定: [4]checkbox绑定(自动捆绑数组,无需name): [5]select绑定: [6]select multiple多选选中框绑定: [7]动态绑定(以上不同类型但同一个

  • JavaScript的Vue.js库入门学习教程

    Vue是一个小巧轻便的javascript库.它有一个简单易懂的API,能够让开发者在开发web应用的时候更加简易便捷.实际上,一直让Vue引以为豪的是它的便捷性.执行力.灵活性. 这篇教程的目的就是通过一些例子,让你能够概览一些基本的概念和特性.在接下来的其他教程里,你会学到Vue更多的有用的特性,从而用Vue搭建一个可扩展的项目. MVVM 数据绑定 MVVM的本质是通过数据绑定链接View和Model,让数据的变化自动映射为视图的更新.Vue.js在数据绑定的API设计上借鉴了Angula

  • Vuejs第十三篇之组件——杂项

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 本篇资料是小编参考官方文档的基础上整理的一篇更加细致的说明,代码更多更全,非常适合新手学习. 官方文档: http://cn.vuejs.org/guide/components.html#u52A8_u6001_u7EC4_u

  • Vuejs第九篇之组件作用域及props数据传递实例详解

    本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html#Props 本教程是小编结合官方文档整理的一套更加细致,代码更多更全的教程,特别适合新手阅读. props数据传递 ①组件实例的作用域: 是孤立的,简单的来说,组件和组件之间,即使有同名属性,值也不共享. <div id="app"> <add></add> <del></del> </div> <sc

  • Vuejs第十篇之vuejs父子组件通信

    本篇文章是小编结合官方文档整理的一套更加细致,代码更多更全的教程,非常不错,比较适合新手阅读. 本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html#u7236_u5B50_u7EC4_u4EF6_u901A_u4FE1 父子组件通信 ①访问子组件.父组件.根组件: this.$parent 访问父组件 this.$children 访问子组件(是一个数组) this.$root 根实例的后代访问根实例 示例代码: <div id="a

  • Vuejs第十一篇组件之slot内容分发实例详解

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. Slot分发内容 ①概述: 简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示.不显示.在哪个地方显示.如何显示,就是slot分发负责的活. ②默认情况下 父组件在子组件内套的内容,是不显示的. 例如代码: <

  • Vuejs第八篇之Vuejs组件的定义实例解析

    本文参考官方文档整理的一篇更加细致代码更加安全的一篇适合新手阅读学习吧教程. 本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html 什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 组件的定义 ①组件的作用: [1]扩展HT

  • Vuejs第七篇之Vuejs过渡动画案例全面解析

    本篇资料是小编结合官方文档整理的一套更全面细致的说明,代码更多更全. 本篇资料来于官方文档: http://cn.vuejs.org/guide/transitions.html 下面看下过渡动画相关知识: ①过渡动画的定义: 简单来说,就是当模块消失.出现时,会以什么样的形式消失和出现: 如果要使用过渡动画,则在标签里加入属性: transition="过渡动画名" 例如: <div class="box" v-if="box_1" tr

  • 基于Vuejs框架实现翻页组件

    翻页功能对前端后端都是个难题啊!今天终于给踩了!哈哈!整理下方法,我是基于vueJs写的,同样适用于angular哈! 封装下载地址:vue.js翻页组件 效果截图: 整体实现逻辑,当用户点击页码时,ajax从后端获取数据,包括:records(当前页查询到的记录),totalRecords: 121(所有记录),currentPage(当前页码),totalPage(总页码),size(当前页显示数量),之后用我封装的算法assemblePageTurnerParams,算出页面展示哪些页码.

  • ExtJs 学习笔记基础篇 Ext组件的使用第1/2页

    天介绍一下Ext中组件举几个简单的例子做说明.注意:文章内容有些摘自本人学习过程中看到的资料. Ext2.0对框架进行了非常大的重构,其中最重要的是形成了一个结构及层次分明的组件体系,由这些组件形成了Ext控件.Ext组件由Component类定义,每一种组件都有一个指定的xtype属性值,通过该值可以得到一个组件的类型或者是定义一个指定类型的组件. Ext组件体系由下图所示: 组件大致可分成三大类,即基本组件.工具栏组件.表单元素组件.      基本组件有这么多的组件,可都是非常酷的.组件使

  • Vuejs 页面的区域化与组件封装的实现

    组件的好处 当我用vue写页面的时候,大量的数据页面渲染,引入组件简化主页面的代码量,当代码区域块代码差不多相同时,组件封装会更加简化代码.组件是Vue.js最强大的功能之一. 组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 我用一个读书软件的图书列表例子: 图书展示页 大家可以想想用vue如何实现这个页面的前端页面实现,再来实现逻辑功能: 图片显示的 '推荐图

随机推荐