一、Vue環境安裝

在Vue官網下載Vue.js或Vue.min.js引入，也可以用csdn

二、Vue例項

1、在js檔案中或script標籤中，new Vue({

    el:'#id',

    data:{

        name:'老王',

        message:"hello word",

        message2:"hello everyone"

        isgreen:true,

        error:null

    }

    methods:{//這是方法

           reverseName:function(){

                this.name = 

                alert("反轉成功");

            }

        }

    computed:{//這是計算屬性，

        computedTest:function(){

                return green:this.isgreen && !this.error,'text-danger':this.error&&this.error.type==fatal;

            }

    }

})

2、在Html標籤中

1）、用v-bind繫結例如：

<div id="classtyletest">

    <div id="styletest" v-bind:class="styletestclass"></div>

</div>

2）、如果要輸出html,用v-html例如<p v-html="htmlmessage"></p>,這就完成了html輸出

new Vue({

el:'',

data:{

        htmlmessage:"<table>...</table>"

    }

})

3）、繫結事件用v-on，例如：v-on:click,v-ondblclick,v-on:mousemove,v-on:keyup,等，

有滑鼠點選，雙擊事件，滑鼠移動事件，鍵盤事件

4）、陣列遍歷用v-for,

<div id="ifandfor">
    <ol>
        <li v-for="lesson in lessons">{{lesson.lesson}}</li>
    </ol>
</div>