Vue快速入门

介绍

vue是当前非常火的前端框架，使用方便，方便后续快速学习各种语法，搭建最小运行代码

最小运行代码

新建demo.html文件，输入以下内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueDemo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in books">{{item.name}}</li>
        </ul>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                books: [
                    {name: '《vue.js》'},
                    {name: '《JavaScript语言精粹》'},
                    {name: '《JavaScript高级程序设计》'}
                ]
            }
        })
    </script>
</body>
</html>

将demo.html放在webserver路径下，直接访问demo.html文件即可看到效果。效果如下

posted @ 2021-04-13 15:49  笑得开心  阅读(78)  评论(0)  编辑  收藏  举报