Vue 基礎（入門級）學習筆記

阿新 • • 發佈：2021-02-05

技術標籤：web vue.js

Vue 基礎（入門級）學習筆記

學習前言

適合已經掌握了HTML、CSS、JavaScript、AJAX基礎知識
可以使用vscode、sublime等工具，vscode可以下載Live Server外掛便於網頁實時展示效果（儲存網頁介面自動變化）

引入

Vue.js教程文件

匯入開發版本的vue.js

<!-- 開發環境版本，包含了有幫助的命令列警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

建立Vue例項物件，設定el屬性和data屬性

<div id="app">
  {{ message }}
  <h2>{{ school.name }}</h2>
  <ul>
  	<li>{{ campus[0] }}</li>
  	<li>{{ campus[3] }}</li>
  </ul>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'，
    school:{
    	name:"第一個物件名" 
，
    	address:"中國"
    },
    campus:["A","B","C"]
  }
})

el:掛載點
- 支援類選擇器、id選擇器、標籤選擇器等，但是在實際開發中建議使用類選擇器（唯一）
- 可以使用其他雙標籤，但是不要把vue掛載到標籤上，因為它們帶自己的樣式
- Vue會管理el選項中命中的元素及其內部的後代元素
data資料物件
- Vue中用到的資料定義在data中
- data中可以寫複雜型別的資料
- 渲染複雜型別的資料時，遵守js語法即可

Vue指令

指令帶有字首 v-，以表示它們是 Vue 提供的特殊 attribute。

內容繫結，事件繫結

v-text
- v-text指令的作用是：設定標籤的內容
- 預設寫法會替換全部內容，使用差值表示式{{}}可以替換指定內容
- 內部支援寫表示式

<div id="app">
  <h2 v-text="message+'!'">長沙</h2>
  <h2 v-text="info">長沙</h2>
  <h2>{{ message }}長沙</h2>
</div>

var app =new Vue({
	el:"#app"
	data:{
		message:"是哪個城市！！！"
		info:"烏魯木齊"
	}
})
//只有最後一個可以顯示長沙

v-html
- v-html指令的作用是：設計元素的innerHTML
- 內容中有html結構會被解析為標籤
- v-text指令無論內容是什麼，只會解析為文字
- 解析文字使用v-text，需要解析HTML結構使用v-html

<div id="app">
  <p v-html="content">長沙</p>
</div>

var app =new Vue({
	el:"#app"
	data:{
		content:"<a href='#'>長沙</a>"
	}
})

v-on
- v-on指令的作用是為元素繫結事件
- 事件名不需要寫on
- 指令可以簡寫為@
- 繫結的方法定義在methods屬性中
- 方法內部通過使用this關鍵字可以訪問定義站在data中資料

<div id="app">
	<input type="button" value="事件繫結" v-on:click="doIt">
	<input type="button" value="事件繫結" v-on:monseenter="doIt">
	<input type="button" value="事件繫結" v-on:dbclick="doIt">
	<input type="button" value="v-on簡寫" @dbclick="doIt">
</div>

var app =new Vue({
	el:"#app",
	methods:{
		doIt:function(){
		//邏輯
		}
	}
})

事件繫結----計數器

顯示切換，屬性繫結

v-show
- v-show指令的作用是：根據表示式值的真假，切換元素顯示和隱藏
- 原理是修改元素的display，實現顯示隱藏
- 指令後面的內容，最終都會解析為布林值
- 值為true元素顯示，值為false元素隱藏
- 資料改變之後，對應元素的顯示狀態會同步更新

<div id="app">
	<input type="button" value="切換顯示狀態" @click="changeIsShow">
	<input type="button" value="累加年齡" @click="addAge">
	<img src="地址 " v-show="true">
	<img src="地址" v-show="isShow">
	<img src="地址" v-show="age>=18">
</div>

var app =new Vue({
	el:"#app",
	data:{
		isShow:false,
		age:16
	},
	methods:{
		changeIsShow:function(){
			this.isShow = !this.isShow;
		}
		addAge:function(){
		this.age++;
		}
	}
})

v-if
- v-if指令的作用是：根據表示式值的真假切換元素顯示和隱藏
- 本質是通過操縱dom元素來切換顯示狀態
- 當表示式的值為true，元素存在於dom樹中，為false，從dom樹中移除

<div id="app">
	<input type="button" value="切換顯示" @click="toggleIsShow">
	<p v-if="isShow">這是個什麼</p>
	<p v-show="isShow">v-show修飾</p>
	<h2 v-if="temperature>=35">熱死啦</h2>
</div>

var app =new Vue({
	el:"#app",
	data:{
		isShow:false,
		temperature:40
	},
	methods:{
		toggleIsShow:function(){
			this.isShow = !this.isShow;
		}
	}
})

v-bind
- v-bind指令的作用是：為元素繫結屬性
- 完整寫法是v-bind:屬性名
- 簡寫的話可以直接忽略v-bind，只保留：屬性名
- 需要動態增刪class建議使用物件的方式

.active{
	boder:1px solid red;
}

<div id="app">
	<img v-bind:src="imgSrc" >
	<img v-bind:title="imgtitle+'!!!'" >
	<img v-bind:class="isActive?'active':''">
	<img v-bind:class="{active:isActive}">
</div>

完全等價於

<div id="app">
	<img :src="imgSrc" >
	<img :title="imgtitle+'!!!'" >
	<img :class="isActive?'active':''" @click="toggleActive">
	<img :class="{active:isActive}" @click="toggleActive">
	<!-- active 是否失效取決於isActive -->
</div>

var app =new Vue({
	el:"#app",
	data:{
		imgSrc:"圖片地址",
		imgTitle:"我是圖片"，
		isActive:false
	},
	methods:{
		toggleIsShow:function(){
			this.isActive = !this.isActive;
		}
	}
})

Vue小例子（二）------ 圖片切換

列表迴圈，表單元素繫結

v-for
- v-for指令的作用是：根據資料生成列表結構
- 陣列經常和v-for結合使用
- 語法是（item，index）in 資料
- item和index可以結合其他指令一起使用
- 陣列長度的更新會同步到頁面上，是響應式的

<div id="app">
	<input type="button" value="新增資料" @click="add">
	<input type="button" value="移除資料" @click="remove">
	<ul>
		<li v-for="(item,index) in arr" :title="item">
		{{ index }}{{ item.name }}
		</li>
	</ul>
</div>

var app =new Vue({
	el:"#app",
	data:{
		arr:[1,2,3,4,5],
		objArr:[
			{name:"jack"},
			{name:"rose"}
		]
	},
	methods:{
	add:function(){
		this.vegetables.push({name:"tom"})
	},
	remove:function(){
		this.vegetables.shift()
	},
		
})

v-on補充
- 事件繫結上的方法寫成函式呼叫的形式，可以傳入自定義引數
- 定義方法是需要定義形參來接受傳入實參
- 事件的後面跟上，修飾符可以對事件進行限制
- .enter可以限制觸發的按鍵為回車
- 事件修飾符有很多種

<div id="app">
	<input type="button" value="點選" @click="add">
	<input type="text"  @keyup.enter="sayHi">
</div>

var app =new Vue({
	el:"#app",
	methods:{
	doIt:function(p1,p2){
		console.log("做IT");
		console.log(p1);
		console.log(p2);
	},
	sayHi:function(){
		alert("吃了沒");
	},		
})

v-model
- v-model指令的作用是便捷的設定和獲取表單元素的值
- 繫結的資料和表單元素的值相關聯
- 繫結的資料<------>表單元素的值

<div id="app">
	<input type="text"  value="修改message" @click="setM"/>
	<input type="text"  v-model="message" @keyup.enter="getM"/>
	<h2>{{ message }}</h2>
</div>

var app =new Vue({
	el:"#app",
	data:{
		message:"v-model"
	},
	methods{
		getM:function(){
			alert(this.message);
		}
		setM:function(){
			this.message = "bian";
		}
	}	
})