vue組件初學習（一）---初學者文檔

HmyBmny 發(fā)布于2019-08-21 17:37 / 882人閱讀

摘要：在有時候，組建也可以是原生的元素。簡單的說，就是組件是有結構的有樣式的，有交互效果，有行為，信號量可以存數據。組件可以通過屬性開設置。

一、什么是組件？

組件是vue.js最強大的功能之一，它可以擴展HTML元素，封裝可以重用的代碼.
當然，在更高的層面上，組件是自定義元素，vue.js的編譯器為它添加了特殊功能。
在有時候，組建也可以是原生的HTML元素。
簡單的說，就是組件是有結構的HTML、有樣式的CSS，有交互效果，有行為，信號量可以存數據。
組件可以通過屬性開設置。

二、組件的種類：

  ①實現基本功能的基礎的組件（最小的元素，即基礎組件，如input）
  ②可復用的邏輯組件（業(yè)務組件）
  ③頁面組件

三、組件的使用

注意：在組件中，有且只能有一個根元素（標簽/父元素）
3.1 全局注冊，示例代碼如下：
//新建一個vue實例對象

    
  
  //引入vue.js文件，路徑根據自己文件所在位置而定
  
  
這樣我們就建好了一個簡單的父級和子級組件

3.2 局部注冊，代碼如下：

    
  
  //引入vue.js文件，路徑根據自己文件所在位置而定

四、組件的嵌套：

五、在組件中，data必須為函數，否則報錯


    
    
    



在上述這個實例中，，因為三個共享了counter，無論哪個改變三個都改變，所以，我們需要返回一個全新的數據對象來避免這個問題。

六、props

6.1props聲明


    
     
  
  
  


6.2 props作為組件的內部的初始狀態(tài)的方法：
  
    
  
  
  
  
6.3props接受后用計算屬性轉換的方法：

七、props的驗證：

當傳入的數據不符合要求時，在開發(fā)版本的控制臺會報錯，對初級開發(fā)組件的人很有用，
驗證的類型：String Number Boolean Function Object Array Symbol，需要注意的是 prop 會
在組件實例創(chuàng)建之前進行校驗，所以在 default 或 validator 函數里，諸如 data、computed 或
 methods 等實例屬性還無法使用。

從這些簡單的例子我們可以看出來。vue之所以這么火不是沒有道理的，把原本復雜的前端頁面變得簡單了許多，這樣，在開發(fā)過程中就可以少走很多彎路，但是呢，由于本人初學，暫時就學了這么多，以后會繼續(xù)學習

GPU云服務器云服務器 vue組件 vue組件開發(fā) vue父子組件通訊 vue輪播組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89756.html

Vue.js 初接觸

摘要：二還有一點也是思想不容易轉過彎的一點，就是我在學習前端時，接觸的思想都是需要我們將者分開，方便維護。但是在學習了接觸了單文件組件之后，世界又變了，又讓我們將同一個組件的放到一個文件中，這樣又便于維護和復用，這一臉的懵那啥。 Vue.js 介紹官方介紹： Vue.js是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發(fā)的設計。Vue 的核心庫只關注視圖...

bladefury 2019-08-21 15:52 評論0 收藏0
【呆萌の體驗】vue.js初次體驗

摘要：官方默認項目是存放了一個為的打開文件夾有一個，還有一個名為組件的文件夾，里面放了一個文件。部分我們會發(fā)現這幾排字就是顯示在頁面的幾排文字部分這其中的這個文件引入了，還有上述的。結合查詢其他說法，就是說它會把是的元素以形式替換。前言我很早就想來學習學習vue.js啦，終于有了那么一些空閑的時間可以拿來學習，于是從前天開始我就每天抽一個多小時來體驗vue.js。當然啦，因為是小白入門，...

wdzgege 2019-08-21 17:21 評論0 收藏0
vue組件學習-數據傳遞-路由（初學者文檔二）

摘要：接上次的驗證開始，組件中的作用域都是獨立的，子組件的模板不能直接引用父組件的數據，要用特殊方法才能實現數據的傳遞。，環(huán)境的安裝第一步新建一個文件夾并初始化第二步安裝一級路由這個比較簡單，大多應用于單頁面應用，不必引入整個路由庫。接上次的props驗證開始，組件中的作用域都是獨立的，子組件的模板不能直接引用父組件的數據，要用特殊方法才能實現數據的傳遞。一、父子組件之間的通信 ...

Cristic 2019-08-21 17:38 評論0 收藏0
Ionic4+Vue+Capacitor 初體驗

摘要：最新的已經提供了其他框架的支持，，等等，甚至不使用框架。接下來我將使用和開發(fā)一個最簡單的。也可以直接使用啟動，運行使用模擬器運行項目完美，那么本次的初體驗就到此結束了，的插件使用可以參考官方文檔哦。注：本文的目的在于記錄自己基于最新的Ionic4構建一個App，也為同樣需求的小伙伴提供參考。第一次寫文章，文筆笨拙，還請見諒，不對之處，還請指出。最新的Ionic4已經提供了其他 j...

cuieney 2019-08-23 17:53 評論0 收藏0