不積跬步，無以至千里；不積小流，無以成江海。

Vuejs語言基礎

單檔案元件：

工程中的 .vue 檔案，裡面包含html，css， js ，實現了對一個元件的封裝，一個.vue 檔案就是一個單獨的元件。

由於.vue檔案是自定義的，瀏覽器不認識，對該檔案進行解析時，需要安裝vue-loader 對.vue檔案進行解析（webpack）。

其中， template 中都是 html 程式碼，定義在頁面中顯示的內容；script中都是 js 程式碼，定義這個元件中所需要的資料和及其操作；style 裡面是css 樣式，定義這個元件的樣式，scoped 表明這裡寫的css 樣式只適用於該元件，可以限定樣式的作用域。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style scoped> //scope防止樣式衝突
h1 {
  font-weight: normal;
}
</style>