Vue基础

HeX_7

已于 2022-04-18 11:13:45 修改

阅读量308

点赞数

分类专栏： # Vue 文章标签： vue.js

于 2022-04-18 10:59:34 首次发布

本文链接：https://blog.csdn.net/hex_7/article/details/124243494

版权

Vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

本文介绍了如何创建第一个Vue程序，包括导入开发版本的Vue.js，创建Vue实例对象，设置`el`属性来指定挂载点，并通过`data`属性定义数据对象。示例展示了如何渲染简单的文本以及复杂类型的数据，如对象和数组，从而将数据动态地显示在页面上。

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

第一个Vue程序

导入开发版本的Vue.js

创建Vue实例对象，设置el属性和data属性

使用简介的模板语法把数据渲染到页面上

<body>
    <div id="app">
        {{ message }}
    </div>

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

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"Hello Vue"
            }
        })
    </script>
</body>

el：挂载点

el用来设置Vue实例挂载（管理）的元素

Vue实例的作用范围：管理el选项命中的元素及其内部的后代元素

是否可以使用其他的选择器：可以，但是建议使用ID选择器

是否可以设置其他的dom元素：可以，但不能用HTML和BODY

data：数据对象

Vue中用到的数据定义在data中

data中可以写复杂类型的数据

渲染复杂类型数据时，遵守js语法即可

<body>
    
    <div id="app">
        {{message}}
        <h2>{{school.name}} {{school.mobile}}</h2>
        <ul>
            <li>{{campus[0]}}</li>
            <li>{{campus[1]}}</li>
            <li>{{campus[2]}}</li>
        </ul>
    </div>

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

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"你好小黑！",
                school:{
                    name:"黑马程序员",
                    mobile:"123546"
                },
                campus:["北京校区","南京校区","上海校区"]
            }
        })
    </script>

</body>