App下載

Vue新手入門指南

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

Vue快速入門

前言

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

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

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

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

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

  • el

Vue 語(yǔ)法與 JavaScript 一樣寫在 ?script? 中,通 過(guò) ?id? 選擇器綁定 DOM,在 Vue 中,只需要在 ?el? 中對(duì) DOM 的 id 進(jìn)行掛載,可以簡(jiǎn)單的理解為鉤子,?el? 通過(guò)? 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è)頁(yè)面的整個(gè)邏輯以及頁(yè)面中的觸發(fā)事件,其中的內(nèi)容相當(dāng)于 JavaScript 中的 ?function? 內(nèi)容

2. 內(nèi)置指令

在 Vue 中有許多內(nèi)置指令,通過(guò)這些指令替換 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>'?通過(guò) 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

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

  • v-cloak

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

<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)容并跳過(guò),這個(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 指令來(lái)完成,以及傳遞參數(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 的方法,在此之前我試過(guò)直接使用?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á)式值的真假條件來(lái)渲染元素。還有可以與 v-if 搭配的 v-else、v-else-if 指令,類似與 JavaScript 中的 if-else。

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

<!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">我跳出來(lái)拉</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>? 語(yǔ)法,也不支持 v-else。
<body>
	<div id="app"> 
		<input type="button" value="切換"  @click="go">
		<p v-show="jump">我跳出來(lái)拉</p>
	</div>
<script>
	new Vue({
		el:'#app',	
		data:{
			jump:false
		},
		methods:{
			go:function(){
				this.jump=!this.jump;
			}
		},
	})
</script>
</body>

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

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

  • v-for

在 Vue 中,提供了 v-for 指令用來(lái)循環(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 的屬性值,從而符合我們所輸入的值,再通過(guò) ?reversedMessage? 方法將 message 顛倒過(guò)來(lái)重新打印在=={{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>

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


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


1 人點(diǎn)贊