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 相关文章推荐
Extjs grid添加一个图片状态或者按钮的方法
Apr 03 Javascript
Jquery 效果使用详解
Nov 23 Javascript
学习Angular中作用域需要注意的坑
Aug 17 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
Jan 16 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
Aug 22 Javascript
React/Redux应用使用Async/Await的方法
Nov 16 Javascript
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
js闭包学习心得总结
Apr 17 Javascript
Javasript设计模式之链式调用详解
Apr 26 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 Javascript
vue中axios的二次封装实例讲解
Oct 14 Javascript
js实现限定区域范围拖拉拽效果
Nov 20 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
如何冲泡挂耳包咖啡?技巧是什么
2021/03/04 冲泡冲煮
php面向对象全攻略 (四)构造方法与析构方法
2009/09/30 PHP
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
解决在Laravel 中处理OPTIONS请求的问题
2019/10/11 PHP
微信小程序 radio单选框组件详解及实例代码
2017/01/10 Javascript
简单易懂的天气插件(代码分享)
2017/02/04 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
json字符串传到前台input的方法
2018/08/06 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
vue项目中自定义video视频控制条的实现代码
2020/04/26 Javascript
JS数据类型分类及常用判断方法
2020/11/19 Javascript
[01:25:38]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第一场 1月19日
2021/03/11 DOTA
python中二维阵列的变换实例
2014/10/09 Python
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
python爬取NUS-WIDE数据库图片
2016/10/05 Python
Python实现Linux中的du命令
2017/06/12 Python
python一键去抖音视频水印工具
2018/09/14 Python
用python3教你任意Html主内容提取功能
2018/11/05 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
python3实现将json对象存入Redis以及数据的导入导出
2020/07/16 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
PyCharm+Miniconda3安装配置教程详解
2021/02/16 Python
HTML5 微格式和相关的属性名称
2010/02/10 HTML / CSS
捷克汽车配件和工具销售网站:TorriaCars
2018/02/26 全球购物
求职自我推荐信
2014/06/25 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
兴趣班停课通知
2015/04/24 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
基于Python编写一个监控CPU的应用系统
2022/06/25 Python