Vue新手入門指南（易懂）-有解無憂

Vue快速入門

前言

對于一名初入編程的新手來說，JavaScript的語法偏向復雜，選擇Vue庫可以說是一個較為不錯的體驗，在很多方面，Vue簡化了JavaScrip語法，并且實作資料與視圖的雙向系結，達到回應式頁面的目的，

博主是一位大二的編程小白，以下的內容都是自己對Vue的理解，寫本篇博客的目的是為了鞏固自己對Vue的基礎知識，大家可以作為一種筆記來觀看，如果能夠給學校Vue的朋友帶來幫助，不勝榮幸，對于存在許多表達不恰當以及邏輯錯誤的地方，還望大家斧正，
參考資料:《Vue.js從入門到實踐》

1. Vue實體和模板語法

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

Vue語法與JavaScript一樣寫在script中，通過id選擇器系結DOM，在Vue中，只需要在el中對DOM的id進行掛載，可以簡單的理解為鉤子，el通過id="app"的特征鉤住了<div>中的所有內容，這樣我們就可以在Vue中實作對DOM中的操作，

data

Vue中的data用于宣告我們所要使用的資料，這樣操作有利于我們在維護或者操作檔案的時候能夠更容易的清晰某一板塊所需要修改的資料，并且不需要直接對DOM進行操作，此時的資料與DOM是雙向系結的，當我們對data中所宣告的資料進行修改時，DOM中同時也會發生回應式的變化，

methods

Methods中包含的是我們對這個頁面的整個邏輯以及頁面中的觸發事件，其中的內容相當于JavaScript中的function內容

2. 內置指令
在Vue中有許多內置指令，通過這些指令替換JavaScript中對檔案的以及事件的操作，

v-html
v-html:將資料以html標簽形式更新

<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>

在這里插入圖片描述
可以發現，第二個<p>標簽中所系結的Vue.js被hello，word！所更新，并且在宣告的message中‘<h1>hello,word!<\h1>'通過html標簽更新了其中的內容，看到的這是一個一級標題的hello，word！，

v-text

<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>

在這里插入圖片描述
通過v-txet指令，盡管仍然替換掉了<p>標簽中的內容，但是僅僅是通過字串的形式顯示了出來，而不是像html一樣通過html標簽的形式顯示，

v-cloak

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

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

v-once

v-once指令只渲染元素和組件一次，隨后的渲染，使用了此指令的元素、組件及其所有的子節點，都會當作靜態內容并跳過，這個可以用于優化更新性能，

<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>

在這里插入圖片描述

v-on

對于Vue的事件系結使用內置的v-on指令來完成，以及傳遞引數，

<body>
	<div id="app"> 
		<input type="button" value="單擊事件" v-on:click="alert"> //@click="alert"
	</div>
<script>
	new Vue({
		el:'#app',	
		data:{
		},
		methods:{
		alert:function() {
			alert('觸發了點擊事件');
		}	
		},
	})
</script>
</body>

在這里插入圖片描述

在v-on:click點擊事件后面添加了命名為alert的方法，在此之前我試過直接使用v-on:click="alert(‘觸發了點擊事件’)"，但是點擊之后控制臺報錯，不知道有沒有大神明白為什么會這個樣子，
使用v-on指令時，不僅僅可以觸發點擊事件，譬如雙擊事件以及鍵盤敲擊事件等等，只需要修改v-on:click or(mousedown、mouseup等)，同時我們可以將v-on:click簡寫為@click，觸發事件的方法必須寫在methods中，

v-if

v-if、v-show可以實作條件渲染，Vue會根據運算式值的真偽條件來渲染元素，還有可以與v-if搭配的v-else、v-else-if指令，類似與JavaScript中的if-else、if-elseif-elseif，

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

<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>

在這里插入圖片描述
注意，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的區別

都是根據運算式的真偽判斷元素顯示與隱藏
v-if只有在條件為真時，才對元素進行渲染，v-show無論初始條件為何，元素總會被渲染，
v-show初始開銷更高，v-if的切換開銷更高
頻繁切換時用v-show；運行條件很少改變時用v-if
v-for
在Vue中，提供了v-for指令用來回圈資料，

<body>
	<div id="app">
		<h>開始回圈</h>
		<li v-for="index in item"> //index用于遍歷item中的所有元素
			{{index}}
		</li>
	</div>
<script>
	new Vue({
		el:'#app',	
		data:{
		item:[1,2,3,4,5],
		},
		methods:{
		},
	})
</script>
</body>

在這里插入圖片描述

<body>
	<div id="app">
		<h>開始回圈</h>
		<li v-for="(index,items) in item">//index表示陣列中的元素，items表實元素的下標
			{{index}},{{items}}
		</li>
	</div>
<script>
	new Vue({
		el:'#app',	
		data:{
		item:[1,2,3,4,5],
		},
		methods:{
		},
	})
</script>
</body>

在這里插入圖片描述

可以使用of替代in作為分隔符，因為它更接近JavaScript迭代器的語法
<div v-for=“index in items”>

v-model
關于v-model最重要的就是雙向資料系結，使用Vue操作DOM元素時，視圖與資料依照任何的一方同時發生改變，

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

當我們在input輸入框里面輸入值時，所系結的message屬性值也發生了變化，當系結成功，我們在input中輸入的任何合法字串或者數字時，Vue都會重新更新message的屬性值，從而符合我們所輸入的值，再通過reversedMessage方法將message顛倒過來重新列印在=={{reversedMessage}}==，由于是雙向資料系結，三者是同時發生的，

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還是其他標簽，都可以通過“:標簽名”來為元素系結屬性，對于系結的元素內容是作為一個JavaScript變數，故而可以對其進行撰寫JavaScript的運算式，

3. 結束語
編程的學習任重而道遠，如果大家覺得不錯就點贊分享吧，謝謝大家的觀看，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/265417.html

標籤：其他

上一篇：CSS學習，day1

下一篇：網頁中的添加一個保存按鈕使用，經過維護失效了