初學vue，我的第一個程序

創建Vue對象

<div id="app">{{message}}</div>

<script>
    var vm = new Vue({
        <!--el：指定一個DOM節點-->
        el:"#app",
        <!--data:裏面存放數據-->
        data:{
            message:"Hello World"
        }
    })
</script>

在控制檯中可以通過 vm 改變 message的內容，這是vue響應式的特點。

{{}}中可以表達式，例如：

<div id="app">{{message + ',' + message}}</div>

結果：

Hello World,Hello World

v-bind指令

v-bind：用於綁定數據和元素屬性

v-bind：屬性名=“想綁定的數據”

<div id="app">
    <a v-bind:href="url">click me</a>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            url:"http://www.baidu.com"
        }
    })
</script>

效果：

點擊會跳轉 到百度

指令中 最常用的就是 v-bind 所以通常可以簡寫成冒號，如

<a :href=""></a>

其他常用指令

v-if、v-else-if、v-else、v-for、v-show

<div id="app">
    <ul>
        <!--v-for:item 做遊標 循環 list-->
        <li v-for="item in list">
            <!--v-if:true 顯示     v-show:true 顯示-->
            <span v-if="!item.del">{{item.title}}</span>
            <span v-else style="text-decoration: line-through">{{item.title}}</span>
            <button v-show="!item.del">刪除</button>
        </li>
    </ul>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data: {
            <!--在list中定義兩組數據-->       
            list: [
            {
            title: "課程-1",
            del: false
            },
            {
            title: "課程-2",
            del: true
            }]
        }
    })
</script>

效果：