Vue學習~1：Vue快速入門

0. Vue是什麼

是一套用於構建用戶界面的漸進式框架
與其它大型框架不一樣的是，Vue 被設計爲能夠自底向上逐層應用
Vue 的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合
另外一方面，當與現代化的工具鏈以及各類支持類庫結合使用時，Vue 也徹底可以爲複雜的單頁應用提供驅動

1. 簡單地引入vue

在頁面引入：

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

或者

<!-- 生產環境版本，優化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2. 聲明式渲染

Vue.js 的核心是一個容許採用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統
例如咱們先建立一個div：

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

而後定義一個Vue對象管理這個div：

var app = new Vue({
  el: '#app', // 指定要管理的元素的id
  data: { // 這個選項裏聲明一些數據
    message: 'Hello Vue!'
  }
})

在這段代碼中，Vue對象裏指定了的el選項就是這個Vue對象所管理的區域
{{message}} 這裏是使用了Vue實例裏data選項裏定義的message屬性，將message的值插入到此處，效果就是這個div的地方會自動填入message的內容

3. 屬性綁定 v-bind

v-bind 能夠綁定不少HTML元素的屬性，經過vue實例來動態改變這些屬性
v-bind:xxx 能夠簡寫爲 :xxx

4. 條件渲染 v-if

<xxx v-if="..."></xxx>

v-if裏面能夠寫js的表達式，能夠使用data選項定義的數據等等

當 v-if裏的條件爲真的時候，這個元素纔會被加載
v-if也能夠換成v-show，區別是：

• v-if 只在條件爲真的時候才建立加載元素
• v-show 不論怎樣都會加載元素，只是經過CSS的屬性不進行顯示而已

5. 列表渲染 v-for

若是要將一個數組進行顯示，一個一個渲染確定不行的，以下是渲染一個圖像數組

<div>
    <image v-for="(img,index) in imgList" :key="index" :src="img" />
</div>