首先，在頁面中我們要引入Vue腳本。
　　我們通過new Vue( )來初始化一個Vue實例，需要傳入一個對象，其中對象的el 屬性用來指定掛載的元素，data屬性用來初始化數據。

        new Vue({//初始化 Vue 實例
            el : "#box",//指定掛載元素
            data : {//初始化數據
                msg : "Hello Vue !"             
            }
        })

在頁面渲染依然使用雙花括號。

1、綁定

我們可以定義一個變量vm 來接收這個實例，這樣data上的數據都會掛載到vm上。所以我們在調用data里的數據的時候直接使用 vm.msg，而不是vm.data.msg。
在Vue中給元素綁定屬性的時候，要使用v-bind:attr 的形式。它的簡寫形式為:attr；綁定多個class值的時候我們可以使用使用數組、對象、甚至三木運算符。

綁定屬性之后，在屬性里寫data里的數據時，直接寫入data里的數據名，不用寫花括號即可
JS代碼

        var vm = new Vue({  
            el : "#box",
            data : {
                msg : "",//務必在 data 中初始化要使用的數據，否則會拋出警告
                a : "testId",
                isA : true,
                isB : true,
                first : "a",
                second : "c",
                isShow : true,
                third : "d",
                styleObject : {
                    fontSize : "30px",
                    color : "red"
                },
                styleObj : {
                    textDecoration: "underline"
                }
            }
        }); 

HTML代碼

        <div id="box">
            {{3}}
            <span v-bind:title="msg" v-bind:style="styleObject" v-bind:id="a" v-bind:diy="msg">鼠標停一下</span>
            <!-- :attr 是 v-bind:attr 的簡寫形式 -->
            <span :style="styleObject">第二個</span>
            <!--綁定class可以用對象和數組的形式-->
            <div :class="{ a : isA,b : isB }" class="c">
                內容
            </div>
            <div :class="[first,second]">
                內容二
            </div>
            <div :class="[first,isShow ? '' : third]">
                內容三
            </div>
            <div :style="[styleObject,styleObj]">
                內容四
            </div>
            <div :class="{a : isA}" class="b">
                內容五
            </div>
        </div>

其中，若我們在vm 中沒有傳入el 這個屬性時，也可以在對象下指定要掛載的元素。

vm.$mount("#box");

2、條件

Vue中我們可以使用v-if，v-else用來判斷顯示或隱藏哪個標簽，其中Vue2.1版本還新增了v-else-if。

注：v-if 和 angular中 ng-if 一樣，元素消失時會直接從DOM中刪除；而v-show 和 ng-show 一樣，元素消失時，就相當于display : none;元素隱藏掉了
JS代碼

var vm = new Vue({
            el : "#box",
            data : {
                isShow : false
            }
        })

HTML代碼

        <div id="box">
            <!--v-if  和 ng-if 一樣，消失時直接把元素刪除-->
            <span v-if="isShow">加油</span>
            <!--<span v-else-if="">2.1版本新增</span>-->
            <!--v-else不需要有值-->
            <p v-else>看不到我</p>
            
            <!--v-show---display:none;和angular是一樣的-->
            <span v-show="isShow">v-show</span>
        </div>

3、遍歷數組和對象

在Vue中，通過v-for來遍歷。其中遍歷對象時，一個參數時會直接將屬性值解析出來；需要解析屬性時需要傳兩個參數，下標時傳三個參數。具體看下面代碼：
JS代碼

        var vm = new Vue({
            el : "#box",
            data : {
                arr : ["a","b","c"],
                num : 5,
                obj : {
                    name : "liu",
                    address : "北京",
                    age : 20
                },
                arr2 : [1,2,2,3]
            }
        })

HTML代碼

<div id="box">
            <!--ng-repeat   ng-for-->
            <ul>
                <li v-for="a in arr">{{ a }}</li>
            </ul>
            <ul>
                <li v-for="(val,index) in arr">{{index +"-"+ val }}</li>
            </ul>
            
            <ul>
                <li v-for="x in obj"> {{ x }}</li>
            </ul>
            <ul>
                <li v-for="(val,key) in obj">{{ key +"-"+ val }}</li>
            </ul>
            <ul>
                <li v-for="(val,key,index) in obj">{{ index +"-"+ key +"-"+ val }}</li>
            </ul>
            <ul>
                <!--整數遍歷-->
                <li v-for="i in num">{{ i }}</li>
            </ul>
            <ul>            
                <li v-for="a in arr2"> {{ a }}</li>
            </ul>
        </div>

4、事件

Vue中添加事件的方法為v-on:eventName，簡寫的形式為@event。它有一個默認的參數event。下面是具體代碼和注釋：
JS代碼

new Vue({
            el : "#box",
            data : {
                msg : "hello vue",
                isShow : true,
                firstName : "劉",
                lastName : "禹錫"
            },
            //創建方法
            methods : {
                changeEvent : function (e,a,b) {
                    //this指向new Vue()創建的實例,而data下的數據會直接掛載到這個實例上
                    this.isShow = !this.isShow;
                    console.log(e,a,b);
                },
                foo : function () {
                    return Math.random();
                },
                fullName : function () {
                    return this.firstName + this.lastName;
                },
                p1 : function () {
                    console.log("點擊了div");
                },
                input : function () {
                    console.log(this.firstName);
                }
            }
        })

HTML代碼

<div id="box">
            <button v-on:click="isShow = !isShow">點擊</button>
            <button v-on:click="changeEvent">點擊2</button>
            <!--@eventName 為  v-on:eventName 簡寫形式
                $event是默認的參數，如果在事件處理程序中想同時使用事件對象，
                和其余的參數，需要顯式的傳入$event
            -->
            <button @click="changeEvent($event,'a','b')">點擊3</button>
            <h1 v-show="isShow">{{ msg }}</h1>  
            {{ foo() }}
            {{ fullName() }}
            <div v-on:click="p1">
                這是DIV
                <!--
                    修飾符: v-on:eventName.modifier
                    stop : 阻值冒泡
                -->
                <button @click.stop="changeEvent">點擊4</button>
                <input type="text" v-model="firstName" @keydown.left.right.up.down="input"/>
                {{ firstName }}
            </div>
        </div>

觸發自定義事件：this.$emit("事件名",參數);。值得注意的是，有參數時在添加事件出不需要一個括號來接收這個參數。

5、表單與數據的雙向綁定

使用的是v-model，其中我們可以給checkbox和一個數組綁定來實現添加或刪除的操作。以及設置checkbox為true和false時的值。具體代碼如下：
JS代碼

new Vue({
            el : "#box",
            data : {
                c1 : true,              
                c2 :["tom"],
                c3 : "",
                a : "真",
                b : "假",
                msg : "Hello Vue !" ,
            }
        })

HTML代碼

<div id="box">
            <!--v-model 將表單項與數據實現雙向綁定-->
            <input type="text" v-model="msg" />
            <h1>{{ msg }}</h1>
            <input type="checkbox" v-model="c1" />{{ c1 }}
            <br />
            
            <input type="checkbox" v-model="c2" value="a"/>
            <input type="checkbox" v-model="c2" value="b"/>
            <input type="checkbox" v-model="c2" value="c"/>
            {{ c2 }}
            
            <br />  
            <!--分別指定 true 和 false 時的值-->
            <!--<input type="checkbox" v-model="c3" true-value="a" false-value="b" />-->
            <input type="checkbox" v-model="c3" :true-value="a" :false-value="b" />
            <input type="checkbox" v-model="c3" :true-value="a" :false-value="b" />
            {{ c3 }}
        </div>

6、計算屬性

在Vue中，我們執行一些計算操作的時候，可以將其定義在computed屬性中。代碼：
JS代碼

var vm = new Vue({
            el : "#box",
            data : {
                msg : "Hello Vue !",
                firstName : "孟",
                lastName : "浩然",
                str : "<h1>htmlStr</h1>"
                //fullName : ""
            },          
            computed : {
                fullName : function () {
                    return this.firstName + this.lastName + new Date().getTime();
                }
            },
            methods : {
                clickEvent : function () {
                    console.log(this.fullName)
                }
//              computedFullName : function () {
//                  return this.firstName + this.lastName;
//              }
            }
        })

HTML代碼

<div id="box">
            <!--{{ firstName + lastName }}
            {{ computedFullName() }}-->
            <!--{{ fullName }}-->
            
            {{ fullName }}
            <button @click="clickEvent">點擊</button>
            {{ str }}
            <!--在vue1.0版本中是用 {{{ str }}}來輸出的-->
            <div v-html="str"></div>
        </div>

7、組件

一個組件的完成需要兩步，第一步就是使用Vue.extend( )方法來創建一個全局的組件，并且以一個組件名來接收它；第二步，使用Vue.componet（上面接收的組件名，組件對象）來全局注冊一個組件，注冊完成后，就可以在整個應用中去使用這個組件了。

var myComponent = Vue.extend({
            template : "<h1>第一個Vue組件</h1>"
        });
 
Vue.component("my-component",myComponent);

以上兩步可以簡寫為一步：

Vue.component("my-component2",{
            template : "<h1>第二個組件</h1>"
        });

這樣，第二個傳入的參數就會由Vue自己去調用extend( )方法去創建這個對象，而不用我們自己手動去調用。

使用方式就是直接在HTML里添加組件名的標簽即可。<my-component></my-component>

7.1、父子間的傳值

在Vue中，組件的作用域默認是隔離的，所以如果想要在子組件中訪問到父級的數據，則需要父級顯式的向下傳遞。具體代碼如下：
JS代碼

var vm = new Vue({
            el : "#box",
            data : {
                msg : "這是父級的 msg",
                age : 30,
                isShow : true
            },
            //配置子組件
            components : {
                "my-component3" : {
                    template : "<h1>第三個組件</h1>"
                },
                "my-component4" : myComponent4
            }
        });
var myComponent4 = Vue.extend({
            template : "<h1>第四個組件---{{ msg }}--{{a}}--{{i}}</h1>",
            //props : ["msg","a","i"]
            props : {
                //msg : String,
                msg : null,//不限制
                //a : Number,
//              a : {
//                  type : Number,
//                  required : true//必須傳入
//              },
                a : {
                    validator : function (val) {
                        return val > 10;
                    }
                },
                i : Boolean
            }
        });

HTML代碼

<my-component3></my-component3>
            <!--冒號為v-bind的簡寫形式-->
            <my-component4 :msg="msg" :a="age" :i="isShow"></my-component4>

這樣，就實現了在子級訪問父級的信息。

7.2、在組件中聲明數據和獲取DOM元素

在組件中聲明數據時，可能會出現多處引用的情況，可是如果當我們聲明的數據類型為引用數據類型時，修改一處的值就會導致所有引用該數據的值全部發生變化的情況。所以，我們需要聲明的數據時通過函數來返回一個對象來確保每個組件用的data數據都是一塊全新的內容地址，數據間就可以互不影響，不會再出現牽一發而動全身的現象。

而獲取DOM元素時，需要給元素添加ref="name"屬性來進行標識，在JS中，通過this.$refs.name來得到那個DOM元素。具體代碼如下：
JS代碼

var vm = new Vue({
            el : "#box",
            data : {
                msg : "Hello Vue !!"
            },
            components : {
                "my-component" : {
                    template : `<div>
                    <h1 @click="say">子組件</h1>
                    <button @click="num++">{{ num }}</button>
                    <input type="text" value="123" ref="mi"/>
                    </div>`,
                    //為了解決地址傳遞的問題(引入數據類型)，在組件的聲明 data 必須為函數
                    //且返回一個新對象，這樣每個組件用到的 data 是一快新的內容地址
                    //這樣各個組件間可以互不影響
                    data : function () {
                        return {
                            num : 0
                        }
                    },
                    methods : {
                        say : function () {
                            //如果需要獲取DOM元素，可給元素添加ref="name"屬性來進行標識
                            //在當前組件中通過this.$refs.name 得到那個DOM元素
                            this.$refs.mi.focus();
                            console.log("hello",this.num);
                        }
                    }
//                  data : function () {
//                      return d;
//                  }
                }
            }
        });

HTML代碼

<div id="box">
            <my-component></my-component>
            <my-component></my-component>
            <my-component></my-component>
        </div>

7.3、父子級組件間信息的傳遞

通過@屬性名給父級添加事件，然后在子級中通過$emit( 屬性名)來觸發該事件來傳遞信息。具體代碼：
JS代碼

var vm = new Vue({
            el : "#box",
            data : {
                msg : "Hello Vue !!",
                num : 0
            },
            components : {
                "my-component" : {
                    template : `<div>
                    <h1>子組件</h1>
                    <button @click="cfun">給父級消息</button>
                    </div>`,
                    
                    data : function () {
                        return {
                            num : 0
                        }
                    },
                    methods : {
                        cfun : function () {
                            console.log("子準備呼叫");
                            //$emit("pfun")-->觸發pfun
                            this.$emit("pfun",1000);
                        }
                    }
                }
            },
            methods : {
                fun : function (money) {
                    console.log("收到來自子級的消息",money);
                    this.num = money;
                }
            }
        });

HTML代碼

<div id="box">
            {{ num }}
            <my-component @pfun="fun"></my-component>           
        </div>

7.4、聲明動態組件，各個組件之間實現跳轉

各個組件之間的跳轉是通過綁定is屬性來決定渲染哪個子組件的，改變is綁定的值來實現組件間的切換。而組件之間的跳轉會讓頁面重新渲染，我們有時不想讓頁面重新渲染就需要用keep-alive標簽將component標簽包裹起來。
JS代碼

var vm = new Vue({
            el : "#box",
            data : {
                currentView : "home"
            },
            components : {
                home : {
                    template : `<h1>這是主頁--{{ d }}</h1>`,
                    data : function () {
                        return {
                            d : new Date().getTime()
                        }
                    }
                },
                cart : {
                    template : `<h1>購物車</h1>`
                },
                mine : {
                    template : `<h1>個人中心</h1>`
                }
            }
        });

HTML代碼

<div id="box">
            <button @click="currentView='home'">首頁</button>
            <button @click="currentView='cart'">購物車</button>
            <button @click="currentView='mine'">個人中心</button>
            <hr />          
            <keep-alive>
                <component :is="currentView"></component>
            </keep-alive>           
        </div>

注：在Vue1.0的版本中，keep-alive則需要作為一個屬性添加到標簽上

7.5、組件名作為標簽渲染時，會忽略標簽內所有內容的解決方法

頁面渲染時，會直接忽略掉組件標簽內的所有內容，如果需要在組件里渲染子組件時，就需要給子標簽的template中添加一個slot標簽來聲明要預留一個位置，然后頁面渲染時會將所有內容方法這個槽位中。
然而，有時我們多個子組件需要放到對應的位置上去。這時，就需要給slot標簽添加一個name屬性并賦值，在子組件的標簽中添加slot屬性等于該name值就可以實現我們想要的效果。直觀的代碼：
JS代碼

        var vm = new Vue({
            el : "#box",
            data : {
                
            },
            components : {
                "my-header" : {
                    template : `<h1>這是header</h1>`                  
                },
                "my-footer" : {
                    template : `<h1>這是footer</h1>`
                },
                "my-main" : {
                    template : `
                    <div>
                        <slot name="h"></slot>
                        <h1>這是主頁</h1>
                        <slot></slot>
                        <slot name="f"></slot>
                    </div>
                    `
                }
            }
        });

HTML代碼

<div id="box">      
            <my-main>
                <my-header slot="h"></my-header>
                <my-footer slot="f"></my-footer>
                <p>原始內容，無插槽</p>
            </my-main>
        </div>

8、過濾器

Vue中的過濾器和AngularJS中的過濾器大同小異。都是通過數據+豎杠+過濾器（需要的參數）的形式來添加的。具體代碼如下：
JS代碼

    var vm = new Vue({
            el : "#box",
            data : {
                msg : "Hello Vue !!"
            },
            filters : {
                filterA : function (val) {
                    console.log(val);
                    return val.split("").reverse().join("");
                },
                filterB : function (val) {
                    console.log(val);
                    return val.split("").reverse().join("");
                },
                //傳入參數時，注意讓過第一個默認參數，為默認的使用過濾器的值(即msg的值)
                filterC : function (val,arg1,arg2) {
                    console.log(val,arg1,arg2);
                    return val;
                }
            }
        })

HTML代碼

<div id="box">
            {{ msg | filterA | filterB | filterC("a","b") }}
        </div>

9、自定義指令

我們可以在Vue實例中添加directive屬性來添加自定義屬性。其中有綁定成功bind階段、綁定的元素插入到父元素成功時觸發的inserted階段、以及有數據更新變化時，觸發的update階段。上代碼：
JS代碼

var vm = new Vue({
            el : "#box",
            data : {
                msg : "Hello Vue !!"
            },
            directives : {
                focus : {
                    inserted : function (el) {
                        el.focus();
                    }
                },
                demo : {
                    bind : function (el) {
                        console.log("指令綁定",el);
                    },
                    inserted : function (el,binding,) {//綁定元素插入到父元素中時執行
                        console.log("插入成功",el,binding);
                    },
                    update : function (el,binding) {//更新時就會執行
                        console.log("更新",el,binding);
                    }
                }
            }
        })

HTML代碼

<div id="box">
            <span v-demo:click.stop="msg">{{ msg }}</span>
            <input type="text" v-focus />
        </div>

10、路由

組件中，有提供了動態組件的方法也能實現簡單的組件之間的切換。但是我們在大型項目時，還是需要用路由來實現跳轉的。這時，我們不但要引入vue.js，也需要引入vue-router.js。
我們需要在Vue的那個實例中，添加一個router屬性，該屬性值為new VueRouter( )創建的實例。而接受的參數為各個組件組成的數組。
下面是更加直觀的代碼：
JS代碼

var routes = [{
            path : "/home",
            component : {
                template : `<div>
                    <h1>這是主頁</h1>
                    <router-view></router-view>
                    <router-link to="/home/a">首頁-A</router-link>
                    <router-link to="/home/b">首頁-B</router-link>
                </div>`
            },
            children : [{               
                path : "a",
                component : {
                    template : "<h2>首頁-A</h2>"
                }
            },{
                path : "b",
                component : {
                    template : "<h2>首頁-B</h2>"
                }
            }]
        },{
            path : "/items",
            component : {
                template : "<h1>商品展示頁</h1>"
            }
        },{
            path : "/mine",
            component : {
                template : "<h1>個人中心</h1>"
            }
        }];
        var router = new VueRouter({
            //mode : "history",//地址欄比較簡潔的顯示
            routes : routes
        });
        var vm = new Vue({
            el : "#box",
            router : router,
            data : {
                msg : "Hello Vue!!!"
            }
        })

HTML代碼

    <div id="box">
            <router-view></router-view>
            <router-link to="/home">首頁</router-link>
            <router-link to="/items">商品</router-link>
            <router-link to="/mine">個人中心</router-link>          
        </div>

和AngularJS類似，被激活的那個路由會被添加一個router-link-active的class。以供我們設置相關的激活樣式。