5.Vue的组件
1.什么是组件
组件是可复用的Vue实例,也就是一组可以复用的模版,类似JSTL的自定义标签。
你可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的像导航链接、博文之类的组件。
2.第一个Vue组件
注意:在实际开发中,我们并不会用以下方式开发组件,而是采用 vue-cli 创建 .vue 模板文件的方式开发,以下方法只是为了让大家理解什么是组件。
1.使用 Vue.component() 方法注册组件,格式如下:
- Vue.componet():注册组件
- props属性:用来传递参数,注意:默认规则下props属性里的值不能为大写
- first_component:自定义组件的名字
- template:自定义组件需要执行的模版
说明:
- v-for="item in items" :遍历
Vue
实例中定义的名为items
的数组,并创建同等数量的组件 - v-bind:item="item" :将遍历的
item
项绑定到组件中props
定义的名为item
属性上;= 号左边的 item 为 props 定义的属性名,右边的为item in items
中遍历的 item 项的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层模块-->
<div id="vue"> <!--组件:传递给组件中的值:props-->
<first_component v-for="item in items" v-bind:com="item"></first_component>
</div> <!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript"> //定义一个Vue组件
Vue.component("first_component", {
props: ["com"],
template: "<li>{{com}}</li>"
}) let vm = new Vue({
el: '#vue',
data: {
items: ["java", "C++", "C#", "Python", "PHP"]
}, });
</script>
</body>
</html>
5.Vue的组件的更多相关文章
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- 如何理解vue.js组件的作用域是独立的
vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...
- Vue 子组件向父组件传参
直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...
- VUE.JS组件化
VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...
- Vue动态组件
前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动 ...
- vue中组件的四种方法总结
希望对大家有用 全局组件的第一种写法 html: <div id = "app"> <show></show></div> js: ...
- 如何抽象一个 Vue 公共组件
之前一直想写一篇关于抽象 Vue 组件的随笔,无奈一直没想到好的例子.恰巧最近为公司项目做了一个数字键盘的组件,于是就以这个为例聊聊如何抽象 Vue 的组件. 先上 Demo 与 源码.(demo最好 ...
- vue的组件和生命周期
Vue里组件的通信 通信:传参.控制.数据共享(A操控B做一个事件) 模式:父子组件间.非父子组件 父组件可以将一条数据传递给子组件,这条数据可以是动态的,父组件的数据更改的时候,子组件接收的也会变化 ...
- 为什么VUE注册组件命名时不能用大写的?
这段时间一直在弄vue,当然也遇到很多问题,这里就来跟大家分享一些注册自定义模板组件的心得 首先"VUE注册组件命名时不能用大写"其实这句话是不对的,但我们很多人开始都觉得是对的, ...
- vue的组件化运用(数据在两个组件互传,小问题总结)
一.vue的组件化应用 首先,知道有哪些相关的属性需要用到,再慢慢去理解,运用. 1.两个vue页面 2. slot占位符(可用可不用) 3.props内置属性 4.watch监听函数 5.impor ...
随机推荐
- java使用jxls导出Excel
jxls是基于POI的Excel模板导出导入框架.通过使用类似于jstl的标签,有效较少导出Excel的代码量. 1.pom <!-- https://mvnrepository.com/art ...
- mac pe简单安装方法
1.工具下载 TechTool Pro for mac V11.0.4:http://www.pc6.com/mac/112462.html 2.准备16g u盘 3.安装工具并按照注册码注册 在Te ...
- Python 数据处理之对 list 数据进行数据重排(为连续的数字序号)
Python 数据处理之对 list 数据进行数据重排(为连续的数字序号) # user ID 序号重新排,即,原来是 1,3,4,6 ,排为 1,2,3,4 # item ID 序号重新排,too ...
- MyBatis-Generator 用法介绍
”工欲善其事,必先利其器“,古人说的很对,虽然不能做一个单纯的”工具帝“,但是自己有合适的工具集真的很关键.以前认识一个做逆向工程的高手,有自己的”反马套装“,其实不外乎就是 OD . IDA .Sy ...
- python在字节流中对int24的转换
python在字节流中对int24的转换 概述 最近在写项目的过程中,需要对从串口中读取的数据进行处理,本来用C写完了,但是却一直拿不到正确的数据包,可能是因为自己太菜了.后来用了python重新写了 ...
- APP兼容性测试 (二) 最新 iPhone 机型分辨率总结
iPhone手机发布时间及iOS发布 iPhone是美国苹果公司研发的智能手机系列,搭载苹果公司研发的iOS操作系统. 第一代iPhone于2007年1月9日由苹果公司前首席执行官史蒂夫·乔布斯发布, ...
- pymysql 读取大数据内存卡死的解决方案
背景:目前表中只有5G(后期持续增长),但是其中一个字段(以下称为detail字段)存了2M(不一定2M,部分为0,平均下来就是2M),字段中存的是一个数组,数组中存N个json数据.这个字段如下: ...
- influxdb安装和学习
安装 https://docs.docker.com/samples/library/influxdb/ 先启动,创建admin用户 docker run -d --name influxdb -p ...
- 【UOJ#389】【UNR#3】白鸽(欧拉回路,费用流)
[UOJ#389][UNR#3]白鸽(欧拉回路,费用流) 题面 UOJ 题解 首先第一问就是判断是否存在一条合法的欧拉回路,这个拿度数和连通性判断一下就行了. 第二问判断转的圈数,显然我们只需要考虑顺 ...
- asp.net 创建虚拟目录 iis创建虚拟目录
这几天本人接了个档案管理查询系统的小项目,踩过的坑. 其实功能都挺简单的,大致要求客户有很多pdf文档,为了方便管理,所有要开发一个相当于文件管理系统,本人正好有现成的文件管理系统,修改下就可以.其中 ...