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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(7)
Dec 23 Javascript
IE6下通过a标签点击切换图片的问题
Nov 14 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
Nov 02 Javascript
JavaScript生成随机数的4种自定义函数分享
Feb 28 Javascript
js简单实现点击左右运动的方法
Apr 10 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
Feb 16 Javascript
详解vue mint-ui源码解析之loadmore组件
Oct 11 Javascript
npm 下载指定版本的组件方法
May 17 Javascript
js 递归json树实现根据子id查父id的方法分析
Nov 08 Javascript
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 Vue.js
JS原生实现轮播图的几种方法
Mar 23 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
把77A收信机改造成收音机
2021/03/02 无线电
php 正则 过滤html 的超链接
2009/06/02 PHP
php自动获取目录下的模板的代码
2010/08/08 PHP
php中用于检测一个地理IP地址是否可用的代码
2012/02/19 PHP
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
一个简洁实用的PHP缓存类完整实例
2014/07/26 PHP
php模拟post上传图片实现代码
2016/06/24 PHP
php投票系统之增加与删除投票(管理员篇)
2016/07/01 PHP
JS加ASP二级域名转向的代码
2007/05/17 Javascript
javascript动画效果类封装代码
2007/08/28 Javascript
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
Javascript实现CheckBox的全选与取消全选的代码
2010/07/20 Javascript
js 遍历对象的属性的代码
2011/12/29 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
javascript真的不难-回顾一下基础知识
2013/01/15 Javascript
Jquery实现三层遍历删除功能代码
2013/04/23 Javascript
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
jquery选择器需要注意的问题
2014/11/26 Javascript
jQuery轻松实现无缝轮播效果
2017/03/22 jQuery
Vue.js实现按钮的动态绑定效果及实现代码
2017/08/21 Javascript
Nodejs实现的操作MongoDB数据库功能完整示例
2019/02/02 NodeJs
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
python在linux中输出带颜色的文字的方法
2014/06/19 Python
详解Python中的正则表达式的用法
2015/04/09 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
Django 配置多站点多域名的实现步骤
2019/05/17 Python
Python3简单实现串口通信的方法
2019/06/12 Python
python实现beta分布概率密度函数的方法
2019/07/08 Python
Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统
2020/04/21 Python
澳大利亚制造的羊皮靴:Original UGG Boots
2017/11/13 全球购物
迪奥美国官网:Dior美国
2019/12/07 全球购物
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
判断单链表中是否存在环
2012/07/16 面试题
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
学校师德承诺书
2014/05/23 职场文书