vue總結1

• 1.概述
• 2.基礎
• 3.指令
• 4.存盤
• 5.系結
• 6.過濾filter
• 7.影片
• 8.組件

1.概述

• Vue.js的定位是一個漸進式框架
• 前端三大mvvm框架 vue , react ,angular
• 特點：
  簡單上手方便，只需要具備基本的HTML/JavaScript/CSS 基礎
  結合Angular指令與react組件思維
  生態豐富（插件多）API檔案完善
• vue官網 插件案例 需引入的js

2.基礎

常用的實體化引數

• 1.el:{ } 選擇目標標簽

• 2.data:{ } 指定資料

• 3.methods:{ } 方法

• 4.computed:{ } 計算
  從現有的資料計算出新的資料 通常會快取 多對一
  格式：
  

• 5.watch:{ } 監聽
  監聽資料的變化，并執行回呼函式handler 一對多
  

• 6.directives:{ } 指令(可設定自定義指令)
  獲取節點 操作dom節點時使用
  一個指令定義物件可以提供如下幾個鉤子函式 (均為可選)：
  bind：只呼叫一次，指令第一次系結到元素時呼叫，在這里可以進行一次性的初始化設定，
  inserted：被系結元素插入父節點時呼叫 (僅保證父節點存在，但不一定已被插入檔案中)，
  update：所在組件的 VNode 更新時呼叫，但是可能發生在其子 VNode 更新之前，指令的值可能發生了改變，也可能沒有，但是你可以通過比較更新前后的值來忽略不必要的模板更新
  

格式

先給標簽系結一個id和title屬性，例如：

<div id="app">
	
</div>

new Vue({el:{ },data:{ }})
或 var app = new Vue({el:{ },data:{ }})

<div id="app">
	<!-- 寫法1 -->
	<p v-text="msg"></p>
	<!-- 寫法2 -->
	<p>{{msg}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
	new Vue({
		el:"#app",
		data:{
			msg:"你好 Vue"
		},
</script>

3.指令

指令的值可以是簡單的JavaScript

文本渲染指令

• {{ }}
• v-text
• v-html 渲染html檔案

屬性系結

給html標簽系結一個屬性值應該使用 v-bind:屬性名稱 = "指令值"
簡寫為 :屬性名稱 = “指令值” 例如：

<div id="app">
	<p v-bind:title="title">{{msg}}</p>
</div>
<script>
new Vue({
	el:"#app",
	// data:function() 的簡寫
	data(){
		return{
			msg:"你好！"，
			title:"Vue",
		}
</script>

條件渲染

• v-if
• v-else if
• v-else
• v-show

v-if 和 v-show區別：

串列渲染

v-for=" " 案例(右側為結果)：

事件指令

采用 v-on:事件型別=“回應函式”
例如點擊事件執行say函式 v-on:click=“say()” 簡寫為 @click=“say()”

事件修飾符

• .stop 阻止冒泡事件 向上傳遞
• .prevent 阻止默認事件
• .once 只執行一次
• 可同時寫多個，例如：@click.stop.prevent.once=“num++”

鍵盤事件

事件物件

<div id="app">
	<input type="text" v-model="num" @keyup="KeyHd($event)">
</div>
<script>
	new Vue({
		el:"#app",
		data:{
			num:1
		},
		methods:{
			// $event可改 只要下邊幾個$event一致即可
			// 點擊向上的滑鼠按鍵 input值加1
			KeyHd($event){
				console.log($event);
				if($event.key==="ArrowUp"){
					this.num++;
				}
				if($event.key==="ArrowDown"){
					this.num--;
				}
			}
		}
	})
</script>

常見的按鍵修飾符

• .up 滑鼠松開
• .down 滑鼠按下
• .delete 洗掉鍵
• .enter 回車鍵
• .space 空格鍵
• .esc esc鍵

表單系結指令

v-model 讓表單的值與資料系結在一起

<div id="app">
	<!-- 選中才能注冊 默認checkbox的值為false-->
	<input type="checkbox" v-model="sel">同意協議{{sel}}<br>
	<button :disabled="!sel">注冊</button><hr >
</div>
<script>
	new Vue({
			el:"#app",
			data:{
				sel:false,
			}
		})
	</script>

常見修飾符

• .number 轉化為數字
• .trim 移除兩端空白

4.存盤

瀏覽器提供的儲存方式常用的有三種：cookie、localStorage、sessionStorage

localStorage:

• 存 localStorage.setItem(key,value)
• 取 localStorage.getItem(key,value)
• 刪 localStorage.removeItem(key)
• 清空 clear( )

5.系結

類的系結(class)

操作元素的 class 串列和行內樣式是資料系結的一個常見需求，因為它們都是屬性，所以我們可以用 v-bind 處理它們，運算式的結果型別除了字串之外，還可以是物件或陣列，

我們可以傳給 v-bind:class 一個物件，以動態地切換 class：

v-bind:class=“類名”

<style type="text/css">
	.col{
		color: red;
	}
</style>
<div id="app">
	<!-- 點擊時洗掉col類 -->
	<h3 v-bind:class="col" @click="col=''">當屬性</h3>
</div>
<script>
	var app=new Vue({
		el:"#app",
		data:{
			col:"col",
		}
	})
</script>

物件的方式

當物件的屬性值為真，該屬性作為class系結
:class="{‘類名1’:true,‘類名2’:true}"

<style type="text/css">
	.active{
		color: #F49800;
	}
	.big{
		font-size: 24px;
	}
</style>
<div id="app">
	<button :class="{'active':true,'big':true}">A</button>
	<button :class="{'active':false}">B</button>
</div>

陣列方式

:class=" [‘類名1’,‘類名2’] "

樣式系結(style)

v-bind:style 的物件語法十分直觀——看著非常像 CSS，但其實是一個 JavaScript 物件，CSS 屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用單引號括起來) 來命名

格式：

• :style="{‘fontSize’:‘24px’,‘color’:‘pink’}"
• :style=“styleObj”
  data:{styleObj:{“fontSize”:“24px”,“color”:“plum”}}

**注意：**下個字母大寫，eg:fontSize

<div id="app">
	<!-- 方法1 -->
	<p :style="{'fontSize':'24px','color':'pink'}">我是可愛的文字</p>
	<!-- 方法2 -->
	<p :style="styleObj">我是可愛的文字</p>
	
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
	var app=new Vue({
		el:"#app",
		data:{
			styleObj:{
				"fontSize":"24px",
				"color":"plum"
			}
		}
	})
</script>

6.過濾filter

格式化資料
格式：

• {{num|fix}}
• {{num|fix(2)}}
• v-text=“num|fix”

<div id="app">
	<!-- 保留兩位小數(四舍五入) -->
	<p>{{num|fix}}</p>
	<!-- 19966668888 轉化為 199-6666-8888 -->
	<p>{{19966668888|tel}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
	
	var app=new Vue({
		el:"#app",
		filters:{
			// tel過濾名稱  value過濾前的值  arg管道的引數(保留的位數長度)
			fix(value,arg=2){
				// 轉化為有兩位小數點的數字(四舍五入)
				// return value.toFixed(2)
				return value.toFixed(arg)
			},
			tel(value,arg="-"){
				// 轉字串  轉陣列  對物件遍歷
				var arr = String(value).split('');
				var str = '';
				arr.forEach((item,index)=>{
					str+=item;
					if(index==2||index==6){
						str+=arg
					}
				})
				return str;
			}
		}
	})
</script>

7.影片

Vue 提供了內置的過渡封裝組件，該組件用于包裹要實作過渡效果的組件，影片即兩個狀態間的過度效果或變化，需要內置組件包裹，自動在顯示和隱藏兩個狀態添加類名，真正要實作影片還要自己寫css，

內置組件

transition

name名稱
mode: 模式 in-out 先進再出； out-in 先出再進
指定進入類名 enter-active-class=“slideLeft animated”
指定離開類名 leave-active-class=“slideLeft animated”

transition-group

影片類

v-enter-active 進入程序

v-enter 進入前； v-enter-to 進入后

v-leave-active 離開程序

v-leave 離開前； v-leave-to 離開后

影片的實作

方法1： 創建6個css類

<style>
	.fade-enter-active{
		transition: all 1s ease;
	}
	/* 進入前 */
	.fade-enter{
		opacity: 0;
	}
	/* 進入后 */
	.fade-enter-to{
		opacity: 1;
	}
	/* 元素離開程序 */
	.fade-leave-active{
		transition: all 1s ease;
	}
	.fade-leave{
		opacity: 1;
	}
	.fade-leave-to{
		opacity: 0;
	}
</style>
<div id="app">
	<p>
		<transition name="fade">
			<img src="touxiang.png" width="200px" v-if="flag">
		</transition>
	</p>
</div>
<script>
	var app=new Vue({
		el:"#app",
		data:{
			flag:true,
		}
		
	})
</script>

方法2： 通過關鍵幀影片實作 @keyframes

<style>
	@keyframes fadeIn{
	from{opacity: 0;transform: rotate(-180deg);}
		to{opacity: 1;transform: rotate(0deg);}
	}
	@keyframes fadeOut{
		0%{opacity: 1;transform: rotate(0deg);}
		100%{opacity: 0;transform: rotate(180deg);}
	}
	.fade-enter-active{
		animation: fadeIn 1s ease;
	}
	.fade-leave-active{
		animation: fadeOut 1s ease;
	}
</style>

方法3： 第三方影片庫，引入animate.css

<link rel="stylesheet" type="text/css" href="animate.css"/>
<div id="app">
	<button @click="flag=!flag">切換</button>
	<p>
		<transition name="fade" enter-active-class="bounceInRight animated" leave-active-class="hinge animated">
			<img src="touxiang.png" width="200px" v-if="flag">
		</transition>
	</p>
</div>

8.組件

1.全域組件

Vue.component(“btn”,{template:``})

2.區域組件 ``內有且僅有一個根節點

const steper={template:``},data(){return {n:1}}

3.注冊組件

new Vue({components:{steper}})

4.使用組件

body中輸入steper標簽

全域組件

一段可以重復利用的代碼塊
注意： data的寫法是函式的樣式

<div id="app">
	<btn></btn>
	<btn></btn>
</div>
<script>
	// 定義一個全域的組件，名稱是btn(哪個vue實體都可使用)
	Vue.component("btn",{
		// 定義組件的模板
		template:`<button @click="num++">{{num}}</button>`,
		// 定義組件的data資料
		data(){return {num:1}}
	})
	var vm = new Vue({
		el:"#app",
		data:{n:100}
	})
</script>

區域組件

<div id="app">
	<steper></steper>
	<steper></steper>
</div>
<script>
	// 定義一個區域的組件	組件有且僅有一個根節點
	const steper = {
		template:`
		<span>
			<button @click="n>0?n--:1">-</button>
			<input type="text" v-model.number="n" />
			<button @click="n<10?n++:10">+</button>
		</span>
		`,
		data(){return {n:1}}
	}
	new Vue({
		// 注冊組件
		components:{steper},
		el:"#app",
	})
</script>