Vue基础第一章

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>

 

posted @ 2019-07-05 13:49  魅力宁波  阅读(113)  评论(0)  编辑  收藏  举报