<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          組件化的概念/特性/優點,Vue組件的使用

          時間:?2017-12-29閱讀:?9669標簽:?vue

          組件化的概念

          Web 中的組件其實就是頁面組成的一部分,好比是電腦中的每一個元件(如硬盤、鍵盤、鼠標),它是一個具有獨立的邏輯和功能或界面,同時又能根據規定的接口規則進行相互融合,變成一個完整的應用,頁面就是有一個個類似這樣的部分組成,比如導航、列表、彈窗、下拉菜單等。頁面只不過是這些組件的容器,組件自由組合形成功能完善的界面,當不需要某個組件,或者想要替換某個組件時,可以隨時進行替換和刪除,而不影響整個應用的運行。

          組件化的特性

          1. 高內聚性,組建功能必須是完整的,如我要實現下拉菜單功能,那在下拉菜單這個組件中,就把下拉菜單所需要的所有功能全部實現。
          2. 低耦合度,通俗點說,代碼獨立不會和項目中的其他代碼發生沖突。在實際工程中,我們經常會涉及到團隊協作,傳統按照業務線去編寫代碼的方式,就很容易相互沖突,所以運用組件化方式就可大大避免這種沖突的存在、
          3. 每一個組件都有子集清晰的職責,完整的功能,較低的耦合便于單元測試和重復利用。

          組件化的優點

          • 提高開發效率
          • 方便重復使用
          • 簡化調試步驟
          • 提升整個項目的可維護性
          • 便于協同開發

          Vue中的組件

          vue 中的組件是一個自定義標簽形式,Vue.js的編譯器為它添加特殊功能;
          vue也可以擴展原生的html元素,封裝可重用的代碼。

          vue組件的構成

          • 樣式及結構
          • 行為邏輯
          • 數據

          注冊組件

          • 組件注冊必須在指定實例之前執行。
          • 建議將組件提取出來放在單獨js文件中,按需引用

          全局注冊

          可以在任何模版中使用,使用之前必須先注冊

          • 語法: Vue.component(tagName, options)
          • 命名約定: “駝峰”格式,或者“烤串”格式, 組件引用名必須一致
          • Exp:
          <custom-select></custom-select>
          
          Vue.component("custom-select", {
              template: `<section>
                  <section>
                      <section>
                          <input type="text" />
                          <input type="button" value="Go" />
                          <span></span>
                      </section>
                      <ul>
                          <li>111111</li>
                          <li>2222</li>
                          <li>3333</li>
                          <li>4444</li>
                          <li>5555</li>
                          <li>6666</li>
                      </ul>
                  </section>
              </section> `,
          });
          

          局部注冊

          通過使用組件實例選項注冊,可以使組件僅在另一個指定實例/組件的作用域中可用

          new Vue({
              el: '#app',
              //組件隊列
              components: {
                  //組件名稱
                  "custom-select": {
                      template: `<section>
                                  <section>
                                      <section>
                                          <input type="text" />
                                          <input type="button" value="查詢" />
                                          <span></span>
                                      </section>
                                      <ul>
                                          <li>111111</li>
                                          <li>2222</li>
                                          <li>3333</li>
                                          <li>4444</li>
                                          <li>5555</li>
                                          <li>6666</li>
                                      </ul>
                                  </section>
                              </section>`
                  },
                  "test-dom": {
                      template: `<p>測試文字</p>`
                  }
              }
          });
          

          也可以將組件對象抽離用一變量緩存出來,如下:

          var Temp = {
              template: `<section>
                                  <section>
                                      <section>
                                          <input type="text" />
                                          <input type="button" value="查詢" />
                                          <span></span>
                                      </section>
                                      <ul>
                                          <li>111111</li>
                                          <li>2222</li>
                                          <li>3333</li>
                                          <li>4444</li>
                                          <li>5555</li>
                                          <li>6666</li>
                                      </ul>
                                  </section>
                              </section>`
          };
          
          new Vue({
              el: "#app",
              components: {
                  // <custom-select> 將只在父模板可用
                  'custom-select': Child,
              }
          });
          

          組件間的通信

          父組件要給自組件傳遞數據,子組件需要將它內部發生的事情告知給父組件。

          組件中的數據

          組件中的數據必須是函數, 如果它們共用一個對象,在更改其中一個組件數據時,也會影響到其它的組件。

          換做函數形式,每個組件都能夠有自己獨立的數據,從而不會影響到其它的組件,有點像解耦的概念。


          組件信息傳遞
          傳遞情況
          父組件 =>子組件 1. 在父級組件上使用自定義屬性綁定數據; 2.使用props聲明自定義屬性名
          子組件 =>父組件 1. 在父級組件上綁定自定義事件v-on監聽自定義事件;2. 使用$emit()觸發父組件所關心的自定義事件。

          父組件 =>子組件

          組件實例的作用域是孤立的,不能在子組件直接用父組件的數據。

          可以在組件上使用自定義屬性綁定數據,在組件中需要顯式的用選項參數props聲明自定義屬性名。

          子組件 =>父組件

          需要用到自定義事件,父組件用$on監聽自定義事件,使用$emit()觸發父組件所關心的自定義事件。

          Code

          <custom-select btn-value="查詢" :list="list1"></custom-select>
          <custom-select btn-value="搜索" :list="list2"> </custom-select>
          
          // 父組件
          Vue.component("custom-select", {
              /*
                 !此處數據類型必須是一個函數形式,不能直接寫對象。
                  每個組件都是相互獨立的,如果它們共用一個對象,在更改一個組件數據的時候,會影響到其它
                  組件,如果是函數的話,每個組件就都有自己的獨立數據,相互之間不會影響。
              */
              data: function() {
                  return {
                      selectShow: false,
                      val: ""
                  };
              },
              props: ["btnValue", "list"],
              template: `<section>
                              <section>
                                  <section>
                                      <input type="text" :value="val"  @click="selectShow=!selectShow"/>
                                      <input type="button" :value="btnValue" />
                                      <span></span>
                                  </section>
                                  <custom-list v-show="selectShow" :list="list"  @receive="changeValueHandle"></custom-list>
                              </section>
                          </section>`,
              methods: {
                  changeValueHandle(value) {
                      this.val = value;  //將選中的值賦給指定的input 
                      this.selectShow = false;  //隱藏下拉框
                  }
              }
          });
          
          
          // 子組件
          Vue.component("custom-list", {
              props: ["list"],
              template: `
                      <ul>
                          <li v-for="item in list" @click="selectValueHandle(item)">{{item}}</li>
                      </ul>`,
              methods: {
                  selectValueHandle(item) {
                      //在子組件中觸發,需要一個自定義事件
                      // Key值 是父級的自定義事件
                      this.$emit("receive", item);
                  }
              }
          });
          
          new Vue({
              el: '#app',
              data: function() {
                  return {
                      list1: ["北京", "上海", "廣州", "深圳"],
                      list2: ["2017-2-25", "2017-2-26", "2017-2-27", "2017-2-28"],
                  };
              }
          });
          

          特殊屬性is

          Vue是在瀏覽器解析和標準化HTML后才獲取模版內容,某些不符合W3C標準的dom結構最終會被錯誤解析。

          通過使用is來擴展HTML標簽功能可以解決。

          <tabel>
              <tr is="custom-select"></tr>
          </tabel>

          作者:我是白夜
          鏈接:https://www.jianshu.com/p/e805baa1574e
          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/293

          Vue 的 .sync 修飾符

          .sync 修飾符算是 Vue 的所有修飾符中較難理解的一個,本篇文章就帶你走近 .sync 的世界,深入理解后會發現,其實也就那么回事。修飾符和指令息息相關,下面從 指令 -> 修飾符 -> .sync 修飾符 由淺入深地來講解 .sync 的含義及用法。

          vue中is的作用和用法

          總所周知,ul里面嵌套li的寫法是html語法的固定寫法(還有如table,select等)。my-component是我們自己寫的組件,但是html在渲染dom的時候,my-component對ul來說并不是有效的dom,甚至會報錯。

          一點 Vue.observable 想法

          Vue 2.6.0 新增了 Vue.observable api,但最近才去嘗試使用它。這東西說新也不新,因為他就是 vue 本身的功能,只是暴露出來,成為新 api 了。在老版本中,直接用 new Vue({ data: {} }) 也一樣。

          Vue中props知識點

          如果你一直在閱讀有關\\\"props\\\"內容,你會發現我們可能也一直在使用它們(即使沒有意識到),但也許你并不完全確定它們是什么。或者如何正確使用它們,并充分利用它們。

          12種使用Vue的最佳做法

          隨著 VueJS 的使用越來越廣泛,出現了幾種最佳實踐并逐漸成為標準。在本文中,主要分享在平時開發中一些有用資源和技巧,廢話少說,我們開始吧。

          如何理解vue中的v-bind?

          若不是動態屬性,首先為其增加駝峰化后的監聽,然后再為其增加一個連字符的監聽,例如v-bind:foo-bar.sync,首先v-on:update:fooBar,然后v-on:update:foo-bar。v-on監聽是通過addHandler加上的。

          Vue.use到底是什么?

          我們在使用Vue做項目開發的時候,看到不少輪子都是通過Vue.use來進行使用,感覺甚是高大上。不過Vue.use到底是什么鬼?不妨來看個究竟。

          Vue.js最佳實踐:五招讓你成為Vue.js大師

          本文面向對象是有一定Vue.js編程經驗的開發者。如果有人需要Vue.js入門系列的文章可以在評論區告訴我,有空就給你們寫。對大部分人來說,掌握Vue.js基本的幾個API后就已經能夠正常地開發前端網站

          vue介紹

          庫是一種插件,是一種封裝好的特定方法的集合。提供給開發者使用,控制器在使用者手里。框架是一套架構,會基于自身特定向用戶提供一套相當完整的解決方案,控制權在框架本身

          vue有時候你不需要 $emit & $on

          在此之前,子組件到父組件的傳遞事件我一般還是使用 $emit 和 $on,因為這個操作理解起來并不難,代碼一般也挺清晰。不過今天遇到這么個情況 ——

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网