vue - vue-cli腳手架項目中組件的使用

在webpack-simple模板中，包括webpck模板。一個.vue文件就是一個組件。

 爲何會這樣呢？由於webpack幹活了！webpack的將咱們全部的資源文件進行打包。同時webpack還能將咱們的html（template）、css、js文件經過模板編譯的方式將這些文件打包成一個.vue的文件。

爲何在vue-cli項目中能使用.vue的文件？

好比有這以前的一個自定義的組件：

    Vue.component('app-header', {
        template: '<div>A custom component!</div>'
    })

咱們能夠把template提取出來，例如：

<script type="text/x-template" id="head-template">
  <div class="head">
    <h1>{{ title }}</h1>
  </div>
</script>

Vue.component('app-header', {
    template: '#head-template',
    data: {
        title: '我是頭部'
    }
})

若是是這樣的去寫咱們的組件的話，太複雜了，後期還很差去維護。可能你們如今還感受不出來，若是寫更多功能或者用到組件時會相互嵌套，那就更加的麻煩了。還好官方推出的vue-cli工具，基本不用任何的額外的代碼，很快的就能夠構建出一套完整的環境。

<template>
  <div class="header">
    <h1> {{ title }} </h1>
  </div>
</template>

<script>
  export defualt {
    data: function() {
      return {
        title: '我是頭部'
      }
    }
  }
</script>

<style>
  .header {
    color: red;
  }
</style>

上面代碼 有三部分，template標籤中就是咱們要寫的組件結構，script標籤中就是咱們要寫的業務邏輯，style標籤中就是咱們要寫的該組件的樣式。這三部分，咱們經過vue-loader這個插件，將這三部分共同組合成了一個.vue文件。咱們稱這種.vue的文件就是一個組件。

另外上面的代碼，咱們發現有個export default語法，其實呢，這個東西，跟咱們的python模塊化有點相似。在es6 Module中，webpack這個工具經過babel-loader這個loader將咱們的es6 Module語法進行解析，從而讓咱們的export default語法和import 'xxx'語法在瀏覽器中識別。

咱們總結一句話：export default xxx 就是拋出一個模塊（一個js文件就是一個模塊)， import 'xxx' from 'aaa'就是從剛剛拋出的文件路徑中，導入此模塊。有import就必定有export default.

 

接下來咱們我編輯器中打開咱們的項目目錄，查看一下結構：

打開src文件夾，咱們先從項目的入口文件main.js文件：

那麼接下來咱們就關心去書寫App.vue組件中定義的內容就能夠了。

你們一開始學習呢，先將App.vue文件中的內容所有刪掉，跟着我一塊兒書寫裏面的主要內容。

在該組件中，咱們能夠書寫三部分，就是以前我們學習的HTML、CSS、JS.

<template>
  <!-- 該組件的模板結構（HTML） -->
</template>
<script>
  // 該組件的DOM操做
</script>
<style>
/*該組件的樣式屬性*/
  
</style>

由於在main.js中有：

import App from './App.vue'

因此，咱們必須在當前組件中寫入export default,那麼後面的書寫就是用到了我們以前的學習的語法。

在script

 export default {
    name:'App',
    data(){
      return {
        //必須是一個函數，要有返回值，返回空對象也是有返回值
      }
    }
  }

在template中

<!--必定是閉合標籤-->
<div class="app"> 
      <h3>{{ msg }}</h3>
</div>

若是此時你的命令行工具仍是保持開啓的裝備的，那麼你會發現以下頁面：

若是沒有重啓項目，請再次執行以下命令啓動項目：

npm run dev

 

那麼接下來咱們就能夠在App.vue組件中將咱們以前學習到的知識運用進來。

好比咱們的指令系統：

1. v-if  條件渲染
2. v-show  顯示隱藏
3. v-for  遍歷多條數據
4. v-bind   綁定屬性
5. v-model   表單控件的數據雙向綁定
6. v-on  綁定事件
7. v-html  渲染html標籤元素

咱們還可使用實例對象的方法：

1. 計算屬性的computed方法來監聽屬性
2. methods方法中聲明事件的方法
3. .......

---------------------------------------------------

補充：

.vue就是一個組件
webpack + node.js 將咱們的項目更加方便化
更有助於開發者的快速開發

建立組件 

一個組件有三部分組成

--------------
建立項目：
1. cd 當前目錄下
2. vue init webpack-simple 01
3. 接下來 根據提示操做
4. cd 01
5. npm install
6. npm run dev
7. 只關心src下的文件夾裏面的文件

 

App.vue

1.先引入子組件 

2.掛載

<!--  一個組件有三部分組成  -->

<template>
  <!-- 頁面的結構 -->

  <div class="app">
    <h3>{{msg}}</h3>
    <p>嘿嘿</p>
  
    <Vheader></Vheader>
    <Vcontent></Vcontent>
    <Vfooter></Vfooter>
  </div>


</template>

<script>
//1.先引入子組件
import Vheader from './components/Vheader.vue'
import Vcontent from './components/Vcontent'
import Vfooter from './components/Vfooter'

export default{
  name : 'App',
  data(){
    return {
      msg:"hello 組件"
    }
  },
  methods:{

  },
  computed:{

  },
  // 2.掛載
  components:{
    Vheader,
    Vcontent,
    Vfooter,
  }
}  

</script>

<style>
  

</style>

 

Vheader.vue

每一個樣式想獨立； 加 scoped

<template>
    <div class="nav">
        我是header
        <h3>頭</h3>
    </div>
</template>

<script>
    
    export default{
        name:'Vheader',
        data(){
            return {

            }
        }
    }

</script>

<style scoped>
h3{color: red}    

</style>

 

Vcontent

<template>
    <div class="content">
        我是content
        <h3>內容</h3>
    </div>
</template>

<script>
    
    export default{
        name:'Vcontent',
        data(){
            return {

            } 
        }
    }

</script>

<style scoped>
h3{color: green;}

</style>