Vue例項的建立

var vm = new Vue({

        //選項

    })

  其中vm就代表了這個Vue例項，所有這個例項的程式碼都寫在這個內部。

Vue的屬性

var vm = new Vue({
        el: " ",    //繫結要操作的物件，一般為id，可以用class值（但實操發現只有一個生效了）
        data: {    //物件，指定了控制的區域內要用到的資料
        },
        methods: {    //方法，這個屬性定義當前Vue例項中所有可用的方法
        },
        filter: {    //定義私有過濾器，過濾器有兩個條件【過濾器名稱和處理函式】
        },
        directives:{    //自定義私有指令
        },
        components:{    //定義例項內部的私有元件
        }

    })
 

在Vue例項中，如果要訪問data上的資料，或者要訪問methids中的方法，必須通過this.資料屬性名/this.方法名來進行訪問，這裡的this表示我們new出來的vm例項

指令的使用

一、v-cloak防止出現閃爍

<div id='app'>{{ msg }}</div>  <!--使用差值表示式-->
    <script>
        var app = new Vue({
            el:"#app",//繫結app物件
            data:{
                msg:'123'       //定義msg資料為123
            }
        })
    </script>
 

使用上述程式碼時，如果網速慢的話，頁面載入時就會出現Vue的變數名，為了防止這種事情的發生，可以加入v-cloak指令

程式碼中的html可以改為

 <div id='app'><p  v-cloak>{{ msg }}</p></div>

然後在樣式裡面加入

 [v-cloak]{ display: none; }

這樣就可以在載入時隱藏Vue.js的變數名

二、v-text，v-html的使用

v-text是純文字的操作，作用其實和差值表示式{{ msg }}一樣，但v-text會將指令的內容覆蓋，而差值表示式只會替換自己的佔位符，不會把整個元素內容清空

<div id='app' v-text="msg"></div>  <!--使用v-text-->
    <script>
        var app = new Vue({
            el:"#app",//繫結app物件
            data:{
                msg:'123'       //定義msg資料為123
            }
        })
    </script>

如果要傳輸的資料是一個標籤，那用v-text去繫結的話就不行了，因為v-text回把標籤也當成是一個文字去渲染，這時候就要用到v-html來渲染了，使用v-html能很好的把標籤元素來最為html的標籤來渲染，如：

<div id='app' v-text="msg"></div>  <!--使用v-html-->
    <script>
        var app = new Vue({
            el:"#app",//繫結app物件
            data:{
                msg:'<div>這是個div元素</div>'      
            }
        })
    </script>

三、v-bind的使用

v-bind是Vue提供的繫結屬性的指令（可以簡寫為：），如：

<div id='app'>
        <input type="button" v-bind:title = "mytitle" value="button">
</div>
    <script>
        var app = new Vue({
            el:"#app",//繫結app物件
            data:{
                mytitle:'這是一個自己定義的title' 
            }
        })
    </script>

使用v-bind可以繫結一個html 的 class，也可以直接繫結一個物件

四、v-on事件的繫結

使用v-on，我們可以繫結一個事件，來呼叫我們在methods上定義的方法（可以簡寫為@）

<div id='app'>
     <input type="button" value="button" @click="show">
</div>
    <script>
        var app = new Vue({
            el:"#app",//繫結app物件
            data:{

            },
            methods:{
                show:function(){
                    alert('hello')
                }
            }
                 
        })
    </script>