# 初体验
## 需求
将js中的数据显示到`html`当中
## js版
```html
<div>
<span id="box"></span>
</div>
<script>
var str = "你好"
var obox = document.getElementById('box');
obox.innerHTML = str;
</script>
```
## Vue版
```html
<div id="app">
<span>
{{ str }}
</span>
</div>
<script>
var vm = new Vue({
data:{
str:"你好"
}
})
</script>
```
在学习Vue版本时要注意，我们是先将`data`写好。`el`先不要去写。将数据直接通过 `{{str}}`的形式书写在模板上。然后去展示。
最后发现问题，数据没有显示到html中。那么和上面差了哪一步。其实我们只是定义了数据，没有将数据和html结合。我们可以通过`el:"#app"` 和`html`绑定关系 ，最终实现数据呈现。
综上我们可以发现我们将`{{str}}`放到哪个位置，哪个位置就可以显示数据。相比js而言。我们这里面就能够体会和js相比，我们可以通过`{{}}` 来实现将js中的数据显示到`html`中。如下：
```html
<div id="app">
{{ str }} {{ str }}
<span>
{{ str }}
</span>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
str:"你好"
}
})
</script>
```
## 总结：
* 从上面我们可以知道Vue是**声明式**数据的写法，而原生JS是**命令式**的写法。
* vue中的数据要放在生成实例的参数选项的`data`对象中。
* 使用数据时，直接书写`{{数据名称}}`
## 体验增强
`data`中的数据不仅仅是字符串，也可以是对象或者数组，现在我们先体验对象。
```html
<div id="app">
<span>姓名：{{ people.name }} 年龄：{{people.age}} 性别：{{people.sex}}</span>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
people:{
name:'小伟',
age:18,
sex:'男'
}
}
})
</script>
```
