VUE基礎

1-1. VUE2.0介紹

Vue.js（讀音/vjuː/，類似於view）是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue採用自底向上增量開發的設計。Vue的核心庫只關注視圖層，它不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與單文件組件和Vue生態系統支持的庫結合使用時，Vue也完全能夠爲複雜的單頁應用程序提供驅動。

Vue的一些語法和AngularJS 的很相似（例如v-if vs ng-if）。
因爲AngularJS 是Vue早期開發的靈感來源。然
而，AngularJS 中存在的許多問題，在Vue中已經得到解決。
•複雜性
•靈活性和模塊化
•數據綁定
•指令與組件
•性能

React 和Vue有許多相似之處，它們都有：
•使用Virtual DOM（虛擬DOM）
•提供了響應式（Reactive）和組件化（Composable）的視圖組件。
•將注意力集中保持在覈心庫，而將其他功能如路由和全局狀態管理交給相關的庫。

三步實現hello world
Step1:引入腳本https://unpkg.com/vue
Step2:<div id="app">{{ message }}</div>
Step3:var app = new Vue({el: '#app',data: {message: 'Hello Vue!'}})

注意點

Vue不兼容IE8以下。把一個普通JavaScript 對象傳給Vue實例的data 選項，Vue將遍歷此對象所有的屬性，並使用Object.defineProperty把這些屬性全部轉爲getter/setter。Object.defineProperty是僅ES5 支持，且無法shim 的特性，這也就是爲什麼Vue不支持IE8 以及更低版本瀏覽器的原因。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
	{{message}}
</div>
</body>
<script type="text/javascript">
	var v = new Vue({
		el: "#app",
		data: {
			message: "hello world!!! 你好，世界！"
		}
	})
</script>
</html>

1-2. VUE基本使用,模板語法

Vue使用了基於HTML的模板語法，允許開發者聲明式地將DOM綁定至底層Vue實例的數據。

數據綁定是最常見的”Mustache”語法，即雙大括號形式。

使用方式：1. 文本

<div>{{message}}</div><div v-once>這個只執行一次：{{message}}</div>

使用方式：2. 純HTML

<div v-html=“htmlMsg”></div>相當於執行了原生的.innerHTML= htmlMsg;

注意：動態渲染html非常危險，容易導致XSS攻擊。即跨站腳本攻擊。

使用方式：3. 綁定屬性

<button v-bind:disabled=“btnFlag”>測試按鈕</button>

使用方式：4. 使用JavaScript表達式

<div>數學運算：{{x + y}}</div>

<div>三目運算：{{ok ? “yes” : “no”}}</div>

<div>方法的調用：{{msg.split(‘’).reverse().join()}}</div>

注意：if for var這樣的代碼不是表達式。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
	<div>{{message}}</div>
	<div v-once>只描繪一次：{{message}}</div>
</div>
</body>
<script type="text/javascript">
	var v = new Vue({
		el: "#app",
		data: {
			message: "你好世界!"
		}
	})
</script>
</html>

1-3. VUE條件分支指令

指令（Directives）是帶有v-前綴的特殊屬性。

<p v-if="flag">這是一個神祕的指令</p>

<a v-bind:href="url">鏈接</a>

<a v-on:click="doSomething">測試</a>

v-if=“表達式”

控制節點的渲染或移除

v-if與v-show的區別：

v-if 是惰性的：如果在初始渲染時條件爲假，則什麼也不做——直到條件第一次變爲真時，纔會開始渲染條件塊。

相比之下，v-show 就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於CSS 進行切換。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
	<div>{{message}}</div>
	<div v-once>只描繪一次：{{message}}</div>
	<hr>
	<div>{{htmlMsg}}</div>
	<div v-html="htmlMsg"></div>

	<hr>
	<button v-bind:disabled="flag">按鈕</button>
</div>
</body>
<script type="text/javascript">
	var v = new Vue({
		el: "#app",
		data: {
			message: "你好世界!",
			htmlMsg: "<h1>我是新來的，請多關照！！！</h1><input type='text'>",
			flag: true
		}
	})
</script>
</html>

1-4. 循環指令

我們用v-for 指令根據一組數組的選項列表進行渲染。

v-for 指令需要以item in items 形式的特殊語法，items 是源數據數組並且item 是數組元素迭代的別名。

例如：

<ul id=“app">
	<li v-for="item in items">
	{{ item.message}}
	</li>
</ul>

v-for 還支持一個可選的第二個參數爲當前項的索引。

<ul id="example-2">
	<li v-for="(item, index) in items">序號：
	{{ index }} 內容：{{ item.message}}
	</li>
</ul>

也可以用of 替代in 作爲分隔符，因爲它是最接近JavaScript 迭代器的語法：

<div v-for="item of items">{{item}}</div>

可以作爲循環對象的，除了數組以外也可以是對象。

也可以提供第二個的參數爲鍵名

第三個參數爲索引

整數迭代：

<div>
  <span v-for="n in 10">{{ n }} </span>
</div>

輸出結果爲：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
	<div>{{message}}</div>
	<div v-once>只描繪一次：{{message}}</div>
	<hr>
	<div>{{htmlMsg}}</div>
	<div v-html="htmlMsg"></div>

	<hr>
	<button v-bind:disabled="flag">按鈕</button>

	<hr>
	<p>加法的結果是：{{x + y}}</p>
	<p>{{ isMan ? "男生" : "女生"}}</p>
	<p> {{strText.split('').reverse().join('')}}</p>
</div>
</body>
<script type="text/javascript">
	var v = new Vue({
		el: "#app",
		data: {
			message: "你好世界!",
			htmlMsg: "<h1>我是新來的，請多關照！！！</h1><input type='text'>",
			flag: true,
			x: 12,
			y: 13,
			isMan: true,
			strText: "abcdefg"
		}
	})
</script>
</html>

1-5. 事件處理

使用v-on:事件名來監聽事件。例如v-on:click監聽點擊事件。

v-on簡寫@例如：v-on:click 寫爲 @click

事件修飾符
鍵值修飾符

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
	<p v-if="flag">這是一個測試v-if指令的節點</p>
	<p v-if="level === 1">這是管理員</p>
	<p v-else-if="level === 2">這是普通用戶</p>
	<p v-else>對不起您沒有權限</p>
	<hr>
	<p v-show="level === 1">這是管理員</p>
</div>
</body>
<script type="text/javascript">
	var v = new Vue({
		el: "#app",
		data: {
			flag: false,
			level: 1
		}
	})
</script>
</html>

1-6. 表單輸入綁定

v-model 指令在表單控件元素上創建雙向數據綁定。
它會根據控件類型自動選取正確的方法來更新元素。

v-model 會忽略所有表單元素的value、checked、selected 特性的初始值。
因爲它會選擇Vue實例數據來作爲具體的值。
你應該通過JavaScript 在組件的data 選項中聲明初始值。

修飾符

.lazy在默認情況下，v-model 在input 事件中同步輸入框的值與，但可以添加一個修飾符lazy ，從而轉變爲在change 事件中同步。
.number如果想自動將用戶的輸入值轉爲Number 類型（如果原值的轉換結果爲NaN則返回原值），可以添加一個修飾符number 給v-model 來處理輸入值。
.trim如果要自動過濾用戶輸入的首尾空格，可以添加trim 修飾符到v-model 上過濾輸入。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
	<input type="text" v-model="text1" />
	<br>
	{{text1}}
	<hr>
	<textarea v-model="longText"></textarea>
	<br>
	<p style="white-space: pre-line;">
		{{longText}}
	</p>
	<hr>
	<input type="checkbox" value="goodmorning" v-model="chk">
	<br>
	{{chk}}
	<div v-if="chk">
		要顯示的大段內容
	</div>
	<hr>
	<label><input type="radio" v-model="hobit" value="旅遊">旅遊</label>
	<label><input type="radio" v-model="hobit" value="逛喫">逛喫</label>
	<label><input type="radio" v-model="hobit" value="看電影">看電影</label>
	<br>
	{{hobit}}
	<hr>
	<h2>修飾符</h2>
	<input type="text" v-model.lazy="lazyvalue">
	<br>
	{{lazyvalue}}
	<hr>
	<input type="text" v-model.number="x">
	+
	<input type="text" v-model.number="y">
	= {{x + y}}
	<hr>
	<input type="text" v-model.trim="tValue">
	<p style="white-space: pre-line;">{{tValue}}</p>
</div>
</body>
<script type="text/javascript">
	var v = new Vue({
		el: "#app",
		data: {
			text1: "hello world",
			longText: "這是一段很長的文字",
			chk: false,
			hobit: "",
			lazyvalue: "init",
			x: 0,
			y: 0,
			tValue: " 123"
		}
	})
</script>
</html>

1-7. 樣式表處理

class的綁定

語法一：v-bind:class=“{ class名: 條件}"

例如：

<div v-bind:class="{ active: isActive}"></div>

語法二：v-bind:class=“對象"

例如：

語法三：

v-bind:class=“[變量1, 變量2, 變量3...]"

例如：

內聯樣式的綁定

語法一：v-bind:style=“對象名”

例如：

語法二：v-bind:style=“[樣式對象1, 樣式對象2]”

例如：

當v-bind:style使用需要特定前綴的CSS 屬性時，如transform，Vue.js 會自動偵測並添加相應的前綴。

樣式綁定

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script type="text/javascript" src="js/vue.js"></script>
	<style type="text/css">
		.redC {
			height: 100px;
			width: 200px;
			background: red;
			transition-duration: 1s;
		}
		.bigger {
			width: 300px;
			height: 200px;
		}
		.bluebox {
			background: blue;
		}
	</style>
</head>
<body>
<div id="app">
	<div v-bind:class="{redC: isFlag, bigger: bigFlag}"></div>
	<hr>
	<div v-bind:class="cssObject"></div>
	<hr>
	<div v-bind:class="[cls1, cls2]"></div>
	<hr>
	<div v-bind:style="{height: ht, width: wt, background: bg}"></div>
	<hr>
	<div v-bind:style="[cssObj1, cssObj2]"></div>
</div>
</body>
<script type="text/javascript">
	var v = new Vue({
		el: "#app",
		data: {
			isFlag: true,
			bigFlag: false,
			cssObject: {redC: true, bigger: true},
			cls1: "bluebox",
			cls2: "bigger",
			ht: "20px",
			wt: "20px",
			bg: "pink",
			cssObj1: {
				height: "50px",
				width: "50px"
			},
			cssObj2: {
				background: "blue",
				transform: "rotate(50deg)"
			}
		}
	})
</script>
</html>

1-8. 計算屬性(略)

1-9. 過濾器

Vue.js 允許你自定義過濾器，可被用作一些常見的文本格式化。

過濾器可以用在兩個地方：

mustache 插值
v-bind 表達式

在filters對象中聲明過濾器，返回值作爲過濾器的運算結果。

過濾器允許串聯使用

【筆記整理】VUE基礎入門+例子實踐

VUE基礎

1-1. VUE2.0介紹

1-2. VUE基本使用,模板語法

1-3. VUE條件分支指令

1-4. 循環指令

1-5. 事件處理

1-6. 表單輸入綁定

1-7. 樣式表處理

1-8. 計算屬性(略)

1-9. 過濾器

linux安裝cuda和cudnn

Mellanox網卡開啓SR-IOV

全面系統的AI學習路徑，幫助普通人也能玩轉AI

模擬手機設備：使用 Playwright 實現移動端自動化測試

HTML 00 Tutorial

uni-app實現上拉加載

vue3編譯優化之“靜態提升”

又是一個月-20240513

flask 如何保證返回json有序

linux服務器設置ssh免密

前端簡歷前端面試技巧

路由以及什麼是動態路由

粗略瞭解下Promise咯

【CSS小Demo】僞元素做京東背景

箭頭函數和 this指向

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結