vuejs介紹
Vue.js是當下很火的一個JavaScript MVVM庫，它是以數據驅動和組件化的思想構建的。相比於Angular.js，Vue.js提供了更加簡潔、更易於理解的API，使得我們能夠快速地上手並使用Vue.js。
如果你之前已經習慣了用jQuery操作DOM，學習Vue.js時請先拋開手動操作DOM的思維，因為Vue.js是數據驅動的，你無需手動操作DOM。它通過一些特殊的HTML語法，將DOM和數據綁定起來。一旦你創建了綁定，DOM將和數據保持同步，每當變更了數據，DOM也會相應地更新。
當然了，在使用Vue.js時，你也可以結合其他庫一起使用，比如jQuery。
mvvm模式
ViewModel是Vue.js的核心，它是一個Vue實例。Vue實例是作用於某一個HTML元素上的，這個元素可以是HTML的body元素，也可以是指定了id的某個元素。
當創建了ViewModel后，雙向綁定是如何達成的呢？
首先，我們將上圖中的DOM Listeners和Data Bindings看作兩個工具，它們是實現雙向綁定的關鍵。
從View側看，ViewModel中的DOM Listeners工具會幫我們監測頁面上DOM元素的變化，如果有變化，則更改Model中的數據；
從Model側看，當我們更新Model中的數據時，Data Bindings工具會幫我們更新頁面中的DOM元素。
helloworld示例
<!--這是我們的View-->
<div id="app">
{{ message }}
</div>
// 這是我們的Model
var exampleData = {
message: 'Hello World!'
}
// 創建一個 Vue 實例或 "ViewModel"
// 它連接 View 與 Model
new Vue({
el: '#app',
data: exampleData
})
使用Vue的過程就是定義MVVM各個組成部分的過程的過程。
定義View
定義Model
創建一個View實例或"ViewModel"，它用於連接View和Model
在創建Vue實例時，需要傳入一個選項對象，選項對象可以包含數據、掛載元素、方法、模生命周期鈎子等等。
在這個示例中，選項對象的el屬性指向View，el: '#app'表示該Vue實例將掛載到
<div id="app">...</div>這個元素；data屬性指向Model，data: exampleData表示我們的Model是exampleData對象。
Vue.js有多種數據綁定的語法，最基礎的形式是文本插值，使用一對大括號語法，在運行時{{ message }}會被數據對象的message屬性替換，所以頁面上會輸出"Hello World!"。
雙向綁定
MVVM模式本身是實現了雙向綁定的，在Vue.js中可以使用v-model指令在表單元素上創建雙向數據綁定。
<!--這是我們的View-->
<div id="app">
<p>{{ message }}</p>
<input type="text" v-model="message"/>
</div>
將message綁定到文本框，當更改文本框的值時，<p>{{ message }}</p> 中的內容也會被更新。
反過來，如果改變message的值，文本框的值也會被更新
vuejs常用指令
什么是指令呢？上面我們用到的v-model就是一個指令
Vue.js的指令是以v-開頭的，它們作用於HTML元素，指令提供了一些特殊的特性，將指令綁定在元素上時，指令會為綁定的目標元素添加一些特殊的行為，我們可以將指令看作特殊的HTML特性（attribute）。
Vue.js提供了一些常用的內置指令，接下來我們將介紹以下幾個內置指令：
- v-if指令
- v-show指令
- v-else指令
- v-for指令
- v-bind指令
- v-on指令
v-if指令
v-if是條件渲染指令，它根據表達式的真假來刪除和插入元素
基本語法：
v-if="expression"
expression是一個返回布爾值的表達式，表達式可以是一個布爾屬性，也可以是一個返回布爾的運算式。
<div id="app">
<div v-if="isMale">男士</div>
<div v-if="age>=20">age:{{age}}</div>
</div>
var vm = new Vue({
el: '#app',
data: {
age:25,
isMale:true,
}
})
v-show指令
v-show和v-if區別。
v-show不管條件是否成立，都會渲染html,而v-if只有條件成立才會渲染
先看兩個截圖，第一個是當isMale為true時，第二張圖是isMale為false條件不成立時，可以看到v-if的html並沒有渲染出來，
而使用v-show的div僅僅是更改了它的樣式display: none;
<div id="app">
<div v-if="isMale">男士v-if</div>
<div v-show="isMale">男士v-show</div>
</div>
var vm = new Vue({
el: '#app',
data: {
isMale:false
}
})
v-else指令
v-else指令與v-if或者v-show同時使用，v-if條件不成立則會顯示v-else內容
<div id="app">
<div v-if="isMale">男士</div>
<div v-else>女士</div>
</div>
var vm = new Vue({
el: '#app',
data: {
isMale:true
}
})
v-for指令
v-for指令基於一個數組渲染一個列表，它和JavaScript的遍歷語法相似
v-for="item in list"
list是一個數組，item是當前遍歷的數組元素
v-for="(item,index) in list"其中index是當前循環的索引，下標從0開始
<div id="app">
<table>
<tr class="thead">
<td>序號</td>
<td>姓名</td>
<td>年齡</td>
</tr>
<tr v-for="(item,index) in list">
<td v-text="index+1"></td>
<td v-text="item.name"></td>
<td v-text="item.age"></td>
</tr>
</table>
</div>
var vm = new Vue({
el: '#app',
data: {
list:[{
name:'章三',
age:18
},{
name:'李四',
age:23
}]
}
})
v-bind指令
v-bind動態地綁定一個或多個特性，可以在其名稱后面帶一個參數，中間放一個冒號隔開，這個參數通常是HTML元素的特性（attribute），如v-bind: class
class可以和v-bind:class同時存在 ，也就是說有class了，再添加v-bind:class並不會覆蓋原來的樣式類，而是在原來基礎上添加新的類名
<div id="app">
<img v-bind:src="img" class="logo"
v-bind:class="isLogo?'':'product'"
v-bind:style="{'border':hasBorder?'2px solid red':''}"></img>
</div>
var vm = new Vue({
el: '#app',
data: {
img:'https://www.baidu.com/img/bd_logo1.png',
isLogo:false,
hasBorder:true
}
})
以上v-bind:src也可簡寫成:src,修改上面代碼
<div id="app">
<img :src="img" class="logo"
:class="isLogo?'':'product'"
:style="{'border':hasBorder?'2px solid red':''}"></img>
</div>
v-on指令
v-on用於監聽DOM事件,用法和v-bind類似，例如給button添加點擊事件
<button v-on:click="show">
同樣，和v-bind一樣，v-on也可以使用簡寫，用@符號代替，修改代碼：
<button @click="show">
我們來看個例子：
以下是一個點擊隱藏和顯示p文本段落的代碼
<div id="app">
<p v-show="isShow">微風輕輕的吹來，帶來了一絲絲涼意</p>
<div>
<button type="button" v-on:click="show(1)">顯示</button>
<button type="button" v-on:click="show(0)">隱藏</button>
</div>
</div>
var vm = new Vue({
el: '#app',
data: {
isShow:true
},
methods:{
show:function(type){
if(type){
this.isShow = true;
}else{
this.isShow = false;
}
}
}
})
綜合示例
<div id="app">
<div class="title">添加新用戶</div>
<div class="form">
姓名：<input type="text" v-model="person.name"><br/>
年齡：<input type="text" v-model="person.age"><br/>
<button class="btn" type="button" @click="add">添加</button>
</div>
<table>
<tr class="thead">
<td>序號</td>
<td>姓名</td>
<td>年齡</td>
<td>操作</td>
</tr>
<tr v-for="(item,index) in list">
<td v-text="index+1"></td>
<td v-text="item.name"></td>
<td v-text="item.age"></td>
<td>
<a href="javascript:;" @click="deleteItem(index)">刪除</a>
<a v-if="item.age>=25" href="javascript:;" @click="marry(index)">可以結婚了</a>
</td>
</tr>
</table>
</div>
new Vue({
el: '#app',
data: {
person:{
name:'',
age:'',
},
list:[{
name:'章三',
age:18
},{
name:'李四',
age:23
}]
},
methods:{
add:function(){
this.list.push(this.person);
this.person = {name:'',age:''};
},
deleteItem:function(index){
// 刪除一個數組元素
this.list.splice(index,1);
},
marry:function(){
alert("不好意思，你沒有女朋友結不了婚");
}
},
created:function(){
}
})
vue組件
組件 (Component) 是 Vue.js 最強大的功能之一，使用組件化方式開發，可以封裝可重用的代碼，減少重復勞動
接下來，我們來注冊一個組件
語法Vue.component(tagName, options)
注冊組件
Vue.component('component-a', {
template: '<div>component-a</div>'
})
component-a是注冊的組件標簽，下面就可以使用這個組件了
<div id="app">
<component-a></component-a>
</div>
// 創建根實例
new Vue({
el: '#app'
})
最后，渲染為：
<div id="app">
<div>component-a!</div>
</div>
通過Vue.component方式注冊的組件是一個全局組件 ，我們還可以創建局部組件，通過某個 Vue 實例/組件的實例選項 components 注冊僅在其作用域中可用的組件
var Child = {
template: '<div>A custom component!</div>'
}
var vm = new Vue({
el: '#app',
components:{
'component-a':Child
}
})
局部注冊的組件
組件通信
組件 A 在它的模板中使用了組件 B，它們之間必然需要相互通信，父組件可能要給子組件下發數據，子組件則可能要將它內部發生的事情告知父組件
我們先來看一張圖
從圖上可以很清晰的看到，父子組件通信主要是使用prop和自定義事件，父組件通過 prop 給子組件下發數據，子組件通過事件給父組件發送消息。
父子組件的關系可以總結為 prop 向下傳遞，事件向上傳遞。
來看個示例：
<div id="app">
<div>
接收到的子組件回復消息：{{replyMsg}}
</div>
<component-a v-bind:msg="msg" @reply="replay"></component-a>
</div>
<template id="componentA">
<div>
<div>我是組件a，接收到父類的消息是：{{msgfilter}}</div>
<div @click="reply">回復</div>
</div>
</template>
Vue.component('component-a', {
template: '#componentA',
props:['msg'],
data:function(){
return{
msgfilter:'處理后的消息-》'+this.msg
}
},
methods:{
reply:function(){
this.$emit('reply','子組件消息')
}
}
})
var vm = new Vue({
el: '#app',
data:{
msg:'父組件消息',
replyMsg:''
},
methods:{
replay:function(msg){
this.replyMsg = msg
}
}
})
需要注意的是，組件里面的data必須是一個函數，通過return形式返回
1.父組件下發數據到子組件
在組件中通過v-bind添加一個參數將數據傳遞到子組件里，然后使用props接收傳遞過來的參數props:['msg']
<component-a v-bind:msg="msg"></component-a>
渲染結果：
2.子組件通過事件給父組件發送消息
子組件通過$emit觸發事件
this.$emit('reply','子組件消息')
在組件標簽中通過v-on進行監聽
<component-a v-bind:msg="msg" @reply="replay"></component-a>
監聽到事件后觸發reply函數，接收到子組件發送的消息
replay:function(msg){
this.replyMsg = msg
}
渲染結果：
<div id="app">
<div>
接收到的子組件回復消息：子組件消息
</div>
<div>
<div>我是組件a，接收到父類的消息是：處理后的消息-》父組件消息</div>
<div>回復</div>
</div>
</div>
以上可以看到我們是通過字符串數組來定義prop的，除此之外我們還可以用對象的形式來定義prop，用來為組件的 prop 指定驗證規則，
type的值可以是這些：String Number Boolean Function Object Array Symbol,例如：
props: {
name: String,
showDialog: {
type: Boolean,
default: false
}
}
實現一個dialog對話框組件
<div id="app" class="main">
<div v-text="isLogin?'注銷':'登錄'" @click="login">登錄</div>
<div class="amount"><input type="tel" name="" v-model="amount"></div>
<div class="btn_submit" @click="submit">確定</div>
<v-dialog :show-dialog="showDialog" :msg="msg" :type="type" @close-dialog="closeDialog"></v-dialog>
</div>
<template id="dialog">
<div class="dialog" v-if="showDialog">
<div class="dialog_mask"></div>
<div class="dialog_container">
<div class="dialog_content">
<div class="dialog_content_top" v-text="msg">提示內容</div>
<div class="dialog_btn">
<a v-if="type==1" href="javascript:;" class="btn" @click="close">確定</a>
<a v-if="type==2" href="javascript:;" class="btn" @click="close">取消</a>
<a v-if="type==2" href="javascript:;" class="btn" @click="login">去登錄</a>
</div>
</div>
</div>
</div>
</template>
Vue.component('v-dialog', {
template: '#dialog',
// props:['msg','type','showDialog'],
props:{
msg:String,
type:Number,
showDialog:{
type: Boolean,
default: false
}
},
data:function(){
return {
}
},
methods:{
close:function(){
// 觸發父類關閉窗口事件
this.$emit('close-dialog');
},
login:function(){
console.log("登錄跳轉中...");
this.$emit('close-dialog');
}
}
})
// vue實例
var vm = new Vue({
el: '#app',
data: {
amount:'',
msg:'',
showDialog:false,
type:1,// 提示類型 1單按鈕提示框 2雙按鈕提示框
isLogin:true
},
methods:{
login:function(){
this.isLogin = !this.isLogin;
},
submit:function(){
//彈出對話框組件
if(!this.isLogin){//未登錄
this.msg = "請先去登錄再領取金額";
this.showDialog = !this.showDialog;
this.type = 2;
return;
}
if(this.amount){
if(this.amount<1 || this.amount>1000){
this.msg = "輸入金額不能低於1元大於1000";
this.showDialog = !this.showDialog;
this.type = 1;
}else{
this.msg = "領取成功，請在賬戶中心查看";
this.showDialog = !this.showDialog;
this.type = 1;
}
}else{
this.msg = "領取金額不能為空";
this.showDialog = !this.showDialog;
this.type = 1;
}
},
closeDialog:function(){//關閉對話框
this.showDialog = false;
}
}
})
總結
以上簡單介紹了vuejs的MVVM模型和它的雙向綁定機制，然后以一個helloworld示例開始了vuejs的使用，
之后又了解和熟悉了幾個比較常用的vue指令，綜合以上，構建了一個簡單的示例,最后講了vue中組件的一些
用法，父子組件是如何進行通信的，結合組件用法，實現了一個對話框組件。
作者：fozero
聲明：原創文章，轉載請注明出處，謝謝！http://www.cnblogs.com/fozero/p/8563939.html
標簽：vuejs