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"> < ...
随机推荐
- ThinkPHP5从零基础搭建CMS系统（二）
接上节,开启wamp集成环境,在浏览器地址栏输入http://localhost/cms/public,即可运行项目,但是这边域名太长,做一下处理. 注:需要查看tp5全部教程,请点击右侧thinkp ...
- 基于Cloudera Search设计数据灾备方案
当实际项目上线到生产环境中,难以避免一些意外情况,如数据丢失.服务器停机等.对于系统的搜索服务来说,当遇到停机的情况意味着在停机这段时间内,用户都不能通过搜索的相关功能进行访问数据,停机意味着将这一段 ...
- 适合Python的5大练手项目, 你练了么?
在练手项目的选择上,还存在疑问?不知道要从哪种项目先下手? 首先有两点建议: 最好不要写太应用的程序练手,要思考什么更像是知识,老只会写写爬虫是无用的,但是完全不写也不行. 对于练手的程序,要注意简化 ...
- Xapth 添加注释头
private static void updateMybatisXml(String url, String username, String password) { DocumentBuilder ...
- Oracle数据库逻辑迁移之数据泵的注意事项
环境:数据迁移,版本 11.2.0.4 -> 12.2.0.1 思考: 对于DBA而言,常用物理方式的迁移,物理迁移的优势不必多说,使用这种方式不必担心对象前后不一致的情况,而这往往也解决了不懂 ...
- 洛谷 P1462 解题报告
P1462 通往奥格瑞玛的道路 题目背景 在艾泽拉斯大陆上有一位名叫歪嘴哦的神奇术士,他是部落的中坚力量 有一天他醒来后发现自己居然到了联盟的主城暴风城 在被众多联盟的士兵攻击后,他决定逃回自己的家乡 ...
- 关于office在卸载了某一应用之后无法试图使用的功能所在的网络位置
我出现这个问题是在卸载了某一个微软的办公软件之后,所有的办公软件都会产生这个问题. 处理的方法是将之前的安装包解压,然后找到所出现的msi文件,点击确定就ok了. 所以说,安装文件最好还是放在一个地方 ...
- 【java错误】Non-terminating decimal expansion; no exact representable decimal result
问题描述 意思是“无法结束的除法表达式:没有精确的除结果”.当时输入的10/3,结果应该是3.3333....333. 下面这种处理方式有问题. BigDecimal num3 = new BigDe ...
- 斐波那契数列第n项的值及前n项之和
<script>// 算法题 // 题1:斐波那契数列:1.1.2.3.5.8.13.21...// // 一.斐波那契数列第n项的值 // // 方法一//递归的写法function a ...
- Kali Linux配置ssh服务
操作环境: 虚拟机操作系统: Kali Linux 2017.2 虚拟化软件: VMware Workstation 14 pro 虚拟机网络连接方式: 桥接模式 物理机操作系统: Windows10 ...