1為什麼要寫這樣的文章呢？

很多框架的語法大同小異，沒有必要將時間浪費在那些共同點上，我覺得只要將某個框架中特殊之處掌握，然後馬上通過專案實踐即可，再從專案中去學習那些常用的語法。以下是我覺得重要的知識點。

2.概述知識點

（1）.v-show與v-if的區別:v-show的隱藏是將css樣式中display設定為none;而v-if的隱藏是將DOM元素刪除;如果在需要頻繁切換顯示那麼最好使用v-show;

（2）.關於事件處理的，Vue.js採用v-on:[事件名稱]="[函式名稱]"，比如

繫結點選事件，然後在js執行語句

<a v-on:click="clickEvent">點選事件</a>
 

methods：{
    clickEvent:function(){    //程式碼執行
    }
}

當然也可以採用縮寫的形式

<a @click="clickEvent">點選事件</a>

以前在js中執行阻止預設事件是

submiteds:function(e){
	e.preventDefault();
}

在Vue.js中可以這麼寫

<form action="處理使用者輸入.html" v-on:submit.prevent>

通過繫結submit事件並且執行阻止事件

由點開頭的指令字尾來表示的形式就是 事件修飾符，相關的內容大家可以去Vue官方文件檢視。

（3）.我覺得這一點很重要，關於Vue.js 樣式繫結

有兩種方法可以實現：

1.繫結HTML CLASS（1.物件方法；2.陣列方法）

2.繫結內聯樣式（1.物件方法；2.陣列方法；3.自動新增字首）

繫結HTML CLASS（1.物件方法）

<style type="text/css">
  .redColor{color:red;}
  .blueColor{color: blue;}
</style>

<div id="app">
  <p v-bind:class="{'redColor':firstColor,'blueColor':secColor}">amazing</p>  //通過布林值來載入class
  <p v-bind:class="colorObj">amazing</p>  //繫結到一個物件
</div>
 

var vm = new Vue({
   el:'#app',
   data:{
	firstColor:true,
	secColor:false,
	colorObj:{
		redColor:false,
		blueColor:true
		}
	}
})

繫結HTML CLASS（2.陣列方法）

繼續上面的例子

<div id="app">
	<p v-bind:class="[classFirst,classSec]">amazing</p>
	<p v-bind:class="[classFirst,special?'':classSec]">wonderful</p>   //使用三元字元
</div>

var vm = new Vue({
	el:'#app',
	data:{
		classFirst:'redColor',  //直接指定class名稱
		classSec:'blueColor',
		special:true
	     }
})

繫結內聯樣式（1.物件方法)

通過這種方法比較直觀，推薦使用

<div id="app">
     <p v-bind:style="{fontWeight:weight,fontSize:size+'px'}">amazing</p> //直接寫css樣式
     <p v-bind:style="specialObj">amazing</p>  //使用物件
</div>

var vm = new Vue({
	el:'#app',
	data:{
		weight:600,
		size:20,
		specialObj:{
			fontSize:'40px',
			color:'blue'
		           }
	     }
})

繫結內聯樣式（2.陣列方法)，類似於繫結HTML CLASS，這裡就不說明了

繫結內聯樣式（3.自動新增字首)

<div id="app">
	<p v-bind:style="[firstObj,secObj]">amazing</p>
	<p v-bind:style="todayObj">fuckdasfasdsssssssssssssssssssssssssssssssssssssssssssssss</p>
</div>

var vm = new Vue({
	el:'#app',
	data:{
		firstObj:{
			color:'blue',
			fontWeight:'800'
			},
		secObj:{
			fontSize:'18px'
			},
		todayObj:{
			fontSize:'20px',
			transform:'rotate(-20deg)'
			}
		}
	})

自動新增字首意思是Vue.js會自動幫你新增一些相容瀏覽器的字首，比如transform 

-ms-transform:rotate(7deg); 	/* IE 9 */
-moz-transform:rotate(7deg); 	/* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg);

（4）.元件

通過template標籤去註冊一個自定義的標籤

直接上例子吧

<div id="app">
	<counter heading="like" colored="green"></counter>
	<counter heading="dislike" colored="red"></counter>
</div>
<template id="count_template">
	<button style="background:{{colored}}" @click="count++">{{heading}}{{count}}</button> //注意的是如果多個元素，需要新增一個元素將多個元素作為父元素
</template>

Vue.component('counter',{//通過Vue.component()註冊一個自定義的標籤
		// 父元件的資料需要通過 props 把資料傳給子元件
		props:['heading','colored'],
		// template:'<h1>hello world</h1>'  也可以直接寫字串
		template:'#count_template',
		data:function(){
			return {
				count:0
			};
		}
	})
new Vue({
	el:'#app'
})