Vue的简单示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 示例</title> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> </head> <body> <div id="app"> <ul>
<!--v-for是Vue指令的一种,Vue的指令格式都是v-*,v-for的的作用就是循环从数组books中取值以及生成新的li标签,取出的值由{{}}进行处理,{{}}是Vue中插值的一种方式,所谓插值就是将数值放在你指定的位置去显示-->
<li v-for="book in books">{{ book.name }}</li> </ul> </div> <script>
<!--new Vue()表示生成一个Vue的实例,每个Vue实例中可以定义很多Vue的属性,此例中的Vue属性有el和data,el属性用于指定绑定Vue实例的标签,data属性用于存放Vue实例的数据,此例用data属性中存放了一个数组books-->
var app = new Vue({ el: "#app", data: { books: [ {name:'《Vue.js实战》'}, {name:'《JavaScript语言精粹》'}, {name:'《JavaScript高级程序设计》'} ] } }) </script> </body> </html>