Vue学习—组件的学习
1、什么是组件？
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。
定义组件一般有以下三种方式
组件形式一：使用script标签
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件的学习</title>
</head>
<style>
.box{
border: 3px solid silver;
padding: 0.3em 1em;
border-radius: 3px;
}
/*选择第一个之外的
:not(:first-child):not(:last-child) 选择非第一个和最后一个
*/
.box:not(:first-child){margin-top: 10px;}
.box h2{margin: 0.2em 0;}
</style>
<body>
<div id="app">
<h2 style="text-align: center">{{title}}</h2>
<my-box id="0" text="让世界听见你的声音" imgurl="https://static.lagou.com/i/image/M00/87/08/CgpFT1rTS-qALi_kAACPA5oPfFY927.PNG"></my-box>
<my-box id="1" text="拉钩,梦想集市" imgurl="https://static.lagou.com/i/image2/M00/44/CE/CgotOVrNhbCANCTNAACCViwPdyI789.JPG"></my-box>
<my-box id="2" text="下班后多一份收入" imgurl="https://static.lagou.com/i/image/M00/41/7E/CgpEMllUxC2AOU7wAABZXy04ZTg283.JPG"></my-box>
</div>
<script type="text/x-template" id="template">
<div class="box" @click='getinfo(id)'>
<img width="120" v-bind:src="imgurl"/>
<h2>{{text}}</h2>
</div>
</script>
<script src="http://lib.baomitu.com/vue/2.5.17-beta.0/vue.min.js"></script>
<script>
Vue.component("my-box",{
template:"#template",
props:[
"id",
"text",
"imgurl"
],
methods:{
getinfo(e){
alert(e)
}
},
}); var app = new Vue({
el:'#app',
data:{
title:"组件学习",
}, })
</script>
</body>
</html>
运行效果：
注意：使用<script>标签时，type指定为text/x-template，意在告诉浏览器这不是一段js脚本，浏览器在解析HTML文档时会忽略<script>标签内定义的内容。
组件形式二：使用template标签
示例代码：
1、
<div id="app">
<h2 style="text-align: center">{{title}}</h2>
<my-box id="0" text="让世界听见你的声音" imgurl="https://static.lagou.com/i/image/M00/87/08/CgpFT1rTS-qALi_kAACPA5oPfFY927.PNG"></my-box>
<my-box id="1" text="拉钩,梦想集市" imgurl="https://static.lagou.com/i/image2/M00/44/CE/CgotOVrNhbCANCTNAACCViwPdyI789.JPG"></my-box>
<my-box id="2" text="下班后多一份收入" imgurl="https://static.lagou.com/i/image/M00/41/7E/CgpEMllUxC2AOU7wAABZXy04ZTg283.JPG"></my-box>
</div>
<template id="template">
<div class="box" @click='getinfo(id)'>
<img width="120" v-bind:src="imgurl"/>
<h2>{{text}}</h2>
</div>
</template> <script src="http://lib.baomitu.com/vue/2.5.17-beta.0/vue.min.js"></script>
<script>
Vue.component("my-box",{
template:"#template",
props:[
"id",
"text",
"imgurl"
],
methods:{
getinfo(e){
alert(e)
}
},
}); var app = new Vue({
el:'#app',
data:{
title:"组件学习",
}, })
</script>
2、
<div id="app">
<h2 style="text-align: center">{{title}}</h2>
<my-box id="0" text="非常精美的人护手霜" imgurl="./images/1.png"></my-box>
<my-box id="1" text="非常精美的洗面奶" imgurl="./images/2.png"></my-box>
<my-box id="2" text="非常精美的洗衣粉" :imgurl="errorurl"></my-box>
</div>
<script>
//创建组件构造器
let probox = Vue.extend({
props:[
"id",
"text",
"imgurl"
],
template:`<div class="box" @click='getinfo(id)'>
<img width="60" v-bind:src="imgurl"/>
<h2>{{text}}</h2>
</div>`,
methods:{
getinfo(e){
alert(e)
}
},
}); var app = new Vue({
el:"#app",
data:{
title:'组件的学习',
errorurl:"./images/3.png"
},
components:{
"my-box":probox,
},
})
</script>
运行效果：
组件形式三：使用vue文件
这种方法常用在vue单页应用（SPA）中。详情看官网：https://cn.vuejs.org/v2/guide/single-file-components.html
创建.vue后缀的文件,组件Hello.vue，放到components文件夹中
Vue学习—组件的学习的更多相关文章
- vue的组件(先学习其他的ES6知识,之后再看这个) (未完)
https://blog.csdn.net/qq20004604/article/details/56965703
- iCOM组件（iComponent，应用或学习组件）
iCOM(英文全称:i + component,应用或学习组件,或iCOM组件),为学习资源的一种表现形式,是面向不同类型的学习对象(某一知识点或某一类知识点,如词汇.句子)专门开发的.在外部可重用的 ...
- 打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3)：用户添加/修改/删除 vue表格组件 vue分页组件
第三章 建议学习时间8小时 总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章] 演示地址:后台:demo ...
- 【整理】解决vue不相关组件之间的数据传递----vuex的学习笔记，解决报错this.$store.commit is not a function
解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function https://www.cnblogs.com/jaso ...
- vue学习指南：第七篇(详细) - Vue的 组件通信
Vue 的 父传子 子传父 一.父组件向子组件传值: 父传子 把需要的数据 传递给 子组件,以数据绑定(v-bind)的形式,传递到子组件内部,供子组件使用 缩写是(:) 1.创建子组件,在src/ ...
- vue初级学习--组件的使用(自定义组件)
一.导语 突然冒出四个字,分即是合,嗯,优点道理....................... 二.正文 在搞的仿淘宝demo,之前加入购物车是与商品详情一块的,今天把它单独拆出来,复用性高点,那这样 ...
- vue学习—组件的定义注册
组件的定义注册 效果: 方法一: <div id="box"> <v-header></v-header> <hr /> <b ...
- node+vue进阶【课程学习系统项目实战详细讲解】打通前后端全栈开发(1)：创建项目，完成登录功能
第一章 建议学习时间8小时·分两次学习 总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章]) 视频教程地 ...
- 中小研发团队架构实践之生产环境诊断工具WinDbg 三分钟学会.NET微服务之Polly 使用.Net Core+IView+Vue集成上传图片功能 Fiddler原理~知多少? ABP框架（asp.net core 2.X+Vue）模板项目学习之路（一） C#程序中设置全局代理(Global Proxy) WCF 4.0 使用说明 如何在IIS上发布，并能正常访问
中小研发团队架构实践之生产环境诊断工具WinDbg 生产环境偶尔会出现一些异常问题,WinDbg或GDB是解决此类问题的利器.调试工具WinDbg如同医生的听诊器,是系统生病时做问题诊断的逆向分析工具 ...
随机推荐
- BZOJ1968 [Ahoi2005] 约数研究
Description Input 只有一行一个整数 N(0 < N < 1000000). Output 只有一行输出,为整数M,即f(1)到f(N)的累加和. Sample Input ...
- 图像去噪算法：NL-Means和BM3D
图像去噪是非常基础也是非常必要的研究,去噪常常在更高级的图像处理之前进行,是图像处理的基础.可惜的是,目前去噪算法并没有很好的解决方案,实际应用中,更多的是在效果和运算复杂度之间求得一个平衡,再一次验 ...
- UX基础 - OmniGraffle新手指南
原文地址:http://beforweb.com/node/202,大半夜找到,作为使用手册 我发现一事儿,就是最近这些年,每到入职一个新公司的时候,听得东西往往会比多数时候听得更重更金属些,此时以S ...
- 在Windows下为PHP5.6安装redis扩展和memcached扩展
一.php安装redis扩展 1.使用phpinfo()函数查看PHP的版本信息,这会决定扩展文件版本 2.根据PHP版本号,编译器版本号和CPU架构, 选择php_redis-2.2 ...
- 算法之杨辉三角形(Java语言)
杨辉三角形, 又称贾宪三角形.帕斯卡三角形. 前9层写出来如下: 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 1 5 10 10 5 1 1 6 15 20 15 6 1 1 7 21 ...
- git操作合集
目录 安装 下载 本地配置 创建用户凭证ssh 忽略文件 基础操作 新建仓库 克隆仓库 获取更新 推送更新 查看历史 版本回退 分支 别名 linux服务器 疑难问题 清除历史大文件 安装 下载 下载 ...
- phpMyAdmin提示“无法在发生错误时创建会话，请检查 PHP 或网站服务器日志，并正确配置 PHP 安装。”
这是以前学生在使用phpwamp时遇到的一个问题(其他环境或是自己搭建时遇到此问题,解决方式同理) 其实这个问题与PHPWAMP本身无关,是电脑设置的问题,一般正常情况下不会出现这个问题. 现在把学生 ...
- c# winform文本框数字，数值校验
文本框数字,数值校验 public void DigitCheck_KeyPress(object sender, KeyPressEventArgs e) { e.Handled = !char.I ...
- Metaspliot进行漏洞扫描
Metaspliot进行漏洞扫描 Metasploit框架是Metasploit项目中最著名的创作,是一个软件开发.测试和利用漏洞的平台.它可以用来创建安全测试工具开发的模块,也可利用模块作为一个渗透 ...
- javaservlet处理四种常用api请求get，put，post，delete
一般在网站搭建中servlet只需处理post,get请求便足已.本篇注重使用javaweb编写restful风格api,在servlet中对四种常用请求进行处理. 在api中对于一个请求要做的通常是 ...