Vue新手入門指南

猿友 2021-03-03 15:26:01 瀏覽數(shù) (8077)

反饋

Vue快速入門

前言

對(duì)于一名初入編程的新手來說，JavaScript 的語法偏向復(fù)雜，選擇 Vue 庫可以說是一個(gè)較為不錯(cuò)的體驗(yàn)。在很多方面，Vue 簡(jiǎn)化了 JavaScrip 語法，并且實(shí)現(xiàn)數(shù)據(jù)與視圖的雙向綁定，達(dá)到響應(yīng)式頁面的目的。

博主是一位大二的編程小白，以下的內(nèi)容都是自己對(duì) Vue 的理解，寫本篇博客的目的是為了鞏固自己對(duì) Vue 的基礎(chǔ)知識(shí)，大家可以作為一種筆記來觀看，如果能夠給學(xué)校 Vue 的朋友帶來幫助，不勝榮幸，對(duì)于存在許多表達(dá)不恰當(dāng)以及邏輯錯(cuò)誤的地方，還望大家斧正。

參考資料:《Vue.js 1.0教程》

1. Vue實(shí)例和模板語法

<body>
	<div id="app"> 
		<p>{{message}}</p> 
	</div>
<script>
	new Vue({
		el:'#app',	
		data:{
			message:'hello,word!'
		},
		methods:{
		},
	})
</script>
</body>

el

Vue 語法與 JavaScript 一樣寫在 ?script? 中，通過 ?id? 選擇器綁定 DOM，在 Vue 中，只需要在 ?el? 中對(duì) DOM 的 id 進(jìn)行掛載，可以簡(jiǎn)單的理解為鉤子，?el? 通過? id="app"?的特征鉤住了<div> 中的所有內(nèi)容，這樣我們就可以在 Vue 中實(shí)現(xiàn)對(duì) DOM 中的操作。

data

Vue 中的 ?data? 用于聲明我們所要使用的數(shù)據(jù)，這樣操作有利于我們?cè)诰S護(hù)或者操作文檔的時(shí)候能夠更容易的清晰某一板塊所需要修改的數(shù)據(jù)，并且不需要直接對(duì) DOM 進(jìn)行操作，此時(shí)的數(shù)據(jù)與 DOM 是雙向綁定的，當(dāng)我們對(duì) ?data? 中所聲明的數(shù)據(jù)進(jìn)行修改時(shí)，DOM 中同時(shí)也會(huì)發(fā)生響應(yīng)式的變化。

methods

?Methods? 中包含的是我們對(duì)這個(gè)頁面的整個(gè)邏輯以及頁面中的觸發(fā)事件，其中的內(nèi)容相當(dāng)于 JavaScript 中的 ?function? 內(nèi)容

2. 內(nèi)置指令

在 Vue 中有許多內(nèi)置指令，通過這些指令替換 JavaScript 中對(duì)文檔的以及事件的操作。

v-html

?v-html?:將數(shù)據(jù)以 html 標(biāo)簽形式更新

<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
    <title>w3cschool</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app"> 
		<p>{{website}}</p>
		<p v-html="message">{{website}}</p> 
	</div>
<script>
	new Vue({
		el:'#app',	
		data:{
			website:'Vue，js',
			message:'<h1>hello,word!</h1>'
		},
		methods:{
		},
	})
</script>
</body>
</html>

微信截圖_20210303172538

可以發(fā)現(xiàn)，第二個(gè)?<p>?標(biāo)簽中所綁定的 Vue.js 被 hello，word！所更新，并且在聲明的 message 中?'<h1>hello,word!<\h1>'?通過 html 標(biāo)簽更新了其中的內(nèi)容，看到的這是一個(gè)一級(jí)標(biāo)題的 hello，word！。

v-text

<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
    <title>w3cschool</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app"> 
		<p>{{website}}</p>
		<p v-text="message">{{website}}</p> 
	</div>
<script>
	new Vue({
		el:'#app',	
		data:{
			website:'Vue,js',
			message:'<h1>hello,word!</h1>'
		},
		methods:{
		},
	})
</script>
</body>
</html>

微信截圖_20210303172852

通過 v-txet 指令，盡管仍然替換掉了?<p>?標(biāo)簽中的內(nèi)容，但是僅僅是通過字符串的形式顯示了出來，而不是像 html 一樣通過 html 標(biāo)簽的形式顯示。

v-cloak

代碼加載的時(shí)候先加載 HTML，把插值語法當(dāng)做 HTML 內(nèi)容加載到頁面上，當(dāng)加載完 js 后才把插值語法替換掉，所以我們會(huì)看到閃爍問題，而 v-clock 可以解決這個(gè)問題。

<div v-cloak>{{msg}}</div>
<style type="text/css">
 [v-cloak]{
  display: none;
 }
 </style>

v-once

?v-once? 指令只渲染元素和組件一次，隨后的渲染，使用了此指令的元素、組件及其所有的子節(jié)點(diǎn)，都會(huì)當(dāng)作靜態(tài)內(nèi)容并跳過，這個(gè)可以用于優(yōu)化更新性能。

<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
    <title>w3cschool</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app"> 
		<p v-once>can not change:{{website}}</p>
		<p>change: {{website}}</p>
		<p ><input type="text" v-model = "website"></p> 
	</div>
<script>
	new Vue({
		el:'#app',	
		data:{
			website:"hello"
		},
		methods:{
		},
	})
</script>
</body>
</html>

微信截圖_20210303172931

v-on

對(duì)于 Vue 的事件綁定使用內(nèi)置的 v-on 指令來完成，以及傳遞參數(shù)。

<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
    <title>w3cschool</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app"> 
		<input type="button" value="單擊事件" v-on:click="alert">
	</div>
<script>
	new Vue({
		el:'#app',	
		data:{
		},
		methods:{
		alert:function() {
			alert('觸發(fā)了點(diǎn)擊事件');
		}	
		},
	})
</script>
</body>
</html>

微信截圖_20210303172957

在 ?v-on:click ?點(diǎn)擊事件后面添加了命名為 alert 的方法，在此之前我試過直接使用?v-on:click="alert('觸發(fā)了點(diǎn)擊事件')"?，但是點(diǎn)擊之后控制臺(tái)報(bào)錯(cuò)，不知道有沒有大神明白為什么會(huì)這個(gè)樣子。

使用? v-on? 指令時(shí)，不僅僅可以觸發(fā)點(diǎn)擊事件，譬如雙擊事件以及鍵盤敲擊事件等等，只需要修改 v-on:click or(mousedown、mouseup等)，同時(shí)我們可以將 ?v-on:click? 簡(jiǎn)寫為 ?@click?，觸發(fā)事件的方法必須寫在 methods 中。

v-if

?v-if?、?v-show? 可以實(shí)現(xiàn)條件渲染，Vue 會(huì)根據(jù)表達(dá)式值的真假條件來渲染元素。還有可以與 v-if 搭配的 v-else、v-else-if 指令，類似與 JavaScript 中的 if-else。

簡(jiǎn)單來說，?v-if?相當(dāng)于 JavaScript 中我們對(duì) DOM 的條件操作，根據(jù)表達(dá)值的真假，從而對(duì) DOM 進(jìn)行有條件的操作，讓我們來看看是如何操作的把。

<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
    <title>w3cschool</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app"> 
		<input type="button" value="切換"  @click="go">
		<p v-if="jump">我跳出來拉</p>
	</div>
<script>
	new Vue({
		el:'#app',	
		data:{
			jump:false
		},
		methods:{
			go:function(){
				this.jump=!this.jump;
			}
		},
	})
</script>
</body>
</html>

微信截圖_20210303173033

注意，?v-if? 的默認(rèn)布爾值為? false?，并且? v-if? 是直接對(duì) ?DOM? 的操作，而隨后的? v-show ?是對(duì)樣式的操作。

v-show

?v-show?用法與?v-if?大致一樣，不同的是帶有 v-show 的元素始終會(huì)被渲染并且保留在 DOM中，?v-show?只是簡(jiǎn)單地切換元素的 CSS 屬性 display，當(dāng)模板屬性為 true 的時(shí)候，控制臺(tái)顯示為 ?display:block?；屬性值為 false 的時(shí)候，控制臺(tái)顯示?display:none?。
v-show不支持 ?<tempalte>? 語法,也不支持 v-else。

<body>
	<div id="app"> 
		<input type="button" value="切換"  @click="go">
		<p v-show="jump">我跳出來拉</p>
	</div>
<script>
	new Vue({
		el:'#app',	
		data:{
			jump:false
		},
		methods:{
			go:function(){
				this.jump=!this.jump;
			}
		},
	})
</script>
</body>

?v-show?與?v-if?的區(qū)別

都是根據(jù)表達(dá)式的真假判斷元素顯示與隱藏
?v-if?只有在條件為真時(shí)，才對(duì)元素進(jìn)行渲染，?v-show?無論初始條件為何，元素總會(huì)被渲染。
?v-show?初始開銷更高，?v-if?的切換開銷更高
頻繁切換時(shí)用?v-show?；運(yùn)行條件很少改變時(shí)用?v-if?

v-for

在 Vue 中，提供了 v-for 指令用來循環(huán)數(shù)據(jù)。

<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
    <title>w3cschool</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<h>開始循環(huán)</h>
		<li v-for="index in item">
			{{index}}
		</li>
	</div>
<script>
	new Vue({
		el:'#app',	
		data:{
		item:[1,2,3,4,5],
		},
		methods:{
		},
	})
</script>
</body>
</html>

微信截圖_20210303173217

<body>
<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
    <title>w3cschool</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<h>開始循環(huán)</h>
		<li v-for="(index,items) in item">//index表示數(shù)組中的元素，items表實(shí)元素的下標(biāo)
			{{index}},{{items}}
		</li>
	</div>
<script>
	new Vue({
		el:'#app',	
		data:{
		item:[1,2,3,4,5],
		},
		methods:{
		},
	})
</script>
</body>
</html>

微信截圖_20210303173258

v-model

關(guān)于 v-model 最重要的就是 雙向數(shù)據(jù)綁定。使用 Vue 操作 DOM 元素時(shí)，視圖與數(shù)據(jù)依照任何的一方同時(shí)發(fā)生改變。

<body>
	<div id="app">
        輸入內(nèi)容：<input type="text" v-model="message"><br/>    <!--v-model綁定了輸入框與message中的內(nèi)容-->
        反轉(zhuǎn)內(nèi)容：{{reversedMessage}}
    </div>
<script>
	new Vue({
            el:'#app',
            data:{
                message:''
            },  
            computed:{              //計(jì)算屬性在computed選項(xiàng)中定義，當(dāng)計(jì)算屬性所依賴的值發(fā)生變化時(shí)，這個(gè)屬性的值會(huì)自動(dòng)更新
                                    //computed可以換做methods定義一個(gè)方法實(shí)現(xiàn)相同的功能
                reversedMessage: function(){
                    return this.message.split('').reverse().join('') //選中message中的內(nèi)容，反轉(zhuǎn)后添加
                }
            }
        })
</script>
</body>

當(dāng)我們?cè)?input 輸入框里面輸入值時(shí)，所綁定的 message 屬性值也發(fā)生了變化，當(dāng)綁定成功，我們?cè)?input 中輸入的任何合法字符串或者數(shù)字時(shí)，Vue 都會(huì)重新更新 message 的屬性值，從而符合我們所輸入的值，再通過 ?reversedMessage? 方法將 message 顛倒過來重新打印在=={{reversedMessage}}==，由于是雙向數(shù)據(jù)綁定，三者是同時(shí)發(fā)生的。

v-bind

?v-bind ?的作用是為元素綁定屬性，寫法v-bind:屬性名，可以簡(jiǎn)寫為“:屬性名”。

<body>
	<div id="app">
		<img :src="imgsrc" :title="imgtitle">
	</div>
<script>
	new Vue({
		el:'#app',	
		data:{
		imgsrc:"xxx",
		imgtitle:"獲得圖片",
		},
		methods:{
		},
	})
</script>
</body>

無論是 class 還是其他標(biāo)簽，都可以通過“:標(biāo)簽名”來為元素綁定屬性。對(duì)于綁定的元素內(nèi)容是作為一個(gè) JavaScript 變量，故而可以對(duì)其進(jìn)行編寫 JavaScript 的表達(dá)式。

小編在此推薦幾門適合小白高效學(xué)習(xí)的 Vue 好課：

Vue.js

1 人點(diǎn)贊