欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue實現(xiàn)自定義下拉菜單功能

 更新時間：2018年07月16日 14:20:00   作者：冰雪為融  
這篇文章主要介紹了Vue實現(xiàn)自定義下拉菜單功能,文章先通過實例代碼給大家介紹，后面對用到的知識點總結，需要的朋友可以參考下

先看例子，后面有對用到的知識點的總結

效果圖：

實現(xiàn)代碼如下：

<!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占據(jù)太多位置，所以此處將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必須是函數(shù)

每個組件都是相互獨立的，如果它們公用一個對象，在更改一個組件數(shù)據(jù)的時候，會影響其他組件。如果是函數(shù)的哈，每個組件都有自己獨立的數(shù)據(jù)。相互之間不會影響

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

三、組件間通信

父組件要給子組件傳遞數(shù)據(jù)，子組件需要將它內(nèi)部發(fā)生大的事情告知給父組件

•父組件->子組件

組件實例的作用域是孤立的，不能在子組件直接用父組件的數(shù)據(jù)
可以在組件上使用自定義屬性綁定數(shù)據(jù)，在組件中需要顯式的用props聲明自定義屬性名

•子組件->父組件

需要用到自定義事件，父組件用$on監(jiān)聽自定義事件，$emit觸發(fā)父組件所關心的自定義事件

針對這一節(jié)的學習，如果您理解的不是特別的好，推薦看官網(wǎng)Vue.js

總結

以上所述是小編給大家介紹的Vue實現(xiàn)自定義下拉菜單功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關文章

最新評論