萬字血書Vue—走近Vue

来源:https://www.cnblogs.com/gfhcg/archive/2023/03/17/17222228.html
-Advertisement-
Play Games

Vue是什麼? Vue是一套用於構建用戶界面的漸進式JavaScript框架 構建用戶界面:用vue往html頁面中填充數據 漸進式:Vue可以自底向上逐層的應用,從輕量小巧核心庫的簡單應用,到引入各式各樣插件的複雜應用。 框架:一整套現成的解決方案,遵守框架的規範,學習框架,就是學習框架中的規定用 ...


image

Vue是什麼?

Vue是一套用於構建用戶界面漸進式JavaScript框架

  • 構建用戶界面:用vue往html頁面中填充數據

  • 漸進式:Vue可以自底向上逐層的應用,從輕量小巧核心庫的簡單應用,到引入各式各樣插件的複雜應用。

  • 框架:一整套現成的解決方案,遵守框架的規範,學習框架,就是學習框架中的規定用法

誰開發的?

https://zhuanlan.zhihu.com/p/58335278

Vue特點

  1. 採用組件化模式,提高代碼復用率,且讓代碼更好維護。
  2. 聲明式編碼,開發人員無需操作DOM,提高開發效率。

Vue文檔

https://v2.cn.vuejs.org/

https://cn.vuejs.org/

起步

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 準備好一個容器 -->
    <div id="root">
        <h1>Hello World!</h1>
        <h1>Hello {{name}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;//阻止 vue 在啟動時生成生產提示
        //創建Vue實例
        //容器和實例 一一對應
        const vm=new Vue({
            el:'#root',//用於指定當前Vue為哪個容器服務,值通常為css選擇器字元串,不能基於body和html初始化
            data:{//data中用於存儲數據,供el指定的容器使用
                name:'張三',
            }
        })
    </script>
    
</body>
</html>

el和data的第二種寫法:

<body>
    <div id="app">{{username}}</div>
    #導入腳本文件
    <script src="vue.js"></script>
    <script>
        const vm=new Vue({
            data(){ //此處this指向vue實例
            return{
                   username:'zs'
            }
            }
        })
        vm.$mount=('#app')//掛載
        //data:對象式和函數式,組件時只能用後者,不能用箭頭函數this會指向window而不是vue
    </script>
</body>

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

-Advertisement-
Play Games
更多相關文章
  • 您可以使用以下 SQL 語句刪除 MS SQL Server 表中重覆的行: WITH CTE AS ( SELECT ROW_NUMBER() OVER(PARTITION BY column1, column2, ... columnN ORDER BY (SELECT 0)) RN FROM ...
  • 摘要:DWS的PL/pgSQL函數/存儲過程中有一個特殊的語法PERFORM語法,用於執行語句但是丟棄執行結果的場景,常用於一些狀態判斷的場景。 本文分享自華為雲社區《GassDB(DWS)功能 -- 函數出參 #【玩轉PB級數倉GaussDB(DWS)】》,作者:譡里個檔。 DWS的PL/pgSQ ...
  • 大資管包括原銀保監監管下的銀行理財、信托、保險,原證監會監管下的公募基金、私募基金專戶及基金子公司、券商資管以及期貨資管。據統計,2022年底資管行業的資產管理規模也達到了136萬億元。 在《商業銀行理財業務監督管理辦法》《關於規範金融機構資產管理業務的指導意見》等理財新規、資管新規的要求下,大資管 ...
  • 數據湖作為新一代大數據基礎設施,近年來持續火熱,許多前線的同學都在討論數據湖應該怎麼建,許多企業也都在構建或者計劃構建自己的數據湖。基於此,自然引發了許多關於數據湖選型的討論和探究。但是經過搜索之後我們發現,網上現存的很多內容都是基於較早之前的開源信息做出的結論,在企業調研初期容易造成不准確的印象和 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 組件介紹 關於web端的右鍵功能常用的地方有表格的右鍵,或者tab標簽的右鍵等,本文記錄一下封裝一個右鍵菜單組件的思路步驟代碼。 程式員除了會用輪子,還要嘗試去貼合自己公司業務場景造輪子。 組件效果圖 我們先看一下右鍵組件的效果圖 組件分 ...
  • Vue進階 生命周期 組件運行的過程 組件的生命周期是:組件從創建->運行(渲染)->銷毀的整個過程,是一個時間段 如何監聽組件的不同時刻 vue框架為組件內置了不同時刻的生命周期函數,是他在關鍵時刻幫我們調用的一些特殊名稱的函數,生命周期函數會伴隨著組件的運行而自動調用。 created函數 組件 ...
  • 模板語法 插值語法 Mustache插值採用{{ }},用於解析標簽體內容,將Vue實例中的數據插入DOM中 <h1>Hello {{name}}</h1> 指令語法 指令用於解析標簽,是vue為開發者提供的一套模板語法,輔助開發者渲染頁面的基本結構。 (指令是vue開發中最基礎、最常用、最簡單的知 ...
  • uni-app 實現輪播圖組件父容器背景色隨圖片主題色改變 實現思路 1、獲取輪播圖主題色,通過 canvas 獲取圖片主題色。 2、隨著輪播圖組件圖片的輪播,動態設置父容器背景色為圖片的主題色。 實現代碼 <template> <view class="container"> <canvas ca ...
一周排行
    -Advertisement-
    Play Games
  • .NET Core 選項系統的主要實現在 Microsoft.Extensions.Options 和 Microsoft.Extensions.Options.ConfigurationExtensions 兩個 Nuget 包。對於一個框架的源碼進行解讀,我們可以從我們常用的框架中的類或方法入手 ...
  • 最近在工作中遇到一個問題,就是我有多個線程會調用bitmap對象,運行的時候報錯,對象當前正在其他地方使用。第一反應肯定是加鎖啊,於是我就在每個用到bitmap的地方都加了鎖,但是運行之後依然報這個錯 測試代碼如下 using System; using System.Drawing; using ...
  • 一:背景 1. 講故事 前段時間有位朋友微信找到我,說他的程式使用 hsl 庫之後,採集 plc 時記憶體溢出,讓我幫忙看一下怎麼回事,哈哈,貌似是分析之旅中的第二次和 hsl 打交道,既然找到我,那就上 windbg 說話吧。 二:WinDbg 分析 1. 為什麼會記憶體溢出 簡單觀察程式的提交記憶體之 ...
  • 在 IIS 上啟用 Websocket 在 Windows Server 2012 或更高版本上啟用對 WebSocket 協議的支持: 備註 使用 IIS Express 時無需執行這些步驟 通過“管理”菜單或“伺服器管理器”中的鏈接使用“添加角色和功能”嚮導。 選擇“基於角色或基於功能的安裝”。 ...
  • C#-垃圾回收機制(GC) 什麼是GC 官網中有這麼一句話: The garbage collector is a common language runtime component that controls the allocation and release of managed memory ...
  • 呆了2個大屏行業的公司,對大屏幕有一些瞭解,所以整理下所瞭解的觸摸屏相關概念。方便自己以及進入這個行業的小伙伴們,能有個系統、快速的認知。 觸摸屏詳細的知識點,網上其實都有。整理資料過程中,我也瞭解了更多的觸摸屏知識,像聲波屏、光學屏之類的之前就沒接觸。下麵分不同的模塊,給大家介紹 交互觸摸屏類型 ...
  • 近段時間忙於各種項目和對【易排平臺】的優化,沒顧得上分享APS相關的小技巧,回頭看看小公眾號的關註人數早已達1500+,在此爭取時間寫一下這段時間在項目上及平臺優化過程中遇到的一些小技巧,以感謝諸位的關註。過去數月的解決的問題中,涉及最多的是規劃模型中,實現各種時間維度的功能,目前在平臺上也稍有成果 ...
  • 針對大量log日誌快速定位錯誤地方 動態查看日誌 tail -f catalina.ou 從頭打開日誌文件 cat catalina.ou 可以使用 >nanjiangtest.txt 輸出某個新日誌去查看 [[email protected] logs]# cat -n catalina.out |grep 7 ...
  • 前言 RocketMQ是阿裡巴巴旗下一款開源的MQ框架,經歷過雙十一考驗、Java編程語言實現,有非常好完整生態系統。RocketMQ作為一款純java、分散式、隊列模型的開源消息中間件,支持事務消息、順序消息、批量消息、定時消息、消息回溯等 本篇文章第一部分屬於一些核心概念和工作流程的講解;第二部 ...
  • 在java,c#類的成員修飾符包括,公有、私有、程式集可用的、受保護的。 對於python來說,只有兩個成員修飾符:公有成員,私有成員 成員修飾符是來修飾誰呢?當然是修飾成員了。那麼python類的成員包括什麼呢? python成員: 欄位,方法,屬性 每個類成員的修飾符有兩種: 公有成員:內部外部 ...