初学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>

效果：