Vue 进阶之路（七）
之前的文章我们对 vue 的列表输出做了介绍，本章我们来看一下 vue 的组件 component。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p>{{title}}</p>
<table>
<tbody>
<row></row>
<row></row>
</tbody>
</table>
</div>
<script>
Vue.component("row", {
data() {
return {
number: 0
}
},
template: `
<tr><td>{{this.number}}</td></tr>
`
});
var app = new Vue({
el: '#app',
data: {
title: "hello world"
}
})
</script>
</body>
</html>
在上面的代码中，我们简单定义了一个 component 组件 row，我们可以理解为该组件为整个 Vue 实例 app 的一个子组件，在 row 组件中，我们可以看到 data 内的数据不能再像根组件 app 那样直接定义直接定义为对象，而是作为一个方法进行书写，里面的数据需要 return 出来，这样做是为了避免父组件与子组件，子组件与子组件之间的 data 数据都写成 data：{ } 这样的类型数据时造成冲突。
我们将 HTML 代码写在一个 template 模板当中，其中的 ` ` 为 ES6 里的模板字符转，在这儿不做详细解释了。里面的数据还是按照 {{ }} 插值表达式书写。
这样我们就可以在 Vue 的实例 id="app" 所控制范围内直接将 component 的名称 row 按照标签的方式书写。结果如下：
内容可以在页面上显示，但是令人遗憾的是当我们在控制台检查标签的时候发现我们定义的 <tr><td></td></tr> 并没有插入 body 内，这是由于在 HTML 内，<tbody> 标签不识别 <row> 标签，我们可以通过下面的方式解决：
<row></row>
<tr is="row"></tr>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p>{{title}}</p>
<table>
<tbody>
<!-- <row></row>-->
<!-- <row></row>-->
<tr is="row"></tr>
<tr is="row"></tr>
</tbody>
</table>
</div>
<script>
Vue.component("row", {
data() {
return {
number: 0
}
},
template: `
<tr><td>{{this.number}}</td></tr>
`
});
var app = new Vue({
el: '#app',
data: {
title: "hello world"
}
})
</script>
</body>
</html>
<tbody> 能识别 <tr> 标签，所以我们将 row 标签改为 <tr is="row"></tr>，这样的意思是以 <tr> 标签显示，但是里面的内容时 component 为 row 的内容，这样就能正确显示，结果如下：
当我们在像 ul ol select 这些标签内写 component 组件时我们可以通过 is 的方法来将内容放到对应的标签内。
以上就是本篇的内容，在接下来的文章里我们将对 component 组件进行详细的介绍。
Vue 进阶之路（七）的更多相关文章
- Vue 进阶之路（六）
上篇文章我们分析了一下 vue 中的条件渲染,本篇我们说一下 vue 中的列表渲染和 set 方法. <!DOCTYPE html> <html lang="en" ...
- Vue 进阶之路（九）
之前的文章我们介绍了 vue 中父组件之间的传值,本章我们再来看一下父子组件间传值的参数校验和非 Props 特性. <!DOCTYPE html> <html lang=" ...
- Vue 进阶之路（八）
之前的文章我们对组件 component 进行了简单的介绍,本章我们将深入了解一下组件,并实现父子组件间的传值. <!DOCTYPE html> <html lang="e ...
- Vue 进阶之路（五）
之前的文章我们说了一下 vue 的样式绑定,这篇文章来介绍一下 vue 中的条件渲染,先看下面的代码: <!DOCTYPE html> <html lang="en&quo ...
- Vue 进阶之路（四）
之前的文章我们已经对 vue 有了初步认识,这篇文章我们通过一个例子说一下 vue 的样式绑定. 现在我们想要是想这样一个需求,页面上有个单词,当我们点击它的时候颜色变为红色,再点击一次变为原来的颜色 ...
- Vue 进阶之路（三）
之前的文章我们已经对 vue 有了初步认识,这篇文章我们通过一个例子说一下 vue 的方法 methods,计算属性 computed 和监听器 watch. 现在我们有一个需求,变量 firstNa ...
- Vue 进阶之路（二）
之前的文章我们初识了 vue,对其原理,数据绑定和方法进行了简单的演示,本篇将对 vue 插值表达式,v-text,v-html 进行讲解. <!DOCTYPE html> <htm ...
- Vue 进阶之路（一）
vue 3.x 马上就要问世了,显然尤大大是不想让我们好好活了,但是转念一想,比你优秀的人都还在努力,那我们努力还有什么用,开个玩笑而已,本人对于 vue 的接触时间不长,对其也没有深入地去研究源码, ...
- Vue 进阶之路（十）
之前的文章介绍了 vue 的组件化,本章我们来看一下 vue 中组件的原生事件. <!DOCTYPE html> <html lang="en"> < ...
随机推荐
- 初探Apache Beam
文章作者:luxianghao 文章来源:http://www.cnblogs.com/luxianghao/p/9010748.html 转载请注明,谢谢合作. 免责声明:文章内容仅代表个人观点, ...
- 文本分类学习（六） AdaBoost和SVM
直接从特征提取,跳到了BoostSVM,是因为自己一直在写程序,分析垃圾文本,和思考文本分类用于识别垃圾文本的短处.自己学习文本分类就是为了识别垃圾文本. 中间的博客待自己研究透彻后再补上吧. 因为获 ...
- Windows10 ubuntu子系统的启用即基础配置
Windows 10 在一周年更新后,本身集成一个不带有图形界面的ubuntu 14.04系统了,大大方便了Linux开发,并且本身使用很方便,像我这种Windows死忠,只会在Linux下跑一下一定 ...
- spark SQL随笔
sparkSQL 1.主要的数据结构 DataFreames 2.开始使用:SQLContext 创建步骤: Val sc:sparkContext Val sqlContext=new org. ...
- 初学JSP
一. 基本了解 JSP是应用最广泛的表现层技术,它和Servlet是Java EE的两个基本成员.JSP和Servlet本质是一样的,因为JSP最终编译成ServLet才能运行. 1.1 we ...
- Selenium2Lib库之操作浏览器相关的关键字实战
1.1 操作浏览器相关的关键字 Selenium2Lib提供了与浏览器交互的关键词 1.1.1 Open Browser关键字 按F5 查看Open Browser关键字的说明,如下图: Open ...
- react 高阶组件的 理解和应用
高阶组件是什么东西 简单的理解是:一个包装了另一个基础组件的组件.(相对高阶组件来说,我习惯把被包装的组件称为基础组件) 注意:这里说的是包装,可以理解成包裹和组装: 具体的是高阶组件的两种形式吧: ...
- Spring源码阅读笔记
前言 作为一个Java开发者,工作了几年后,越发觉力有点不从心了,技术的世界实在是太过于辽阔了,接触的东西越多,越感到前所未有的恐慌. 每天捣鼓这个捣鼓那个,结果回过头来,才发现这个也不通,那个也不精 ...
- Java IO基础总结
Java中使用IO(输入输出)来读取和写入,读写设备上的数据.硬盘文件.内存.键盘......,根据数据的走向可分为输入流和输出流,这个走向是以内存为基准的,即往内存中读数据是输入流,从内存中往外写是 ...
- Visual Studio 201~ Code 格式检查
前言 好的代码格式,有利于阅读和查错,慢慢的有利于养成良好的编码习惯,也可以帮我们找出一些低级错误. StyleCop 在Nuget上搜索stylecop,选择MSBuild的那个版本,安装. 手动编 ...