Vue新手入門指南

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

反饋

Vue快速入門

前言

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

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

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

1. Vue實例和模板語法

<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? 中對 DOM 的 id 進行掛載，可以簡單的理解為鉤子，?el? 通過? id="app"?的特征鉤住了<div> 中的所有內(nèi)容，這樣我們就可以在 Vue 中實現(xiàn)對 DOM 中的操作。

data

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

methods

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

2. 內(nèi)置指令

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

v-html

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

<!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)，第二個?<p>?標簽中所綁定的 Vue.js 被 hello，word！所更新，并且在聲明的 message 中?'<h1>hello,word!<\h1>'?通過 html 標簽更新了其中的內(nèi)容，看到的這是一個一級標題的 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>?標簽中的內(nèi)容，但是僅僅是通過字符串的形式顯示了出來，而不是像 html 一樣通過 html 標簽的形式顯示。

v-cloak

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

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

v-once

?v-once? 指令只渲染元素和組件一次，隨后的渲染，使用了此指令的元素、組件及其所有的子節(jié)點，都會當作靜態(tài)內(nèi)容并跳過，這個可以用于優(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

對于 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ā)了點擊事件');
		}	
		},
	})
</script>
</body>
</html>

微信截圖_20210303172957

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

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

v-if

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

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

<!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? 的默認布爾值為? false?，并且? v-if? 是直接對 ?DOM? 的操作，而隨后的? v-show ?是對樣式的操作。

v-show

?v-show?用法與?v-if?大致一樣，不同的是帶有 v-show 的元素始終會被渲染并且保留在 DOM中，?v-show?只是簡單地切換元素的 CSS 屬性 display，當模板屬性為 true 的時候，控制臺顯示為 ?display:block?；屬性值為 false 的時候，控制臺顯示?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ù)表達式的真假判斷元素顯示與隱藏
?v-if?只有在條件為真時，才對元素進行渲染，?v-show?無論初始條件為何，元素總會被渲染。
?v-show?初始開銷更高，?v-if?的切換開銷更高
頻繁切換時用?v-show?；運行條件很少改變時用?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表實元素的下標
			{{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ù)據(jù)依照任何的一方同時發(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:{              //計算屬性在computed選項中定義，當計算屬性所依賴的值發(fā)生變化時，這個屬性的值會自動更新
                                    //computed可以換做methods定義一個方法實現(xiàn)相同的功能
                reversedMessage: function(){
                    return this.message.split('').reverse().join('') //選中message中的內(nèi)容，反轉(zhuǎn)后添加
                }
            }
        })
</script>
</body>

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

v-bind

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

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

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

小編在此推薦幾門適合小白高效學習的 Vue 好課：

Vue.js

1 人點贊