<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            //element缩写
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        })
        app.message = "test";
    </script>

Vue2的写法，Vue不支持 IE8以及以下版本，因为Vue使用了IE8无法模拟的ECMAScript5特性，但它支持所有兼容ECMAScript5的浏览器。

条件语句：

<div id="app">
        <h1 v-if="ifGood">Good</h1>
        <h1 v-else>Not Good</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
        var app = new Vue({
            //element缩写
            el: '#app',
            data: {
                ifGood: false
            }
        })
</script>

if else:

<div id="app">
        <h1 v-if="name === 'a'">a</h1>
        <h1 v-else-if="name === 'ahuinan'">ahuinan</h1>
        <h1 v-else>Not a/ahuinan</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
        var app = new Vue({
            //element缩写
            el: '#app',
            data: {
                name: 'a'
            }
        })
</script>

for循环：

<div id="app">
        <ul id="test_ul">
            <li v-for="item in items">{{item.message}}</li>
        </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
        var app = new Vue({
            //element缩写
            el: '#test_ul',
            data: {
                items:[
                    {message:'A'},
                    {message:'B'}
                ]
            }
        })
</script>

事件：

<div id="app">
        <button v-on:click="testClick">Click</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
        var app = new Vue({
            //element缩写
            el: '#app',
            data: {
                message:"Hello,Vue"
            },
            methods:{
                testClick:function(){
                    alert(this.message);
                }
            }
        })
</script>