Vue实现自定义下拉菜单功能


Posted in Javascript onJuly 16, 2018

先看例子,后面有对用到的知识点的总结

效果图:

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 = ["胡歌","陈默","陶亚东","刘同"];
  Vue.component("custom-select",{
    data:function(){
      return {
        selectShow:false,
        val:""
      }
    },
    props:["btn","list"],
    template:`
    <section class="wrap">
    <div class="searchIpt clearFix">
      <div class="clearFix">
        <input type="text"
         class="keyWord"
         :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;
      }
    }
  });
  Vue.component("custom-list",{
    props:["list"],
    template:`
      <ul class="list">
        <li
          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 接收相同的选项,例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

使用组件:先要注册组件

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

全局注册:

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

语法:使用Vue.component(组件名,选项对象)
组件名命名约定:

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

在html中使用组件:

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

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

局部注册:

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

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

二、组件中data必须是函数

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

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

三、组件间通信

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

•父组件->子组件

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

•子组件->父组件

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

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

总结

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

Javascript 相关文章推荐
js实现图片轮换效果代码
Apr 16 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
Jun 24 Javascript
jQuery绑定事件不执行但alert后可以正常执行
Jun 03 Javascript
JQUERY表单暂存功能插件分享
Feb 23 Javascript
JavaScript File分段上传
Mar 10 Javascript
js获取上传文件的绝对路径实现方法
Aug 02 Javascript
jquery事件绑定解绑机制源码解析
Sep 19 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
Express之get,pos请求参数的获取
May 02 Javascript
redux-saga 初识和使用
Mar 10 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
Nov 20 Javascript
使用vue构建多页面应用的示例
Oct 22 Javascript
vue实现城市列表选择功能
Jul 16 #Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 #Javascript
Angular-UI Bootstrap组件实现警报功能
Jul 16 #Javascript
JS在if中的强制类型转换方式
Jul 15 #Javascript
微信小程序form表单组件示例代码
Jul 15 #Javascript
微信小程序仿朋友圈发布动态功能
Jul 15 #Javascript
Bootstrap Table中的多选框删除功能
Jul 15 #Javascript
You might like
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
ThinkPHP模板输出display用法分析
2014/11/26 PHP
PHP输出两个数字中间有多少个回文数的方法
2015/03/23 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
关于JS数组追加数组采用push.apply的问题
2014/06/09 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
NodeJs基本语法和类型
2015/02/13 NodeJs
JavaScript实现简单获取当前网页网址的方法
2015/11/09 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
jquery遍历标签中自定义的属性方法
2016/09/17 Javascript
js原生实现FastClick事件的实例
2016/11/20 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
iview同时验证多个表单问题总结
2018/09/29 Javascript
基于Vue中的父子传值问题解决
2020/07/27 Javascript
python实现倒计时的示例
2014/02/14 Python
使用Python的Twisted框架实现一个简单的服务器
2015/04/16 Python
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
python web基础之加载静态文件实例
2018/03/20 Python
Python实现图片识别加翻译功能
2019/12/26 Python
通过实例解析python and和or使用方法
2020/11/14 Python
python 通过pip freeze、dowload打离线包及自动安装的过程详解(适用于保密的离线环境
2020/12/14 Python
用gpu训练好的神经网络,用tensorflow-cpu跑出错的原因及解决方案
2021/03/03 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
优秀大学生推荐信范文
2013/11/28 职场文书
公司财务总监岗位职责
2013/12/14 职场文书
大家检讨书5000字
2014/02/03 职场文书
应届硕士毕业生自荐信
2014/05/26 职场文书
电气工程及其自动化专业毕业生自荐信
2014/06/21 职场文书
对党的十八届四中全会的期盼
2014/10/17 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书
2016年小学圣诞节活动总结
2016/03/31 职场文书
Go语言grpc和protobuf
2022/04/13 Golang