Vue笔记整理，让你快速入门Vue.js：02_3.Vue基础：data数据对象

本文为博主原创文章，不得随意转载，转载请注明出处！！！

本文链接：https://blog.csdn.net/YuDBL/article/details/104999661

上一篇文章我们介绍了el挂载点，但是在创建Vue实例的时候，还有一个属性data，接下来我们来学习一下data属性

一、data数据对象

data属性也可以叫做数据对象，Vue实例需要使用的数据我们都会定义在data中，在咱们写的第一个Vue程序中，内部就定义了一个基本类型字符串message

但是在 JS 中数据类型不仅仅是这样，如它还有：数组、对象等复杂类型

那么如果我们在data里面添加这样的复杂类型，要如何使用呢？下面我们用代码来演示一下

二、data里面的复杂类型

1、实例代码测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>05_data里面的复杂类型</title>
</head>

<body>

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

   <div id="app">
       {{ message }}
       <h2>{{student.name}} {{student.age}} {{student.mobile}}</h2>
       <ul>
           <li>{{star[0]}}</li>
           <li>{{star[1]}}</li>
           <li>{{star[2]}}</li>
           <li>{{star[3]}}</li>
       </ul>
   </div>

   <script>
        var app = new Vue({
            el: '#app',
            data: {
                //字符串
                message: '你好啊',
                //对象
                student:{
                    name:"帅气华",
                    age:"18",
                    mobile:"13355556666"
                },
                //数组
                star:["刘德华","张学友","黎明","郭富城"]
            }
        })
   </script>

</body>

</html>