全国咨询热线:18720358503

小程序商城如何制作_Vue完成自界说下拉菜单功用

类别:媒体报道 发布时间:2021-01-08 浏览人次:

Vue实现自定义下拉菜单功能       这篇文章主要介绍了Vue实现自定义下拉菜单功能,文章先通过实例代码给大家介绍,后面对用到的知识点总结,需要的朋友可以参考下

效果图:

实现代码如下:

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title 组件练习 /title 
 link rel="stylesheet" type="text/css" href="component.css" rel="external nofollow" / 
 script src="vue.js" /script 
 /head 
 body 
 div id="app" 
 h2 组件1 /h2 
 custom-select btn="查询" :list="list1" /custom-select 
 h2 菜单2 /h2 
 custom-select btn="搜索" :list="list2" /custom-select 
 /div 
 script 
 //注册组件
 let list1 = ["北京","上海","深圳","郑州","南阳"];
 let list2 = ["胡歌","陈默","陶亚东","刘同"];
 ponent("custom-select",{
 data:function(){
 return {
 selectShow:false,
 val:""
 pro凡科抠图:["btn","list"],
 template:`
 section 
 div 
 div 
 input type="text"
 :value="val"
 @click="selectShow=!selectShow"
 input type="button" :value="btn"/ 
 span /span 
 /div 
 custom-list
 v-show="selectShow"
 :list="list"
 v-on:value1="selectValueHandle"
 /custom-list 
 /div 
 /section 
 methods:{
 selectValueHandle(value){
 this.val = value;
 ponent("custom-list",{
 pro凡科抠图:["list"],
 template:`
 v-for="item in list"
 @click="searchValueHandle(item)"
 {{item}} /li 
 /ul 
 methods:{
 searchValueHandle(item){
 this.$emit("value1",item)
 var vm = new Vue({
 el:"#app",
 data:{
 list1:list1,
 list2:list2
 /script 
 /body 
 /html 

考虑到一些朋友想要css代码,但避免css占据太多位置,所以此处将css压缩了,如果不需要看css的可以直接跳过哈

body{margin:0;font-family:"微软雅黑"}ul li{margin:0;padding:0;list-style:none}input{outline:0;cursor:pointer}.clearFix:after{display:block;content:"";clear:both}.wrap{width:348px;padding:100px 76px 50px;margin:50px;background:url(images/select_bg.png) no-repeat;box-shadow:2px 2px 10px #6789ad}.searchIpt{position:relative;width:336px;border:1px solid #3736ae;padding:5px;border-radius:24px;background:#e4e4fe}.searchIpt input{line-height:34px;border-radius:18px}.searchIpt input:nth-of-type(1){float:left;width:228px;padding-left:40px;border:1px solid #c9c9d5;background:#d9d9e2}.searchIpt input:nth-of-type(2){float:right;width:58px;height:36px;border:1px solid #fd635e;background:#fd635e}.searchIpt span{position:absolute;top:12px;left:15px;width:23px;height:23px;background:url(images/select_search.png) no-repeat}.searchIpt input:nth-of-type(1):focus{background:#fff;border-color:#fd635e}.list{margin-top:9px}.list li{margin:3px 0;color:#333;line-height:30px;padding-left:16px;width:270px;box-sizing:border-box;border-radius:14px}.list li.active,.list li:hover{color:#fff;background:#fd635e;cursor:pointer}

用到的知识点总结:

组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,puted、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

使用组件:先要注册组件

一、注册组件:分为全局注册和局部注册

全局注册:

可以在任何模板中使用,使用之前要先注册

ponent(组件名,选项对象)
组件名命名约定:

驼峰:(camelCase)、烤串(kebab-case)

在html中使用组件:

使用烤串(keba-case)命名法

注意:即便我们的组件名是驼峰的形式,在html中也要使用的烤串命名法,不要使用驼峰方式,否则会报错

局部注册:

在组件实例中通过选项对象注册,只在所注册的作用域中使用

 components:{
 组件名:选项对象
 }

二、组件中data必须是函数

每个组件都是相互独立的,如果它们公用一个对象,在更改一个组件数据的时候,会影响其他组件。如果是函数的哈,每个组件都有自己独立的数据。相互之间不会影响

data: function () {
 return {
 count: 0
}

三、组件间通信

父组件要给子组件传递数据,子组件需要将它内部发生大的事情告知给父组件

父组件- 子组件

组件实例的作用域是孤立的,不能在子组件直接用父组件的数据
可以在组件上使用自定义属性绑定数据,在组件中需要显式的用pro凡科抠图声明自定义属性名

子组件- 父组件

需要用到自定义事件,父组件用$on监听自定义事件,$emit触发父组件所关心的自定义事件

针对这一节的学习,如果您理解的不是特别的好,推荐看官网

总结

以上所述是小编给大家介绍的Vue实现自定义下拉菜单功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!


推荐阅读

小程序商城如何制作_Vue完成自界说下拉菜单功用

Vue完成自定往下拉莱单作用 实际效果图:完成编码以下:!DOCTYPE html html lang="en" head meta charset="UTF-8" title 部件训练 /title link rel="stylesheet" type="text/css" hre...

2021-01-08
移动互联网快速发展改变企业网站建设模式

如今移动互联网网的迅速发展趋势,给众多借助互连网进行互联网营销推广的公司产生了新的思索。许多公司依据局势,竞相开展有关局势的科学研究,并快速的采用相对的对策,在其...

2021-01-08
广州凡科互联网科技股份有限公司招聘电话销售

招聘人数:4职位信息1、负责广州各地区广州各地区装修公司的系统合作开发销售;2、开发新客户,维护老客户的业务,挖掘客户的潜力;3、公司提供优质客户资源,自己进行电话跟进...

2021-01-08
为何小程序裂变_Vue Router去掉url中默认的锚点#

Vue Router除掉url中默认设置的锚点# vue-router默认设置hash方式——应用URL的hash来仿真模拟一个详细的URL,因此当URL更改时,网页页面不容易再次载入。本文关键详细介绍了Vue Router除...

2021-01-08
广州凡科互联网科技股份有限公司招聘在线客服

招聘人数:19职位信息“钱”途多、乐趣多、团队年轻化,激情有活力,互帮互助,氛围好。公司还会不定期举行各种户外活动,下午茶、丰富员工的业余生活。岗位要求:1. 学历经验通...

2021-01-08
广州凡科互联网科技股份有限公司招聘淘宝运营

招聘人数:17职位信息底薪+高提成,具体提成可面谈!代运营请勿投,谢谢。岗位职责:1、负责天猫、淘宝广告的预算、推广、分析,制定详细的推广方案;2、负责天猫、淘宝的推广投...

2021-01-08
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信