# 初體驗
## 需求
將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>
```
