成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue組件初學(xué)習(xí)（一）---初學(xué)者文檔

HmyBmny / 891人閱讀

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

一、什么是組件？

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

二、組件的種類：

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

三、組件的使用

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


    
  

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

3.2 局部注冊，代碼如下：


    
  

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

四、組件的嵌套：

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


    
    
    




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

六、props

6.1props聲明



    
     
  

  
  


6.2 props作為組件的內(nèi)部的初始狀態(tài)的方法：
  

    
  

  
  
  
6.3props接受后用計算屬性轉(zhuǎn)換的方法：

七、props的驗證：

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/89756.html

相關(guān)文章

  • Vue.js 初接觸

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

    bladefury 評論0 收藏0

  • 【呆萌の體驗】vue.js初次體驗

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

    wdzgege 評論0 收藏0

  • vue組件學(xué)習(xí)-數(shù)據(jù)傳遞-路由（初學(xué)者文檔二）

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

    Cristic 評論0 收藏0

  • Ionic4+Vue+Capacitor 初體驗

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

    cuieney 評論0 收藏0

發(fā)表評論

0條評論

HmyBmny

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<