Vue基礎知識

如何用data()綁定到HTML

const app = Vue.createApp({
	data() {
		return {
			name: "名"
		}
	}
})
<body>
	<div id="app">
		<h1>你好! {{name}}</hi>
	</div>
</body>

如果name 是 null 或者 undefined Vue會輸出空白值

如何在HTML屬性中綁定提供的數據 v-bind

const app = Vue.createApp({
	data() {
		return {
			link: "www.google.com"
		}
	}
})
<body>
	<div id="app">
		<a v-bind:href="link">鏈接</a>		
	</div>
</body>

簡寫形式

<body>
	<div id="app">
		<a :href="link">鏈接</a>		
	</div>
</body>

遍歷數據v-for

<div id="app">
	<ul>
		<li v-for="todo in todos"> {{ todo }} </li>
	</ul>
</div>

data() {
	return {
		todos: ["把項目做完", "去超市購物", "看十分鐘的書"],
	};
},

訪問數組索引

<li v-for="(todo, index) in todos">
	{{ index + 1}}. {{ todo }}
</li>

遍歷數組對象

data() {
	return {
		todos: [
			{
				content: "把項目做完",
				complate: true,
			},
			{
				content: "去超市購物",
				complete: false,
			},
			{
				content: "看10分鐘的書",
				complete: false,
			}
		]
	}
}
<li v-for="todo in todos">
	<input type="checkbox" :checked="todo.complete" >
	{{ todo.content }}
</li>

Vue 中的 v-if, v-else-if, v-else

用來判斷是否需要展示DOM,滿足條件就進行展示。

真值:true, 1, 非空字符串

假值:false, 0, undefined, null, ""

<p v-if="books.length === 0">目前沒有任何書籍</p>
<h2 v-else-if="books.length" ===1">{{ books[0] }}</h2>
<ul v-else>
	<li v-for="book in books">{{ books }}</li>
</ul>

v-if v-else-ifv-else必須相鄰才能生效

Vue 中的 v-show

<p v-show="books.length === 0">目前沒有任何書籍</p>
<h2 v-show="books.length" ===1">{{ books[0] }}</h2>

v-if 如果條件不滿足,是不會渲染出來的,但是v-show則會渲染,只是樣式會設置成<p style="display: none">

Vue 註冊事件

HTML事件名

Vue事件名

onclick

click

onchange

change

onblur

blur

onfocus

focus

onsubmit

submit

onreset

reset

<button v-on:click="
	showAnswer = !showAnswer"
</button>

data() {
	return {
		showAnswer: false:
	}
}
<p v-show="showAnswer" class"answer">
	答: Vue是一套用于构建用户界面的渐进式框架。
</p>

簡寫方式-@

<button @click="
	showAnswer = !showAnswer"
</button>

計算屬性的用法-computed

<button @click="showAnswer = !showAnswer">
{{ showAnswer ? "隱藏" : "顯示" }}
</button>
<-- 其他地方 -->
<p> {{ showAnswer ? "隱藏" : "顯示" }}
...

當一個簡單邏輯需要被重複使用,
直接hardcode對代碼的可讀性和維護性會產生影響。
所以可以使用computed來實現代碼的重複利用。

computed是一個對象,不是函數,跟data()不一樣

data() {
	return {
		showAnswer: false,
	}
},
computed: {
	label() {
		return this.showAnswer ? :  "隱藏" : "顯示";
		}
}
<button @click="showAnswer = !showAnswer">
{{ label }}
</button>

使用label就能重複使用同樣的邏輯。

computed VS method 兩者的區別

computed會對結果進行緩存,method則不會

computed只會在其依賴的資料改變的時候重新求值。只要依賴的值沒有改動,就只會訪問其緩存結果。

method觸發重新渲染時便會重新執行。

method

const app = Vue.createApp({
	data() {},
	computed: {},
	methods: {
		toggleAnswer() {
			this.showAnswer = !this.showAnswer;
		},
	},
});
<button @click="toggleAnswer"> {{ label }} </button>

監聽器-watch

data() {
	return {
		showAnswer: false
	}
},
watch: {
	showAnswer() {
	}
}

實際案例

watch: {
	showAnswer(newVal, oldVal){
		if(newVal) {
			this.countDown = 5;
			if(this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
	// 5秒後關閉答案
		this.timer = setInterval(() => {
			this.countDown -= 1;
				if (this.countDown === 0) {
				this.showAnswer = false;
				clearInterval(this.timer);
				this.timer = null;
			}
		}, 1000);
	},
}

watch函數接受兩個param值(新的值舊的值)

computed vs watch

實際應用

computed調用data包裝後返回新的值,不會影響原本的值。

watch監聽器當條件符合,便會修改data的值

computed也可以修改data的值,通過get()和set() ,不過不推薦。

表單處理

<input
	id="username"
	type="text"
	@input="handleInput"
/>

methods: {
	handleInput(e) {
		console.log(e.target.value)
}

當函數要獲得表單輸入的值,handleInput會有js原生event事件返回的值,
在param輸入e來獲取這個事件然後使用e.target.value函數便可以獲得值。

如果需要在其他地方展示該輸入值,就必須賦予一個變量給他

data() {
	return {
		username: "",
	};
}

methods: {
	handleInput(e) {
		this.username = e.target.value'
}

<p>你輸入的用戶名是: {{ username }} </p>

雙向綁定&v-model

上一個輸入表達的範例,是一個單項的數據流向,當用戶輸入值後會反映在username上,可是如果username修改後,用戶輸入的值不會消失如圖所示,當按下重置後,{{ username }} 的值成功被重置了,可是用戶輸入的值並沒有有所改變,因為這是一個單向的數據流向。

所這裡使用:value來進行輸入值的雙向綁定

<input
	id="username"
	type="text"
	@input="handleInput"
	:value="username"
/>

結果就是當點擊重置按鈕,用戶輸入的值和展示username的值會同時被重置。

v-model 語法糖

<input
	
	id="username"
	type="text"
	v-model="username"
/>

v-model同時執行了監聽值+雙向綁定,因此不需要@input函數以及:value

表單提交事件處理

設定一個按鈕用來提交

<form class="form" @submit="handleSubmit">
method: {
	handleSubmit() {
	}
}

點擊提交按鈕,會自動進行跳轉刷新

如果要阻止跳轉,原生可以使用e.preventDefault()

method: {
	handleSubmit(e) {
		e.preventDefault()
	}
}

Vue本身有阻止跳轉的方案

<form class="form" @submit.prevent="handleSubmit">

行內style動態綁定數據

data() {
	return {
		color: "white",
		fontSize: "16px",
	}
}

然後可以像v-bind一樣綁定數值
這裡要注意的是使用v-bind後style就是javascript的表達式,要用對象的形式。

<p :style="{color: color, fontSize: fontSize}">
這是一個段落
</p>

或者

data() {
	return {
		pStyle: {
			color: "white",
			fontSize: "16px",
		}
	}
}
<p :style="pStyle">
這是一個段落
</p>