Vue官方學習筆記

来源:https://www.cnblogs.com/yyq1/archive/2022/07/31/16440642.html
-Advertisement-
Play Games

視頻地址：https://learning.dcloud.io/#/?vid=0 開發工具：XbuilderX 官方教程：https://cn.vuejs.org/v2/guide/ 序言 Vue.js ：漸進式JavaScript框架 Vue.js優點 1.體積小 壓縮後33K； 2.更高的運行效 ...


  視頻地址：https://learning.dcloud.io/#/?vid=0 開發工具：XbuilderX 官方教程：https://cn.vuejs.org/v2/guide/

序言

 

Vue.js ：漸進式JavaScript框架     Vue.js優點

1.體積小

壓縮後33K；

2.更高的運行效率

基於虛擬dom，一種可以預先通過JavaScript進行各種計算，把最終的DOM操作計算出來並優化的技術，由於這個DOM操作屬於預處理操作，並沒有真實的操作DOM，所以叫做虛擬DOM。

3.雙向數據綁定

讓開發者不用再去操作dom對象，把更多的精力投入到業務邏輯上；

4生態豐富、學習成本低

市場上擁有大量成熟、穩定的基於vue.js的ui框架、常用組件!拿來即用實現快速開發!

對初學者友好、入門容易、學習資料多；

第1節 安裝與部署

根據自己的瀏覽器選擇，推薦谷歌瀏覽器或者開發工具內置瀏覽器

無法下載可以使用vue_dev_tools.crx 

採用 直接用 <script> 引入

打開XbuilderX 從 https://learning.dcloud.io/#/?vid=0 導入課程源碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<script type="text/javascript">
			Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。
		</script>
	</body>
</html>

從開發工具運行到瀏覽器或者內置瀏覽器

在瀏覽器F12，無報錯，輸入Vue.config回車

 

第2節 創建第一個vue應用

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div id="app"> 
	  {{ message }} {{name}} 
	</div>

&lt;script type="text/javascript"&gt; 
var app = new Vue({ //Vue是通過上面引入vue.js獲得的全局變數，通過new獲得一個app應用對象
	el: '#app', //el是Element選項，通過ID選擇器的方式選中#app div
	data: { //用於保存數據，在div視圖中聲明瞭哪些變數，需要data中為變數註冊和初始化賦值。 
		message: 'Hello Vue!',
		name : "Vue"
	}
});
&lt;/script&gt;



</body>

</html>

運行到內置瀏覽器

雖然沒有完全遵循 MVVM 模型，但是 Vue 的設計也受到了它的啟發。因此在文檔中經常會使用 vm (ViewModel 的縮寫) 這個變數名錶示 Vue 實例。

當創建一個 Vue 實例時，你可以傳入一個選項對象。這篇教程主要描述的就是如何使用這些選項來創建你想要的行為。作為參考，你也可以在 API 文檔中瀏覽完整的選項列表。

一個 Vue 應用由一個通過 new Vue 創建的根 Vue 實例，以及可選的嵌套的、可復用的組件樹組成。

第3節 數據與方法

 

當一個 Vue 實例被創建時，它將 data 對象中的所有的 property 加入到 Vue 的響應式系統中。當這些 property 的值發生改變時，視圖將會產生“響應”，即匹配更新為新的值。

體驗Vue的響應式，重新定義data變數的值

重新定義vm變數的值（取data或者vm變數最後一次的賦值）

沒有進行new Vue的聲明的變數不會生效

使用 Object.freeze()方法，這會阻止修改現有的變數，也意味著響應系統無法再追蹤變化。

Vue除了數據屬性，Vue 實例還暴露了一些有用的實例屬性與方法。它們都有首碼 $，以便與用戶定義的屬性區分開來。例如：

$watch實例方法

重新賦值要在$watch後面，紅色框看到了變化，藍色框是vue-devtools內置瀏覽器沒有裝可以忽略，綠色框是沒有定義阻止 vue 在啟動時生成生產提示可以忽略。 

第4節 生命周期


每個 Vue 實例在被創建時都要經過一系列的初始化過程——例如，需要設置數據監聽、編譯模板、將實例掛載到 DOM 併在數據變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命周期鉤子的函數，這給了用戶在不同階段添加自己的代碼的機會。

聲明周期需要寫在new Vue傳遞的對象內，以屬性(函數)的方式進行聲明。

在Vue應用運行的每個階段都會調用已聲明的生命周期函數。

常用的生命周期鉤子

其他的生命周期鉤子

activated deactivated beforeDestroy destroyed errorCaptured

生命周期圖示

第5節 模板語法-插值


Vue.js 使用了基於 HTML 的模板語法，允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循規範的瀏覽器和 HTML 解析器解析。

在底層的實現上，Vue 將模板編譯成虛擬 DOM 渲染函數。結合響應系統，Vue 能夠智能地計算出最少需要重新渲染多少組件，並把 DOM 操作次數減到最少。

如果你熟悉虛擬 DOM 並且偏愛 JavaScript 的原始力量，你也可以不用模板，直接寫渲染 (render) 函數，使用可選的 JSX 語法。

插值

文本

數據綁定最常見的形式就是使用“Mustache”語法 (雙大括弧) 的文本插值：

<span>Message: {{ msg }}</span>

Mustache 標簽將會被替代為對應數據對象上 msg property 的值。無論何時，綁定的數據對象上 msg property 發生了改變，插值處的內容都會更新。

通過使用 v-once 指令，你也能執行一次性地插值，當數據改變時，插值處的內容不會更新。但請留心這會影響到該節點上的其它數據綁定：

<span v-once>這個將不會改變: {{ msg }}</span>

原始 HTML

雙大括弧會將數據解釋為普通文本，而非 HTML 代碼。為了輸出真正的 HTML，你需要使用 v-html 指令：

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

Using mustaches: <span style="color: red">This should be red.</span>

Using v-html directive: This should be red.

通過v-html指令讓變數變成html元素

這個 span 的內容將會被替換成為 property 值 rawHtml，直接作為 HTML——會忽略解析 property 值中的數據綁定。註意，你不能使用 v-html 來複合局部模板，因為 Vue 不是基於字元串的模板引擎。反之，對於用戶界面 (UI)，組件更適合作為可重用和可組合的基本單位。

你的站點上動態渲染的任意 HTML 可能會非常危險，因為它很容易導致 XSS 攻擊。請只對可信內容使用 HTML 插值，絕不要對用戶提供的內容使用插值。 

Attribute

Mustache 語法不能作用在 HTML attribute 上，遇到這種情況應該使用 v-bind 指令：

<div v-bind:id="dynamicId"></div>

通過v-bind指令為HTML標簽綁定屬性

切換綁定的class不同屬性

使用 JavaScript 表達式

迄今為止，在我們的模板中，我們一直都只綁定簡單的 property 鍵值。但實際上，對於所有的數據綁定，Vue.js 都提供了完全的 JavaScript 表達式支持。

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}


{{ message.split('').reverse().join('') }}


<div v-bind:id="'list-' + id"></div>

算數運算

 

三元運算

函數運算

先將vue拆分成單個字母，split拆分成不同數組，reverse進行反序排列，join進行重組結合成一個字元串。

這些表達式會在所屬 Vue 實例的數據作用域下作為 JavaScript 被解析。有個限制就是，每個綁定都只能包含單個表達式，所以下麵的例子都不會生效。

<!-- 這是語句，不是表達式 -->
{{ var a = 1 }}

<!-- 流控制也不會生效，請使用三元表達式 -->

{{ if (ok) { return message } }}

模板表達式都被放在沙盒中，只能訪問全局變數的一個白名單，如 Math 和 Date 。你不應該在模板表達式中試圖訪問用戶定義的全局變數。

第6節 模板語法-指令

 

 指令 (Directives) 是帶有 v- 首碼的特殊 attribute。指令 attribute 的值預期是單個 JavaScript 表達式 (v-for 是例外情況，稍後我們再討論)。指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地作用於 DOM。 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <p v-if="seen">現在你看到我了</p>
</div>
<script type="text/javascript">
var vm = new Vue({ //定義一個Vue的實例的變數
    el   : "#app",
    data : {
        seen : true //如果是false就不會被渲染
    }
}); 
</script>
</body>
</html>

參數

一些指令能夠接收一個“參數”，在指令名稱之後以冒號表示。例如，v-bind 指令可以用於響應式地更新 HTML attribute： 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <p v-if="seen">現在你看到我了</p>
    <a v-bind:href="url">鏈接</a>
</div>
<script type="text/javascript">
var vm = new Vue({ //定義一個Vue的實例的變數
    el   : "#app",
    data : {
        seen : true ,//如果是false就不會被渲染
        url : "http://www.baidu.com"
    }
}); 
</script>
</body>
</html>

 

 

指令修飾符

 

修飾符 (modifier) 是以半形句號 . 指明的特殊尾碼，用於指出一個指令應該以特殊方式綁定。例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件調用 event.preventDefault()： 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <p v-if="seen">現在你看到我了</p>
    <a v-bind:href="url">鏈接</a>
    <div @click="click1">
        <div @click="click2">
            chick me
        </div>
    </div>
</div>
<script type="text/javascript">
var vm = new Vue({ //定義一個Vue的實例的變數
    el   : "#app",
    data : {
        seen : true ,//如果是false就不會被渲染
        url : "http://www.baidu.com"
    },
    methods:{
        click1 : function () {
            console.log('click1...');
        },
        click2 : function () {
            console.log('click2...');
        }
    }
}); 
</script>
</body>
</html>

通過修飾符(.stop)讓事件停下來不執行click1

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <p v-if="seen">現在你看到我了</p>
    <a v-bind:href="url">鏈接</a>
    <div @click="click1">
        <div @click.stop="click2">
            chick me
        </div>
    </div>
</div>
<script type="text/javascript">
var vm = new Vue({ //定義一個Vue的實例的變數
    el   : "#app",
    data : {
        seen : true ,//如果是false就不會被渲染
        url : "http://www.baidu.com"
    },
    methods:{
        click1 : function () {
            console.log('click1...');
        },
        click2 : function () {
            console.log('click2...');
        }
    }
}); 
</script>
</body>
</html>

第7節 class與style綁定

 

操作元素的 class 列表和內聯樣式是數據綁定的一個常見需求。因為它們都是 attribute，所以我們可以用 v-bind 處理它們：只需要通過表達式計算出字元串結果即可。不過，字元串拼接麻煩且易錯。因此，在將 v-bind 用於 class 和 style 時，Vue.js 做了專門的增強。表達式結果的類型除了字元串之外，還可以是對象或數組。  

綁定 HTML Class

對象語法

我們可以傳給 v-bind:class 一個對象，以動態地切換 class： 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <div
    v-bind:class="{ active: isActive }"
    style="width:200px; height:200px; text-align:center; line-height:200px;">
        hi vue
    </div>>
</div>
<script type="text/javascript">
var vm = new Vue({ //定義一個Vue的實例的變數
    el   : "#app",
    data : {
        isActive : true //如果是false第11行將不會進行綁定
    }
}); 
</script>
<style>
    .active{background: #FF0000;}
</style>>
</body>
</html>

可以在對象中傳入更多欄位來動態切換多個 class。此外，v-bind:class 指令也可以與普通的 class attribute 共存。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <div
    class="test"
    v-bind:class="{ active: isActive }"
    style="width:200px; height:200px; text-align:center; line-height:200px;">
        hi vue
    </div>>
</div>
<script type="text/javascript">
var vm = new Vue({ //定義一個Vue的實例的變數
    el   : "#app",
    data : {
        isActive : true 
    }
}); 
</script>
<style>
.test{font-size:50px;}
.active{background: #FF0000;}
</style>>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <div
    class="test"
    v-bind:class="{ active: isActive ,green : isGreen}"
    style="width:200px; height:200px; text-align:center; line-height:200px;">
        hi vue
    </div>>
</div>
<script type="text/javascript">
var vm = new Vue({ //定義一個Vue的實例的變數
    el   :
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 我又造了個輪子：GrpcGateway
    我個人對GRPC是比較感興趣的，最近在玩通過前端調用GRPC。通過前端調用GRPC業界有兩種方式：GRPC Web和GRPC JSON轉碼。 GRPC Web 通過JS或者Blazor WASM調用GRPC，微軟在這方面做的還是很好的，從.NET Core3.0之後就提供了兩種實現GRPC Web的 ...
  • Doxillion for mac(多格式文檔轉換器)
    Doxillion是一款多格式文檔轉換器軟體，支持在Microsoft office文件（如doc，docx，xls和xlsx）之間進行轉換，且一次可以轉換數千個文件。Doxillion還支持從WordPerfect，txt，Open office，odt等轉換為pdf，docx等，可以大大的提升你 ...
  • 記一次Linux server偶發CPU飆升問題的跟進與解決
    Music Tag Editor 中文版是一款macOS平臺的音頻標簽管理工具，支持UNICODE，軟體帶有PLS/M3U列表生成器，還可以生成XML/TXT/CSV格式的播放列表，通過它用戶可以快速修改音樂文件的tag信息、創建播放列表，另外，軟體自帶播放器，可以播放常見的音頻文件。 詳情：Mus ...
  • Wondershare PDFelement 9 Pro Mac(支持OCR的PDF編輯工具)
    PDFelement Pro Mac是一款可以幫助用戶編輯PDF的工具，其設計的功能針對中小型用戶開發，支持常規的編輯、修改、操作，並且可以實現PDF文件轉換功能，您可以將word、Excel等office文件轉換為PDF文件保存，讓您可以擁有一款簡單、高效的PDF辦公軟體。 詳情：Wondersh ...
  • SoundSource 5 for Mac(音頻控制工具)
    SoundSource 5 for Mac是一款優質的音頻控制軟體，可讓您直接從菜單欄調整輸入，輸出和音效設備以及音量設置。啟用輸入設備的軟播放到您想要的輸出，這樣您就可以聽到通過任何麥克風或其他來源發出的聲音。 詳情：SoundSource 5 for Mac(音頻控制工具) 功能介紹 1、快速訪 ...
  • 精心總結十三條建議，幫你創建更合適的MySQL索引
    上篇文章講到使用MySQL的Explain命令可以分析SQL性能瓶頸，優化SQL查詢，以及查看是否用到了索引。 我們都知道創建索引可以提高查詢效率，但是具體該怎麼創建索引？ 哪些欄位適合創建索引？ 哪些欄位又不適合創建索引？ 本文跟大家一塊學習一下如何創建合適資料庫索引。 ...
  • Flink寫入Redis集群 重寫flink-connector-redis包，解決Cluster無法輸入密碼問題
    使用flink的時候難免和redis打交道，相信大家都使用過flink-connector-redis來處理，但是當我想要使用RedisSink寫入集群時，發現居然不支持使用密碼，於是有了這篇筆記。 ...
  • 混合型界面：對話式UI的未來
    2016年是對話式設計之年。消息應用正以驚人的好評度和參與率，占領世界和app store的排行榜。每個社區產品、應用市場、點播服務、約會應用、社交游戲和電商產品，為了提高好評度、參與率和銷量，都已經或即將加入消息功能。 有大量關於對話式UI的討論，還有這種人機對話模式如何通過簡單的指令和文字反饋（ ...
一周排行
    -Advertisement-
    Play Games
  • gRPC入門學習之旅（六）
    JWT（JSON Web Token）是一種用於在網路應用之間傳遞信息的開放標準（RFC 7519）。它使用 JSON 對象在安全可靠的方式下傳遞信息，通常用於身份驗證和信息交換。 在Web API中，JWT通常用於對用戶進行身份驗證和授權。當用戶登錄成功後，伺服器會生成一個Token並返回給客戶端 ...
  • [譯] .NET 8 中的硬體內在函數（支持 Wasm 和 AVX-512）
    老周在幾個世紀前曾寫過樹莓派相關的 iOT 水文，之所以沒寫 Nano Framework 相關的內容，是因為那時候這貨還不成熟，可玩性不高。不過，這貨現在已經相對完善，老周都把它用在項目上了——第一個是自製的智能插座，這個某寶上50多塊可以買到，搜“esp32 插座”就能找到。一種是 86 型盒子 ...
  • 實戰指南：使用 xUnit.DependencyInjection 在單元測試中實現依賴註入【完整教程】
    引言 上一篇我們創建了一個Sample.Api項目和Sample.Repository，並且帶大家熟悉了一下Moq的概念，這一章我們來實戰一下在xUnit項目使用依賴註入。 Xunit.DependencyInjection Xunit.DependencyInjection 是一個用於 xUnit ...
  • Avalonia 中的樣式和控制項主題
    在 Avalonia 中，樣式是定義控制項外觀的一種方式，而控制項主題則是一組樣式和資源，用於定義應用程式的整體外觀和感覺。本文將深入探討這些概念，並提供示例代碼以幫助您更好地理解它們。 樣式是什麼？ 樣式是一組屬性，用於定義控制項的外觀。它們可以包括背景色、邊框、字體樣式等。在 Avalonia 中，樣 ...
  • C# 凍結Excel視窗以鎖定行列、或解除凍結
    在處理大型Excel工作簿時，有時候我們需要在工作表中凍結窗格，這樣可以在滾動查看數據的同時保持某些行或列固定不動。凍結窗格可以幫助我們更容易地導航和理解複雜的數據集。相反，當你不需要凍結窗格時，你可能需要解凍它們以獲得完整的視野。 下麵將介紹如何使用免費.NET庫通過C#實現凍結Excel視窗以鎖 ...
  • .NET Core 8 部署在 IIS 的簡單三步
    .NET 部署 IIS 的簡單步驟一： 下載 dotnet-hosting-x.y.z-win.exe ，下載地址：.NET Downloads (Linux, macOS, and Windows) (microsoft.com) .NET 部署 IIS 的簡單步驟二： 選擇對應的版本，點擊進入詳 ...
  • PowerDesigner 業務流程/數據建模軟體和元數據管理解決方案
    拓展閱讀 資料庫設計工具-08-概覽 資料庫設計工具-08-powerdesigner 資料庫設計工具-09-mysql workbench 資料庫設計工具-10-dbdesign 資料庫設計工具-11-dbeaver 資料庫設計工具-12-pgmodeler 資料庫設計工具-13-erdplus ...
  • STL筆記 之 vector
    初識STL STL，(Standard Template Library)，即"標準模板庫"，由惠普實驗室開發，STL中提供了非常多對信息學奧賽很有用的東西。 vector vetor是STL中的一個容器，可以看作一個不定長的數組，其基本形式為: vector<數據類型> 名字; 如: vector ...
  • Flask 生產環境部署（Falsk + uWSGI + nginx）
    前言 最近自己做了個 Falsk 小項目，在部署上伺服器的時候，發現雖然不乏相關教程，但大多都是將自己項目代碼複製出來，不講核心邏輯，不太簡潔，於是將自己部署的經驗寫成內容分享出來。 uWSGI 簡介 uWSGI: 一種實現了多種協議（包括 uwsgi、http）並能提供伺服器搭建功能的 Pytho ...
  • 技術周刊的轉變：如何平衡熱愛與現實？
    1 文本Embedding 將整個文本轉化為實數向量的技術。 Embedding優點是可將離散的詞語或句子轉化為連續的向量，就可用數學方法來處理詞語或句子，捕捉到文本的語義信息，文本和文本的關係信息。 ◉ 優質的Embedding通常會讓語義相似的文本在空間中彼此接近 ◉ 優質的Embedding相 ...
所有分類