vue - Vue組件化編程

来源:https://www.cnblogs.com/heymar/archive/2022/05/05/16223615.html
-Advertisement-
Play Games

今天是對vue組件化的一個理解,最主要的單文件組件,然後就可以腳手架的學習了,本來昨晚就該上傳的,但是用的那個上傳博客園的Python腳本不行了,換了一個新的。 組件化讓我越來越感覺到框架的力量了 一.模塊與組件,模塊化與組件化 1.對組件的理解 如果以我們原來編寫一個網頁的方式 依賴關係混亂我就不 ...


今天是對vue組件化的一個理解,最主要的單文件組件,然後就可以腳手架的學習了,本來昨晚就該上傳的,但是用的那個上傳博客園的Python腳本不行了,換了一個新的。
組件化讓我越來越感覺到框架的力量了

一.模塊與組件,模塊化與組件化

1.對組件的理解

如果以我們原來編寫一個網頁的方式

image-20220504142108198

依賴關係混亂我就不說了,那為什麼還要說代碼復用率不高呢?能復用的css、js我不都引入了嗎?那是因為我們html沒有復用,上面和下麵兩個頁面頂部和底部相同,我能做的是直接 複製 註意這裡是複製不是復用

image-20220504143020355

組件能做的事情,就是把每個功能進行了一個組合,裡面包含這個功能所需要的所有文件,其他地方如果要復用,直接進入即可,註意我們html只是單獨這一部分的html部分

  • 組件是可以嵌套的,就如同我們的一個版塊還可以細分其他的版塊

    image-20220504143257481

  • 定義 :實現局部功能代碼(css、html、js)和資源(mp3、MP4、ttf等)的集合

  • 模塊:一個js文件就是一個模塊

  • 組件:集合

  • 模塊化:就是將一個龐大的js文件拆分成多個分支的模塊 去共同完成一個功能(跟前面es6模塊化編程一樣)

  • 組件化:將一個網頁按照不同的功能拆分不同的組件

二.非單文件組件

即一個文件(a.html)中包含n個組件

單文件組件:一個文件(a.vue)只包含一個組件

1.基本使用

完成這樣一個小功能以前的做法

image-20220504150852096

1.1創建組件

很明顯我們上面的案例可以分為學生和學校兩個組件,完成不同的兩個功能。

image-20220504151821061

創建我們的組件有幾個註意點:

  • 首先要記住固定寫法怎麼來創建,在vm實例外面寫Vue.extend然後裡面是一個配置對象,我們以前說過一個組件其實跟vm實例是很像的,確實很像,我們以前說的watch方法、計算屬性、自定義指令、過濾器等等這裡面都可以用,大多數一樣,但還是有點不一樣

  • 第一個不一樣:我們的組件創建不用寫 el這個配置項,我們的組件創建過來並不是單獨給誰用的,組件就是一塊磚,哪裡需要哪裡搬,組件再多,最終都要歸vm老大哥管理,所以由vm來配置el,來指定給誰服務

  • 然後就是data這個配置項不一樣,以前說過el、data的兩種形式,el是$mount,data就是可以簡寫為函數形式,但是返回值必須是一個對象,而創建組件的時候,data必須寫為函數式,為什麼,因為如果我這個實例要用你這個組件,又來一個網頁也需要用到這個組件,如果是對象形式,在記憶體中占用的是同一塊空間,你改他改都會影響到對方,但是函數就不一樣了,我用一個變數來接受你的返回值,那這個數據只屬於我了,他用一個變數來接受返回值,他又有一份屬於自己的數據了,各管各的,各改各的,誰也不影響誰

  • 之前分析過我們一個組件是包含js,css以及html部分片段代碼的,但是這裡只有js邏輯,我們還需要定義一個模板

    image-20220504153544645

1.2註冊組件

image-20220504153021969

一個全新的配置項 components註意裡面寫鍵值對的方式,裡面的屬性名才是我們真正的組件名,後面的值只是我們剛纔取的變數名,但是一般推薦都寫一樣,因為可以直接寫一個簡寫方式

而且這是局部註冊方式

1.3編寫組件化標簽

將命名好的組件名字以html標簽形式寫上,名為:組件標簽

image-20220504154643771

每個組件化標簽數據是分開的,互不幹擾

image-20220504154821789

1.4註冊全局組件

image-20220504155154162

1.5註意點

  • 組件名:單個單詞(全小寫或者首字母大寫都可以)、多個單詞(全小寫或者同之前自定義指令用-連接並且回歸原始屬性名用‘’包起來,還有一種方法所有單詞首字母都要大寫包括第一個首字母(但是只適用於腳手架環境))

  • 全新配置項 name,可以指定該組件在開發者工具中使用的名字

    image-20220504160227777

    image-20220504160237797

  • 組件標簽可以簡寫為自閉合形式.但是必須在腳手架環境下

    image-20220504160442234

  • 定義組件簡寫直接簡寫為一個對象,不寫Vue.extend

    image-20220504160746229

2.組件的嵌套

首先我們一般正規開發在vm下只有一個組件 app這個組件會代理我們vm會管理所有組件,我們app管理的子組件有兩個hello和school,所以要把他們註冊在app裡面,並把組件標簽寫在app的template裡面,school下麵有一個子組件student,同樣的他要註冊在student下麵,他的組件標簽寫在school的template裡面,最終vm實例只有一個註冊組件,app,我們的html結構也只有一個組件標簽,app

總之嵌套要註意的一點就是:子組件一定要把自己的組件標簽寫在父組件裡面,把自己註冊在父組件裡面,一直寫到app結束,最後把app寫在vm裡面去

image-20220504163000493

image-20220504163023049

image-20220504163031824

3.VueComponent構造函數

  • 我們的組件本質上是一個VueComponent的構造函數,是我們一Vue.extend,就會幫我們創建一個構造函數並賦值給這個變數

    image-20220504164606837

    image-20220504164614051

  • 我們只需要寫上組件標簽或者閉合標簽,vue解析時就會生成這個構造函數的實例,幫我們new出來

  • 每次調用Vue.extend創造出來的構造函數都是全新的,分析源碼可以發現,每次Vue.extend都會創造一個新的Component構造函數

    image-20220504165027652

  • 我們在new Vue中methods、computed、watch等裡面的函數this指向都是vm實例對象,我們在組件中的methods、computed、watch等裡面的函數this指向都是VueComponent的實例對象,簡稱vc(只出現在課堂上,在外要說組件實例對象),而且他跟vm基本一致,也有數據代理,數據劫持等等

4.一個重要的內置關係

VueComponent.prototype.proto == Vue.prototype 心裡那根線要搭建起來

image-20220504173138827

目的:讓組件vc也可以用到vue原型上的屬性和方法

三.單文件組件

我們說過一個組件.vue的文件是包含html、js、css在內的,所以一個標準的單文件組件,需要html(template標簽)、js(script標簽)、css(style標簽)

插件:vetur(pine wu)安裝了後可使用快捷鍵<v直接回車,快速生成一個一個單文件組件模板

  • 先創建一個功能組件school

    image-20220505000539202

    需要註意的是

    一。因為我們組件需要給人引用,所以我們在寫組件的時候需要暴露出去,一般暴露的就是script,而且這是簡寫形式,真正的原版本如下

    二。還有就是我們的 name配置項一般來說根文件名保持一致,我們的文件名一般也是採取的首字母大寫的形式,跟vue管理工具能夠保持一致

    三。我們的template標簽裡面應該由一個div包裹

image-20220504234421425

  • 再定義一個student組件

image-20220505000859490

沒樣式可以不寫樣式

  • 接下來這一個組件 必須的有,之前就說過,由一個代替vm管理下麵所有組件的組件,處於一人之下,萬人之上的位置,那就是app組件

    這個組件一般是用來引入我們的子組件,並註冊,註意引入是寫在export之外,然後還需要在template調用

image-20220505001404374

  • 然後我們就需要一個vm老大哥來指揮組件搭建服務於誰,一般是定義一個main.js的js文件

    導入並註冊我們的App組件,如果要保持下一個頁面乾凈就可以在這裡寫一個template模板把app組件標簽寫進去,也可以下一個頁面見

    image-20220505001706704

  • 最後我們需要一個容易,vue模板html文件來導入我們的main.js

    註意:要先引入我們的vue,才能使main.js裡面的new Vue生效

    image-20220505001902013

    自此我們一個單文件組件環境全部搭建完畢,但是要運行的話必須配合腳手架環境。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • OpenHarmony 社區的繁榮離不開合作伙伴的支持和貢獻,相容性工作組作為社區的一部分,我們將不斷優化測試用例和測評流程,為眾多提交測評的廠家提供支持。 ...
  • 原文地址:Android8.0 後臺服務保活的一種思路 | Stars-One的雜貨小窩 項目中有個MQ服務,需要一直連著,接收到消息會發送語音,且手機要在鎖屏也要實現此功能 目前是使用廣播機制實現,每次MQ收到消息,觸發一次啟動服務操作邏輯 在Android11版本測試成功,可實現上述功能 步驟 ...
  • 前言 本篇是以 HarmonyOS 官網的基於 TS 擴展的聲明式開發範式文檔,頁面佈局與連接為基礎進行編寫。儘管原篇已非常精簡,但是作為初學者想要快速入門,使用 ets 方式實現出 List 佈局、Grid 佈局、數據連接及頁面跳轉功能,還是稍顯晦澀。所以筆者將原文進行整合,提取出其中的要點,以便 ...
  • 隨著市場愈發成熟,開發者從平衡收益和風險的角度開始逐步探索混合變現的優勢,內購+廣告就是目前市場上混合變現的主要方式之一。 對於混合變現模式,您是否有這樣的困惑: 如何判斷哪些用戶更願意看廣告、哪些用戶付費意願更高,更好地平衡內購和廣告? 在提升整體收入的基礎上,怎樣為用戶提供更好的產品體驗? HM ...
  • 問題描述: 工作中碰到這樣一種場景, WebApp 已經實現了IM即時通訊及基於WebRTC實現的音視頻會議,音視頻聊天。 也是半路接手的項目,項目整體是使用WKWebView套殼載入h5 頁面實現(後期過審還有很多路要走) 。 h5與原生交互的方案使用的javascriptCore(具體如何使用, ...
  • 今天的內容vue腳手架,越來越有內味了,也慢慢地開始有點難度了哈哈,但是沒有關係,慢慢學慢慢琢磨,我倒是感覺有點越來越像node了,不知道怎麼回事,這是要向後端發展的節奏啊 一.初始化Vue腳手架 1.說明 一般腳手架選擇最新版本 2.具體步驟 全局安裝vue/cli腳手架 切換到項目目錄,運行 v ...
  • 常用函數封裝 獲取某日期若幹個工作日後的日期 * 參數: * time: [String] 給定日期 yyyy-MM-dd * itervalByDay: [Number] 相隔工作日 * separator: [String] 年月日分隔符 * 返回: * rq:[String] 匹配的日期yyy ...
  • 某日,群里有這樣一個問題,如何實現這樣的表盤刻度: 這其實是個挺有意思的問題,方法也有很多。 單標簽,使用 conic-gradient 實現表盤刻度 最簡單便捷的方式,就是利用角向漸變的方式 conic-gradient,代碼也非常簡單,首先,我們實現一個重覆角向漸變: <div></div> d ...
一周排行
    -Advertisement-
    Play Games
  • 什麼是工廠模式 工廠模式是最常用的設計模式之一,屬於創建型模式。 有點: 解耦,可以把對象的創建和過程分開 減少代碼量,易於維護 什麼時候用? 當一個抽象類有多個實現的時候,需要多次實例化的時候,就要考慮使用工廠模式。 比如:登錄的抽象類ILoginBusiness,它有2個實現,一個用用戶名密碼登 ...
  • 這次iNeuOS升級主要升級圖形渲染引擎和增加豐富的圖元信息,可以很快的方案應用。總共增加41個通用和行業領域的圖元應用,增加2154個圖元信息,現在iNeuOS視圖建模功能模塊總共包括5894個行業圖元信息。現在完全支持製作高保真的工藝流程和大屏展示效果。 ...
  • 效果圖先附上: 首先 這是我是參考 教程:使用 SignalR 2 和 MVC 5 實時聊天 | Microsoft Docs 先附上教程: 在“添加新項 - SignalRChat”中,選擇 InstalledVisual> C#>WebSignalR>,然後選擇 SignalR Hub 類 (v ...
  • 一、前言 項目中之前涉及到胎兒心率圖曲線的繪製,最近項目中還需要添加心電曲線和血樣曲線的繪製功能。今天就來分享一下心電曲線的繪製方式; 二、正文 1、胎兒心率曲線的繪製是通過DrawingVisual來實現的,這裡的心電曲線我也是採用差不多相同的方式來實現的,只是兩者曲線的數據有所區別。心電圖的數據 ...
  • 安裝 Redis # 首先安裝依賴gcc, 後面需要使用make編譯redis yum install gcc -y # 進入 /usr/local/src 目錄, 把源碼下載到這裡 cd /usr/local/src # 下載 redis 7.0.2 的源碼,github被牆,可以使用國內的地址 ...
  • Redis 的定義? 百度百科: Redis(Remote Dictionary Server ),即遠程字典服務,是一個開源的使用ANSI C語言編寫、支持網路、可基於記憶體亦可持久化的日誌型、Key-Value資料庫,並提供多種語言的API。 中文官網: Redis是一個開源(BSD許可),記憶體存 ...
  • 事情的起因是收到了一位網友的請求,他的java課設需要設計實現迷宮相關的程式——如標題概括。 我這邊不方便透露相關信息,就只把任務要求寫出來。 演示視頻指路👉: 基於JavaFX圖形界面的迷宮程式演示_嗶哩嗶哩_bilibili 完整代碼鏈接🔎: 網盤:https://pan.baidu.com ...
  • Python中的字典 Python中的字典是另一種可變容器模型,且可存儲任意類型對象。鍵值使用冒號分割,你可以看成是一串json。 常用方法 獲取字典中的值 dict[key] 如果key不存在會報錯,建議使用dict.get(key),不存在返回None 修改和新建字典值 dict[key]=va ...
  • 迎面走來了你的面試官,身穿格子衫,挺著啤酒肚,髮際線嚴重後移的中年男子。 手拿泡著枸杞的保溫杯,胳膊夾著MacBook,MacBook上還貼著公司標語:“加班使我快樂”。 面試官: 看你簡歷上用過MySQL,問你幾個簡單的問題吧。什麼是聚簇索引和非聚簇索引? 這個問題難不住我啊。來之前我看一下一燈M ...
  • tunm二進位協議在python上的實現 tunm是一種對標JSON的二進位協議, 支持JSON的所有類型的動態組合 支持的數據類型 基本支持的類型 "u8", "i8", "u16", "i16", "u32", "i32", "u64", "i64", "varint", "float", "s ...