Vue基础，el挂载点，data数据对象

最新推荐文章于 2023-03-28 20:14:34 发布

Mir ㅤ

最新推荐文章于 2023-03-28 20:14:34 发布

阅读量190

点赞数 1

本文链接：https://blog.csdn.net/weixin_45995139/article/details/119929141

版权

Vue el挂载 data对象模板语法 Vue实例

关键词由CSDN通过智能技术生成

一、Vue基础

1. 导入开发版本的Vue.js

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

3. 是用简洁的模板语法把数据渲染到页面上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue基础</title>
</head>
<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>
</html>

二、el：挂载点（用来设置Vue实例挂载(管理)的元素）

1. Vue实例的作用范围是什么呢？

答：Vue会管理el选项命中的元素及其内部的后代元素

2. 是否可以使用其他的选择器？

答：可以使用其他的选择器但推荐使用ID选择器（id选择器唯一）

3. 是否可以设置其他的dom元素呢？

答：可以使用其他的双标签，但不能使用Html和Body

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>el挂载点</title>
</head>
<body>
    {{ message }}
    <div id="app">
        {{ message }}
        <span>
            {{ message }}
        </span>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "el挂载点"
            }
        })
    </script>
</body>
</html>

三、data：数据对象

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

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

3. 渲染复杂类型的数据时，遵守js的语法即可（对象的.语法，数组的索引语法）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>data：数据对象</title>
</head>
<body>
    <div id="app">
        {{ message }}
        <h2>
            {{ school.name }}
            {{ school.Number }}
        </h2>
        <ul>
            <li>{{ campus[0] }}</li>
            <li>{{ campus[3] }}</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: "黑马程序员",
                    Number: "400-600-7989"
                },
                campus: ["北京校区", "深圳校区", "上海校区", "广州校区"]
            }
        })
    </script>
</body>
</html>