Vue考前詳細總結-有解無憂

- 概念
- Vue.js的基本用法：
- - 一、Vue.js的下載與安裝
  - 二、Vue程式
  - 三、Vue.js基本語法
  - 四、Vue.js指令
  - - (1)利用插值運算式、v-text、v-html 實作元素的資料系結
    - (2)利用v-on實作元素的事件系結
    - (3) 利用 v-show 和 v-if 指令控制元素的顯示或隱藏
    - (4)利用 v-bind 指令設定元素屬性
    - (5)v-on指令的補充一傳遞自定義引數與事件修飾符
    - (6)利用 v-model 獲取和設定表單元素的值，實作資料的雙向系結( 唯一一個可以實作雙向資料系結的指令)
    - (7)利用 v-for 指令根據資料生成串列結構(根據資料的個數進行回圈)
    - (8) Vue中如何使用樣式
  - 五、vue.js指令總結

概念

Vue.js是前端js的框架
區分一下框架和庫的概念：
在這里插入圖片描述
Vue 是漸進式JavaScript框架，“ 漸進式框架”和“自底向上增量
開發的設計””是Vue開發的兩個概念，它具有以下優點：
1.易用(使用成本低)，
2.靈活(生態系統完善，適用于任何規模的專案)
3.高效(體積小，優化好，性能好)
Vue.js是一個提供了MVVM風格（Model-View-ViewMode）的雙向資料系結的Javascript框架，專注于視圖層，

MVVM 由Model、 View、ViewModel三部分構成，Model層代表資料模型，也可以在ModeI中定義資料修改和操作的業務邏輯; View 代表UI組件，它負責將資料模型轉化成UI展現出來，ViewModel 是一個同步View和ModeI的物件，

Vue.js的基本用法：

一、Vue.js的下載與安裝

可以直接下載到本地（官網下載vue.min.js）或使用CDN，然后用 < script > 標簽引入到頁面中，Vue會被注冊為一個全域變數，

二、Vue程式

（1）創建HTML檔案
（2）引入vue.js（導包）
（3）創建Vue實體
在這里插入圖片描述

<!DOCTYPE html>
<html Lang="en">
<head>
<meta charset="UTF-8">
<title>第一個Vue程式</title>
</head>
<body>
	<div id="app">
		{{message}}
	</div>
	<!--匯入vue.js-->
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript">
		//創建vue實體
		var myVue=new Vue({
			el:"#app",
			data:{
				//vue實體用到的資料
				message:"歡迎學習"
			}
		})
	</script>
</body>
</html >

三、Vue.js基本語法

1、el: 掛載點，利用css選擇器來設定vue實體掛載（管理）的元素，
所以，
①Vue實體的作用范圍是什么?
答: vue會管理eI掛載的元素及其內部的后代元素，
②是否支持其他選擇器?
答:支持其他選擇器，但是建議使用id選擇器，因為它默認是唯一的，
③是否可以設定在其他DOM元素上?
答:不能掛載在單標簽上，可以設定在大部分的雙標簽上(body和html除外)，建議盡量掛載在div元素上，因為div沒有任何樣式，

2、data資料物件，用來系結vue實體的資料變數，每個不同變數之間用逗號分隔，
資料型別可以是字串，也可以是復雜的型別，如陣列、物件等，
在這里插入圖片描述
3、vue. js中的MVVM思想是前端視圖層的概念，主要關注視圖層分離，即MVVM把前端的視圖層分為了三部分Model、View、ViewMode，

四、Vue.js指令

Vue指令指的是以v-開頭的一組特殊語法，利用它們可以實作常見的網頁效果，

(1)利用插值運算式、v-text、v-html 實作元素的資料系結

資料系結最常見的形式就是使用{{…}} (雙大括號)的插值運算式，插值運算式只會替換自己的這個占位符，不會把整個元素的內容替換，適合部分替換;
v-text和v-html也可以為元素系結資料，v-text設定標簽的內容(textContent)，v-htm| 設定標簽的innerHTML,但它們會覆寫元素中原本的內容，
v-text替換內容中的html標簽以文本的形式存在，v-html替換內容中的html標簽以標簽決議顯示在頁面上，對于普通文本它們是一樣的，
它們內部支持寫運算式，
例子：

<!DOCTYPE html>
<html Lang="en">
<head>
<meta charset="UTF-8">
<title>one</title>
</head>
<body>
	<div id="app">
		<h1>{{message+"!!!"}}學習啦</h1>
		<h1 v-text="message+'!!!'">要考試啦</h1>
		<h1 v-html="info+'!!!'">加油呀</h1>
		<h1 v-text="link"></h1>
		<h1 v-html="link"></h1>
	</div>
	<!--匯入vue.js-->
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript">
		//創建vue實體
		var myVue=new Vue({
			el:"#app",
			data:{
				//vue實體用到的資料
				message:"某某",
				info:"<i>jquery</i>",
				link:"<a href='https://blog.csdn.net/qq_45884783?spm=1019.2139.3001.5343'>我的博客</a>"
			}

		})
	</script>
</body>
</html>

(2)利用v-on實作元素的事件系結

在這里插入圖片描述
例：

<!DOCTYPE html>
<html Lang="en">
<head>
<meta charset="UTF-8">
<title>two</title>
</head>
<body>
<div id="app">
	<input type= "button" value="單擊事件" v-on:click="show">
	<button type="button" v-on:mouseenter="show">移入事件</button>
	<button type= "button" @dblclick="show" >雙擊事件</button>
	<h1 @click="change">{{message}}</h1>
</div>

	<!--匯入vue.js-->
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript">
		//創建vue實體
		var myVue=new Vue({
			el: "#app",
			data:{ 
				//vue 實體用到的資料
				message:"河南科技大學",
			},
			methods:{
				show:function(){
					alert("Hellow World!");
				},
				change: function(){
					// console. Log( this . message);
					//在方法中利用this可以獲取到data中的資料
					this .message+="軟體學院";
				}
			}
		})

	</script>
</body>
</html>

(3) 利用 v-show 和 v-if 指令控制元素的顯示或隱藏

v-show根據指令后面的運算式結果的真偽(true或false)，切換元素的顯示和隱藏，true 顯示，false隱藏，原理是修改元素的display屬性實作顯示或隱藏，指令后面資料改變元素的狀態會同步更新，
v- if根據指令后面的運算式結果的真偽(true或false)，切換元素的顯示和隱藏，但它操作的DOM元素本身，true時元素存在DOM樹中，faIse時元素從DOM樹中移除，指令后面資料改變元素的狀態會同步更新，
在具體使用時頻繁切換用v-show,反之用v-if，前者切換消耗少，

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<div id="app">
<button type="button" @click="change">切換顯示狀態</button>
<button type="button" @click=" add">累加資料</ button>
<!-- <img src= "images/mudan1. jipg" v- show= "true ">
<img src= "images/mudan2. jpg" v- show= "isShow">
<img src= "images/mudan3. jpg" v-show= "num>25"> - - >
<!-- 在具體使用時頻繁切換用v-show,反之用v-if，前者切換消耗少， -->
<img src=" images/mudan1. jpg" v-if="true">
<img src=" images/mudan2. jpg" v-if=" isShow">
<img src=" images/mudan3. jpg" v-if="num>25">
</div>
<!--匯入vue.js-->
<script type=" text/javascript" src= "vue. js"></script>
<script type="text/javascript" >
//創建vue 實體
var myVue=new Vue({
el:"#app",
data:{ //vue 實體用到的資料
isShow:true,
num: 20
}
methods:{
change : function(){
this. isShow= !this . isShow;
add: function(){
this. num++;
})
</script>
</body>
</html>

(4)利用 v-bind 指令設定元素屬性

在這里插入圖片描述

(5)v-on指令的補充一傳遞自定義引數與事件修飾符

事件修飾符:對事件進行一定的限制(阻止事件冒泡、默認行為等或當事件是從特定鍵觸發時才觸發)，
可以自定義按鍵修飾符，格式:

Vue.config.kevCodes.delect=46;
//自定義全域按鍵修飾符，并不是所有的鍵都可以定義成修飾符

在這里插入圖片描述

(6)利用 v-model 獲取和設定表單元素的值，實作資料的雙向系結( 唯一一個可以實作雙向資料系結的指令)

在這里插入圖片描述

<!DOCTYPE html>
<html Lang="en">
<head>
<meta charset="UTF-8">
<title>v-model</title>
</head>
<body>
	<div id="app">
		<input type="text" :value="message">
		<button type="button" @click= "setM">修改message的值</button>
		<input type= "text" v-modeL="message" @keyup.enter="getM" >
		<h1>{{message}}</h1>
	</div>
<!--匯入vue. js-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
//創建vue實體
	var myVue=new Vue({
		el:"#app",
		data:{
			message:"洛陽牡丹甲天下!"
		},
		methods:{
			getM: function(){
				alert(this . message);
		},
		setM: function(){
			this.message="花開時節動京城!";
		}
	}
})

	</script>
</body>
</html >