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 获取浏览器高度和宽度值(多浏览器)
Sep 02 Javascript
javascript 不间断的图片滚动并可点击
Jan 15 Javascript
js中精确计算加法和减法示例
Mar 28 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
Jul 20 Javascript
JavaScript ParseFloat()方法
Dec 18 Javascript
jQuery解析json格式数据简单实例
Jan 22 Javascript
Javascript简写条件语句(推荐)
Jun 12 Javascript
angularjs $http实现form表单提交示例
Jun 09 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
Mar 29 Javascript
微信小程序人脸识别功能代码实例
May 07 Javascript
Vue数据绑定实例写法
Aug 06 Javascript
Vue实现简单的跑马灯
May 25 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
linux下使用ThinkPHP需要注意大小写导致的问题
2011/08/02 PHP
php过滤表单提交的html等危险代码
2014/11/03 PHP
PHP处理会话函数大总结
2015/08/05 PHP
php图形jpgraph操作实例分析
2017/02/22 PHP
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
2007/05/30 Javascript
HTML Dom与Css控制方法
2010/10/25 Javascript
range 标准化之获取
2011/08/28 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
2013/06/27 Javascript
Eclipse去除js(JavaScript)验证错误
2014/02/11 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
2015/03/24 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
JQuery的attr 与 val区别
2016/06/12 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
2016/07/22 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
jQuery调用Webservice传递json数组的方法
2016/08/06 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
浅谈Angular4中常用管道
2017/09/27 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
2018/03/01 Javascript
axios向后台传递数组作为参数的方法
2018/08/11 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
2020/02/24 Javascript
[01:03:47]VP vs NewBee Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
Python字符串格式化
2015/06/15 Python
Python中Proxypool库的安装与配置
2018/10/19 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
tensorflow模型保存、加载之变量重命名实例
2020/01/21 Python
详解Python中list[::-1]的几种用法
2020/11/16 Python
我们是伦敦女孩:WalG
2018/01/08 全球购物
沃达丰英国有限公司:Vodafone英国
2019/04/16 全球购物
教学实验楼管理制度
2014/02/01 职场文书
学习雷锋做美德少年寄语大全
2014/04/09 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
师德师风学习材料
2014/12/19 职场文书
郭明义观后感
2015/06/08 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
讨论nginx location 顺序问题
2022/05/30 Servers