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

效果：