Vuejs的一些總結

来源:http://www.cnblogs.com/fly-xfa/archive/2017/05/14/6851616.html
-Advertisement-
Play Games

1.Vuejs組件 這裡註意一點,組件要先註冊再使用,也就是說 如果反過來會報錯,因為反過來代表先使用了組件的,但是組件卻沒註冊。 webpack報錯後,使用webpack --display-error-details可以排錯 2.指令keep-alive 在看demo的時候看到在vue-rout ...


1.Vuejs組件

 

這裡註意一點,組件要先註冊再使用,也就是說

 

 

如果反過來會報錯,因為反過來代表先使用了組件的,但是組件卻沒註冊。

 

webpack報錯後,使用webpack --display-error-details可以排錯

 

2.指令keep-alive

 

在看demo的時候看到在vue-router寫著keep-alivekeep-alive的含義:
如果把切換出去的組件保留在記憶體中,可以保留它的狀態或避免重新渲染。為此可以添加一個keep-alive指令

 

3.如何讓css只在當前組件中起作用

在每一個vue組件中都可以定義各自的css,js,如果希望組件內寫的css只對當前組件起作用,只需要在style中寫入scoped,即:

 

 

 

 

4.vuejs迴圈插入圖片

 

5.綁定value到Vue實例的一個動態屬性上

 對於單選按鈕,勾選框及選擇框選項,v-model綁定的value通常是靜態字元串(對於勾選框是邏輯值):

但是有時候想綁定value到vue實例的一個動態屬性上,這時可以用v-bind實現,並且這個屬性的值可以不是字元串。例如綁定Checkbox的value到vue實例的一個動態屬性:

 

 

 

這裡綁定後,並不是說就可以點擊後由true,false的切換變為a,b的切換,因為這裡定義的動態a,b是scope上的a,b,並不能直接顯示出來,此時

 

所以此時需要在data中定義a,b,即:

 

6.片段實例

 

 

 

下麵幾種情況會讓實例變成一個片斷實例:

  1. 模板包含多個頂級元素。
  2. 模板只包含普通文本。
  3. 模板只包含其它組件(其它組件可能是一個片段實例)。
  4. 模板只包含一個元素指令,如<partial> 或vue-router 的 <router-view>
  5. 模板根節點有一個流程式控制制指令,如v-ifv-for

這些情況讓實例有未知數量的頂級元素,它將把它的 DOM 內容當作片斷。片斷實例仍然會正確地渲染內容。不過,它沒有一個根節點,它的$el 指向一個錨節點,即一個空的文本節點(在開發模式下是一個註釋節點)。
但是更重要的是,組件元素上的非流程式控制制指令,非 prop 特性和過渡將被忽略,因為沒有根元素供綁定:

 

 

片段實例也有用處,但是通常情況下組件有一個根節點比較好,它會保證組件元素上的指令和特性能正確的轉換,同時性能也稍微好些。

 


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

-Advertisement-
Play Games
更多相關文章
  • 之前對於synchronized的實現和運用有所瞭解,但是也發現了一些缺陷,由於synchronized是在JVM層面上實現同步互斥,是以關鍵字形式加鎖,導致其顆粒度過大,有的時候不需要這麼大範圍的加鎖,在中斷和線程阻塞處理上也有所欠缺,在JDK1.5之後,Java引入了Lock,作為對於synch ...
  • Django入門筆記 **文檔包含Django安裝包、學習的筆記、代碼等 安裝 Django參考附件,只需要把附件拷貝到你需要的目錄就行。Django是1.8.16版本 Python:在附件中,其中有Django需要的依賴包 編輯器:Aptana,一個強大的IDE工具,可以在上邊新建模板,支持各種語 ...
  • 異常處理 面向對象 迭代器和生成器 python異常處理 下麵代碼觸發了一個FileNotFoundError 拋出異常 異常類型 捕獲異常使用try,except,finally,else python面向對象 python是完全面向對象的,python中一切都是對象,包括變數,函數等。 定義一個 ...
  • 1.概念 ①正向工程:Java類→資料庫表 MyBatis不支持 ②逆向工程:資料庫表→Java類 總結:通過MyBatis的jar包自動的生成資料庫所對應的Javabean。 步驟: 1.①創建一個專門的工程用於生成Java文件 先導包: 2.②pom.xml配置 3. ③創建generatorC ...
  • 前端迷思與React.js 前端技術這幾年蓬勃發展, 這是當時某幾個項目需要做前端技術選型時, 相關資料整理, 部分評論引用自社區。 開始吧: 目前, Web 開發技術框架選型為兩種的占 80% 。這種戲劇性的變化持續了近 6 年。 自 2013 年 5 月推出以來,ReactJS 在過去三年中已成... ...
  • 本文為轉載文章,文章來自:王輝|十億級視頻播放技術優化揭密 QCon是由InfoQ主辦的全球頂級技術盛會,每年在倫敦、北京、東京、紐約、聖保羅、上海、舊金山召開。自 2007年 3月份首次舉辦以來,已經有超萬名高級技術人員參加過QCon大會。QCon內容源於實踐並面向社區,演講嘉賓依據熱點話題,面向 ...
  • 無論是jquery還是zepto,都離不開$,這個符號似乎是萬能的,這篇文章通過zepto源碼來探究的就是$實現的原理。 ...
  • 原文:12 Extremely Useful Hacks for JavaScript 作者:Caio Ribeiro Pereira 翻譯:雁驚寒 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...