Vue系列——数据对象

最新推荐文章于 2024-08-19 21:49:22 发布

猪八戒1.0

最新推荐文章于 2024-08-19 21:49:22 发布

阅读量380

点赞数 2

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_58631644/article/details/137179795

版权

Vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

这篇文章展示了如何使用Vue.js在一个简单的HTML页面上创建一个数据驱动的组件，通过el属性挂载到id为app的div上，并展示了如何绑定数据和渲染列表。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>el:挂载点</title>
</head>
<body>
    <div id="app">
        {{message}}
        <h2>{{school.name}} {{school.age}}</h2>
        <ul>
            <li>{{campus[0]}}</li>
            <li>{{campus[1]}}</li>
            <li>{{campus[2]}}</li>
            <li>{{campus[3]}}</li>
        </ul>

    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        var app=new Vue({
            el:"#app", 
            data:{
                message:"你好，小黑",
                school:{
                    name:"黑马程序员",
                    mobile:"400-618-9090"
                },
                campus:["北京校区","上海校区","广州校区","深圳校区"]

            }
        })
    </script>
</body>
</html>