| Vue.js系列教材 （十） | 您所在的位置：网站首页 › vue常用的组件有哪些 › Vue.js系列教材 （十） |
Vue.js系列教材 （十）
|
Vue.js系列教材 （九）- 中使用过滤器
Vue.js系列教材 （十一）- vue.js 如何自定义指令
登录后可下载
工具版本兼容问题
步骤 1 : 组件是什么 步骤 2 : 局部组件 步骤 3 : 全局组件 步骤 4 : 参数 步骤 5 : 动态参数 步骤 6 : 自定义事件 步骤 7 : 遍历 json 数组 步骤 8 : 最开始效果步骤里的代码 步骤 1 : 组件是什么 edit 顶 折 纠 问 请先登录 如效果所示，每个产品展示，就是一个模板。 只用做一个模板，然后照着这个模板，传递不同的参数就可以看到不同的产品展示了。 这个模板，就是组件。 当前看到的这个效果比较复杂，接下来会由浅入深，慢慢地把这个效果做出来。 注： 点击产品，还可以增加销售数量。 虽然业务上不会真的增加销售数量，但是这里是演示组件也有自定义事件的效果。 div.product{ float:left; border:1px solid lightGray; width:200px; margin:10px; cursor: pointer; } div.product:hover{ border:1px solid #c40000; } div.price{ color:#c40000; font-weight:bold; font-size:1.2em; margin:10px; } div.productName{ color:gray; font-size:0.8em; margin:10px; } div.sale{ float:left; width:100px; border:1px solid lightgray; border-width:1px 0px 0px 0px; color:gray; font-size:0.8em; padding-left:10px; } div.review{ overflow:hidden; border:1px solid lightgray; border-width:1px 0px 0px 1px; color:gray; font-size:0.8em; padding-left:10px; } ¥ {{product.price}} {{product.name}} 月成交 {{product.sale}} 笔 评价 {{product.review}} var tempalateDiv=document.getElementById("tempalate").innerHTML; var templateObject = { props: ['product'], template: tempalateDiv, methods: { increaseSales: function () { this.product.sale = parseInt(this.product.sale); this.product.sale += 1 this.$emit('increment') } } } Vue.component('product', templateObject) new Vue({ el: '#div1', data:{ products:[ {"name":"MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮","price":"889","sale":"18","review":"5"}, {"name":"宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包","price":"322","sale":"35","review":"12"}, {"name":"唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮","price":"523","sale":"29","review":"3"}, ] } }) 代码行数较多，请点击查看
div.product{
float:left;
border:1px solid lightGray;
width:200px;
margin:10px;
cursor: pointer;
}
div.product:hover{
border:1px solid #c40000;
}
div.price{
color:#c40000;
font-weight:bold;
font-size:1.2em;
margin:10px;
}
div.productName{
color:gray;
font-size:0.8em;
margin:10px;
}
div.sale{
float:left;
width:100px;
border:1px solid lightgray;
border-width:1px 0px 0px 0px;
color:gray;
font-size:0.8em;
padding-left:10px;
}
div.review{
overflow:hidden;
border:1px solid lightgray;
border-width:1px 0px 0px 1px;
color:gray;
font-size:0.8em;
padding-left:10px;
}
¥ {{product.price}}
{{product.name}}
月成交 {{product.sale}} 笔
评价 {{product.review}}
var tempalateDiv=document.getElementById("tempalate").innerHTML;
var templateObject = {
props: ['product'],
template: tempalateDiv,
methods: {
increaseSales: function () {
this.product.sale = parseInt(this.product.sale);
this.product.sale += 1
this.$emit('increment')
}
}
}
Vue.component('product', templateObject)
new Vue({
el: '#div1',
data:{
products:[
{"name":"MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮","price":"889","sale":"18","review":"5"},
{"name":"宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包","price":"322","sale":"35","review":"12"},
{"name":"唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮","price":"523","sale":"29","review":"3"},
]
}
})
源代码 1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复 渲染中 渲染完成 效果 步骤 2 : 局部组件 edit 顶 折 纠 问 请先登录 接下来就由浅入深地展开组件的学习。 先看最简单的局部组件。在 Vue对象里增加 components： components:{ 'product':{ template:'MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮' }然后在视图里，通过如下方式就可以调用了如果想重复使用，则多写几次就行了 运行效果 div.product{ float:left; border:1px solid lightGray; width:200px; margin:10px; cursor: pointer; } new Vue({ el: '#div1', components:{ 'product':{ template:'MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮' } } }) 代码行数较多，请点击查看
div.product{
float:left;
border:1px solid lightGray;
width:200px;
margin:10px;
cursor: pointer;
}
new Vue({
el: '#div1',
components:{
'product':{
template:'MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮'
}
}
})
源代码 1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复 渲染中 渲染完成 效果 步骤 3 : 全局组件 edit 顶 折 纠 问 请先登录 和vue.js 里的过滤器一样，有的组件会在不同页面使用，这个时候就可以考虑用全局组件。Vue.component('product', { template: 'MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮' })写法其实跟局部差不多，只是提出来了。 这样到处都可以用了。 运行效果 div.product{ float:left; border:1px solid lightGray; width:200px; margin:10px; cursor: pointer; } Vue.component('product', { template: 'MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮' }) new Vue({ el: '#div1' }) 代码行数较多，请点击查看
div.product{
float:left;
border:1px solid lightGray;
width:200px;
margin:10px;
cursor: pointer;
}
Vue.component('product', {
template: 'MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮'
})
new Vue({
el: '#div1'
})
源代码 1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复 渲染中 渲染完成 效果 步骤 4 : 参数 edit 顶 折 纠 问 请先登录 像前面的例子，产品名称都是固定的，这样肯定不行，所以就要能够传递参数给组件。设置参数name, 并且在组件里使用这个name:Vue.component('product', { props:['name'], template: '{{name}}' })调用的时候，就当作是一个自定义属性传进去就可以了 运行效果 div.product{ float:left; border:1px solid lightGray; width:200px; margin:10px; cursor: pointer; } Vue.component('product', { props:['name'], template: '{{name}}' }) new Vue({ el: '#div1' }) 代码行数较多，请点击查看
div.product{
float:left;
border:1px solid lightGray;
width:200px;
margin:10px;
cursor: pointer;
}
Vue.component('product', {
props:['name'],
template: '{{name}}'
})
new Vue({
el: '#div1'
})
源代码 1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复 渲染中 渲染完成 效果 步骤 5 : 动态参数 edit 顶 折 纠 问 请先登录 所谓的动态参数，就是指组件内的参数可以和组件外的值关联起来如效果所示，在组件外的input输入数据，就可以传递到组件内了关键是这一行，name表示组件内的属性name, outName就是组件外的 运行效果 div.product{ float:left; border:1px solid lightGray; width:200px; margin:10px; cursor: pointer; } 组件外的值： Vue.component('product', { props:['name'], template: '{{name}}' }) new Vue({ el: '#div1', data:{ outName:'产品名称' } }) 代码行数较多，请点击查看
div.product{
float:left;
border:1px solid lightGray;
width:200px;
margin:10px;
cursor: pointer;
}
组件外的值：
Vue.component('product', {
props:['name'],
template: '{{name}}'
})
new Vue({
el: '#div1',
data:{
outName:'产品名称'
}
})
源代码 1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复 渲染中 渲染完成 效果 步骤 6 : 自定义事件 edit 顶 折 纠 问 请先登录 增加自定义事件和在一个Vue对象上增加 methods 是一样的做法先来个methods: methods:{ increaseSale:function(){ this.sale++ } }然后在组件里：v-on:click="increaseSale"注，这里是在组件上增加的，而不是在视图上增加的。测试： 点击产品，就会增销量 运行效果 div.product{ float:left; border:1px solid lightGray; width:200px; margin:10px; cursor: pointer; } Vue.component('product', { props:['name','sale'], template: '{{name}} 销量: {{sale}} ', methods:{ increaseSale:function(){ this.sale++ } } }) new Vue({ el: '#div1' }) 代码行数较多，请点击查看
div.product{
float:left;
border:1px solid lightGray;
width:200px;
margin:10px;
cursor: pointer;
}
Vue.component('product', {
props:['name','sale'],
template: '{{name}} 销量: {{sale}} ',
methods:{
increaseSale:function(){
this.sale++
}
}
})
new Vue({
el: '#div1'
})
源代码 1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复 渲染中 渲染完成 效果 步骤 7 : 遍历 json 数组 edit 顶 折 纠 问 请先登录 大部分时候是拿到一个 json 数组，然后遍历这个 json 数组为多个组件实例。1. 首先准备产品数组 products:[ {"name":"MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮","sale":"18"}, {"name":"宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包","sale":"35"}, {"name":"唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮","sale":"29"} ]2. 然后在视图里通过 v-for 遍历 products 3. 接着修改组件，让接受的参数为 v-bind:product 里的这个 product，显示和方法里也通过 product.xxx 来调用。Vue.component('product', { props:['product'], template: '{{product.name}} 销量: {{product.sale}} ', methods:{ increaseSale:function(){ this.product.sale++ } } }) 运行效果 div.product{ float:left; border:1px solid lightGray; width:200px; margin:10px; cursor: pointer; } Vue.component('product', { props:['product'], template: '{{product.name}} 销量: {{product.sale}} ', methods:{ increaseSale:function(){ this.product.sale++ } } }) new Vue({ el: '#div1', data:{ products:[ {"name":"MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮","sale":"18"}, {"name":"宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包","sale":"35"}, {"name":"唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮","sale":"29"} ] } }) 代码行数较多，请点击查看
div.product{
float:left;
border:1px solid lightGray;
width:200px;
margin:10px;
cursor: pointer;
}
Vue.component('product', {
props:['product'],
template: '{{product.name}} 销量: {{product.sale}} ',
methods:{
increaseSale:function(){
this.product.sale++
}
}
})
new Vue({
el: '#div1',
data:{
products:[
{"name":"MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮","sale":"18"},
{"name":"宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包","sale":"35"},
{"name":"唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮","sale":"29"}
]
}
})
源代码 1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复 渲染中 渲染完成 效果 步骤 8 : 最开始效果步骤里的代码 edit 顶 折 纠 问 请先登录 最开始效果步骤里的代码其实就是在前面的基础上，增加了一些样式，增加了一些字段而已。另外 template 部分因为比较复杂，就不好写在一个 单引号 ' ' 里维护起来，所以就直接写在html里，然后通过html dom 获取出来，这样编写起来略微容易一点。 var tempalateDiv=document.getElementById("tempalate").innerHTML;其他的就没有什么新东西啦 运行效果 div.product{ float:left; border:1px solid lightGray; width:200px; margin:10px; cursor: pointer; } div.product:hover{ border:1px solid #c40000; } div.price{ color:#c40000; font-weight:bold; font-size:1.2em; margin:10px; } div.productName{ color:gray; font-size:0.8em; margin:10px; } div.sale{ float:left; width:100px; border:1px solid lightgray; border-width:1px 0px 0px 0px; color:gray; font-size:0.8em; padding-left:10px; } div.review{ overflow:hidden; border:1px solid lightgray; border-width:1px 0px 0px 1px; color:gray; font-size:0.8em; padding-left:10px; } ¥ {{product.price}} {{product.name}} 月成交 {{product.sale}} 笔 评价 {{product.review}} var tempalateDiv=document.getElementById("tempalate").innerHTML; var templateObject = { props: ['product'], template: tempalateDiv, methods: { increaseSales: function () { this.product.sale = parseInt(this.product.sale); this.product.sale += 1 this.$emit('increment') } } } Vue.component('product', templateObject) new Vue({ el: '#div1', data:{ products:[ {"name":"MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮","price":"889","sale":"18","review":"5"}, {"name":"宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包","price":"322","sale":"35","review":"12"}, {"name":"唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮","price":"523","sale":"29","review":"3"}, ] } }) 代码行数较多，请点击查看
div.product{
float:left;
border:1px solid lightGray;
width:200px;
margin:10px;
cursor: pointer;
}
div.product:hover{
border:1px solid #c40000;
}
div.price{
color:#c40000;
font-weight:bold;
font-size:1.2em;
margin:10px;
}
div.productName{
color:gray;
font-size:0.8em;
margin:10px;
}
div.sale{
float:left;
width:100px;
border:1px solid lightgray;
border-width:1px 0px 0px 0px;
color:gray;
font-size:0.8em;
padding-left:10px;
}
div.review{
overflow:hidden;
border:1px solid lightgray;
border-width:1px 0px 0px 1px;
color:gray;
font-size:0.8em;
padding-left:10px;
}
¥ {{product.price}}
{{product.name}}
月成交 {{product.sale}} 笔
评价 {{product.review}}
var tempalateDiv=document.getElementById("tempalate").innerHTML;
var templateObject = {
props: ['product'],
template: tempalateDiv,
methods: {
increaseSales: function () {
this.product.sale = parseInt(this.product.sale);
this.product.sale += 1
this.$emit('increment')
}
}
}
Vue.component('product', templateObject)
new Vue({
el: '#div1',
data:{
products:[
{"name":"MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮","price":"889","sale":"18","review":"5"},
{"name":"宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包","price":"322","sale":"35","review":"12"},
{"name":"唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮","price":"523","sale":"29","review":"3"},
]
}
})
源代码 1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复 渲染中 渲染完成 效果 文件内容比较器 把你的代码复制到下面区域。 如果在线比较不好用，请使用客户端比较软件： diffmerge 下载和使用教程 复制代码代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢 分享连接分享如下连接可增加积分，获取50%佣金 如果不方便发连接（如贴吧），可以使用如下由连接转换为的二维码. 鼠标在图片上右键，然后另存为即可 警告： 请勿使用挂机软件刷积分，刷积分不会导致任何注册量，很容易被识别。 一旦发现刷积分，即封号处理，请勿做吃力不讨好之事。 做练习的正确姿势 1. 自行完成练习 根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程 2. 带着疑问查看答案 完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路 3. 查看答案讲解视频 依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分 4. 再做一遍 理解后，再从头做一遍，把有疑问的地方都捋清楚 5. 总结 最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理 Vue.js系列教材 （十）- vue.js 中使用组件举例-总结笔记 把这时的想法，思路，研究都记录下来，等全部学完了，再回过头来巩固和理解，学习效果就会很好，知识点掌握得也牢固. 点击查看我的笔记 总结 代码 保存中预计需要秒 保存完成 保存失败，请联系站长 收藏本知识点有的同学收藏是为了进行标记,过段时间再来看不明白的地方,在此处可以记录哪里不明白. 单纯收藏的, 直接点击提交即可。 点击查看我的收藏 错误纠正专用站长比较马虎，难免出现错别字，如果发现哪里文字有误，请提交错误，站长会尽快修改，谢谢 Vue.js系列教材 （九）- 中使用过滤器 Vue.js系列教材 （十一）- vue.js 如何自定义指令 HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域 删除提问已经提交成功，正在审核, 谢谢. 回复提问已经提交成功，正在审核, 谢谢. 2022-03-30 没看懂局部和全局区别 fql 关于 前端部分-Vue.js-组件 的提问 局部组件和全局组件的区别没看懂。。。。
请先登陆 回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢 删除提问已经提交成功，正在审核, 谢谢. 回复提问已经提交成功，正在审核, 谢谢. 2020-08-16 谢谢站长！网页的演示部分，被调得太窄了 爱文艺 关于 前端部分-Vue.js-组件 的提问 问题 截图 代码 异常 非常感谢站长！ 奇怪，我提的这个问题，以前没人提吗？本页的演示效果的地方，被调得太窄了，在截图左边的红圈标注的部分，不得不上下拉动，或不得不使用截图右边的红圈标注的滚动条上下拉动，才能看到完整的演示。 真的好奇怪 
1 个答案 峰峰QVQ 跳转到问题位置 答案时间：2020-09-25 我也提了建议啊，看站长的技术了。估计他还得一个页面一个页面调，或者写个全局参数 请先登陆 回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢 删除提问已经提交成功，正在审核, 谢谢. 回复提问已经提交成功，正在审核, 谢谢. 2020-04-13 this.$emit('increment') 这个是干啥的？ kzzf 关于 前端部分-Vue.js-组件 的提问 var tempalateDiv=document.getElementById("tempalate").innerHTML; var templateObject = { props: ['product'], template: tempalateDiv, methods: { increaseSales: function () { this.product.sale = parseInt(this.product.sale); this.product.sale += 1 this.$emit('increment') } } }
1 个答案 229865249 跳转到问题位置 答案时间：2020-07-23 在这段代码没什么用，删掉也不影响 请先登陆 回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢 删除提问已经提交成功，正在审核, 谢谢. 回复提问已经提交成功，正在审核, 谢谢. 2020-04-08 this.$emit('increment')是干啥用的??? 浩子♍ 关于 前端部分-Vue.js-组件 的提问 RT
1 个答案 LuzfeI 跳转到问题位置 答案时间：2020-09-22 this.$emit('increment')，传值给指定的函数，这里面没有写increment函数没有影响 this.$emit("function",param); //其中function为父组件定义函数，param为需要传递参数 请先登陆 回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢 删除提问已经提交成功，正在审核, 谢谢. 回复提问已经提交成功，正在审核, 谢谢. 2019-12-18 最外层的div中的display：none。为什么把这个删掉第一个出现的商品信息就报错 kbh13506051596 关于 前端部分-Vue.js-组件 的提问 display:none 究竟为什么要加这个
1 个答案 MrBrutalchiefs 跳转到问题位置 答案时间：2020-01-03 JSON数组里只有三个数据，删掉div中的display:none，你会发现有四组div，然而第一个div只是个模板，它的product暂时还没有定义，所以你看到的第一个出现的商品信息就报错了，同时你还会发现后面的三个商品信息跟JSON数组里的数据是一致的 {"name":"MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮","price":"889","sale":"18","review":"5"},{"name":"宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包","price":"322","sale":"35","review":"12"}, {"name":"唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮","price":"523","sale":"29","review":"3"}, 请先登陆 回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢 提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 9 条以前的提问，请 点击查看 提问之前请登陆 提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
【本文地址】
公司简介
联系我们