認識單文件組件.vue 文件

    vuejs 自定義了一種.vue文件，可以把html, css, js 寫到一個文件中，從而實現了對一個組件的封裝， 一個.vue 文件就是一個單獨的組件。由於.vue文件是自定義的，瀏覽器不認識，所以需要對該文件進行解析。 在webpack構建中，需要安裝vue-loader 對.vue文件進行解析。在 sumlime 編輯器中，我們 書寫.vue 文件，可以安裝vue syntax highlight 插件，增加對文件的支持。

　　用vue-cli 新建一個vue項目，看一下.vue文件長什么樣？ 在新建項目的過程中，命令行中會詢問你幾個問題，當詢問是否安裝vue-router 時，這里先選擇否。項目完成后，我們看到src  目錄下有一個componet 目錄，里面有一個 Hello.vue 文件，內容如下，這里對template 里面的內容做了一些刪減。

復制代碼
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
  </div>
</template>

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

<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

    可以看到，在 .vue 文件中， template 中都是html 代碼，它定義了在頁面中顯示的內容，由於里面還有變量，也可以說定義了一個模版；script中都是js 代碼，它定義這個組件中所需要的數據和及其操作，style 里面是css 樣式，定義這個組件的樣式，scoped 表明這里寫的css 樣式只適用於該組件，可以限定樣式的作用域。

 

（2）script 標簽中 export defalut 后面的對象的理解

    在不使用.vue 單文件時，我們是通過 Vue 構造函數創建一個 Vue 根實例來啟動vuejs 項目，Vue 構造函數接受一個對象，這個對象有一些配置屬性 el, data, component, template 等，從而對整個應用提供支持。

new Vue({
  el: '#app',
  data: {
        msg: "hello Vue"     
  }  
})

    在.vue文件中，export default 后面的對象 就相當於 new Vue() 構造函數中的接受的對象，它們都是定義組件所需要的數據（data）, 以及操作數 據的方法等， 更為全面的一個 export default 對象，有methods, data, computed, 這時可以看到, 這個對象和new Vue() 構造函數中接受的對象是一模一樣的。但要注意data 的書寫方式不同。在 .vue 組件, data 必須是一個函數，它return（返回一個對象），這個返回的對象的數據，供組件實現。

　把項目中自帶的hello.vue 內容清空，我們自己寫一個組件來體驗一下這種相同。

<template>
  <div class="hello">
    <input type="txet" placeholder="請輸入文字" v-model="msg" @keypress.enter="enter">
    <p>{{upper}}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'hello'
    }
  },
  methods:{
    enter () {
      alert(this.msg);
    }
  },
  computed: {
    upper () {
      return this.msg.toUpperCase();
    }
  }
}
</script>

<style scoped>
  input {
    width: 200px;
    height: 20px;
  }
  p {
    color: red;
  }
</style>

    頁面中有一個input輸入框，當進行輸入的時候，輸入框下面的內容會進行同步顯示，只不過它是大寫，當輸入完成后，按enter鍵就會彈出我們輸入的內容。獲取用戶輸入的內容，我們用的是v-model 指令，這個指令將用戶輸入的內容綁定到變量上，並且它響應式的，我們的變量值會隨着用戶輸入的變化而變化，也就是說我們始終獲取的都是用戶最新的輸入。下面大寫的顯示，用的是computed屬性，彈窗則是給綁定了一個keypress事件，通過描述，你會發現，它簡直就是一個vue實例，實際上它就是個vue實例。每一個vue組件都是一個vue實例，更容易明白 export default 后面的對象了。

    

 

 

.