vue組件基礎之創建與使用

一、創建組件

<script src="vue.js"></script> <!--引入vue.js文件-->

<div id="app">
    <Vheader></Vheader> //使用組件
</div>
<script>
    //創建組件
    Vue.component('Vheader', {
            //一定是函數
            data:function () {
                return {} //必須要返回，就算是空對象
            },
            template:'<div class="header"><p>我是頭部</p></div>'
        });

    var vm = new Vue({
        el:'#app', //目標區域
        data:{

        }
    })

</script>

　　組件是可復用的 Vue 實例，且帶有一個名字：在這個例子中是 <Vheader>。我們可以在一個通過 new Vue 創建的 Vue 根實例中，把這個組件作為自定義元素來使用，如上面的代碼所示。

• 組件的復用

組件可以進行任意次數的復用

<div id="app">
    <Vheader></Vheader>
    <Vheader></Vheader>
    <Vheader></Vheader>
</div>

• data必須是一個函數，並且必須要有返回值

一個組件的 data 選項必須是一個函數，因此每個實例可以維護一份被返回對象的獨立的拷貝：

data:function () {
                return {} //必須要返回，就算是空對象
            },

• 組件的注冊

為了能在模板中使用，這些組件必須先注冊以便 Vue 能夠識別，這樣才能在根下進行使用， Vue.component 就是全局注冊的，

Vue.component('Vheader', {
           // ... options ...
        });

全局注冊的組件可以用在其被注冊之后的任何 (通過 new Vue) 新創建的 Vue 根實例，也包括其組件樹中的所有子組件的模板中。

二、項目中使用組件

（一）創建項目

通過vue-cli創建項目，然后在其中創建項目並且使用組件。

 1、安裝node.js

自行去官網 https://nodejs.org/en/下載並且安裝，安裝完畢后：

#在命令行工具中輸入

C:\Users\Administrator>node -v
v10.14.2

C:\Users\Administrator>npm -v
6.4.1

如果出現對應的版本號，說明安裝成功。

2、全局安裝vue-cli

npm install --global vue-cli  /  cnpm install --global vue-cli         #（npm相當於python中的pip工具，此命令只需要執行一次）

安裝完畢后，命令行輸入：

C:\Users\Administrator>vue -V        #這里的vue只是一個工具，用於快速創建項目            
2.9.6

此時已經完成vue-cli工具的安裝，vue-cli工具是一個用於快速創建項目的工具

3、vue-cli的使用

在命令行中查看幫助信息

C:\Users\Administrator>vue --help
Usage: vue <command> [options]

Options:
  -V, --version  output the version number
  -h, --help     output usage information

Commands:
  init           generate a new project from a template
  list           list available official templates
  build          prototype a new project
  create         (for v3 warning only)
  help [cmd]     display help for [cmd]

此時可以根據提示查看可以使用的模板

C:\Users\Administrator>vue list

  Available official templates:

  ★  browserify - A full-featured Browserify + vueify setup with hot-reload, li
nting & unit testing.
  ★  browserify-simple - A simple Browserify + vueify setup for quick prototypi
ng.
  ★  pwa - PWA template for vue-cli based on the webpack template
  ★  simple - The simplest possible Vue setup in a single HTML file
  ★  webpack - A full-featured Webpack + vue-loader setup with hot reload, lint
ing, testing & css extraction.
  ★  webpack-simple - A simple Webpack + vue-loader setup for quick prototyping
.

之前使用的一直是simple 簡單的模板，此時可以使用webpack-simple模板創建項目：

• 切換你需要建立項目的目錄下

C:\Users\Administrator>e:

E:\>cd E:\vueProject

• 初始化項目

E:\vueProject>vue init webpack-simple webpackProject

webpack-simple表示需要使用的模板，webpackProject表示項目的名稱

E:\vueProject>vue init webpack-simple webpackProject

? Project name wptest  #不能含有大寫的字母
? Project description A Vue.js project
? Author bright <[e-mail]>
? License MIT
? Use sass? No #需要選擇No

• 按照提示進行安裝

  vue-cli · Generated "webpackProject".

  To get started:

    cd webpackProject
    npm install
    npm run dev

此時就完成了一個項目的創建。

#在npm install 發現下載的太慢，時長卡住，這時考慮使用淘寶鏡像

#安裝cnpm
E:\vueProject\webpackProject>npm install -g cnpm --registry=https://registry.npm
.taobao.org

#使用
E:\vueProject\webpackProject>cnpm install

（二）創建組件

在生成的項目中，主要關心的是src文件夾中的內容：

這個項目的入口文件是main.js文件，這里主要是加載App.vue的內容。

import Vue from 'vue' //導入模塊
import App from './App.vue'  // 一個.vue就是一個組件

new Vue({
  el: '#app',
  render: h => h(App) //加載組件
});

在App.vue組件中又引入了新的組件，這里先看看引入的三個組件：

在Vheader.vue組件中：

<template>
//注意標簽不能並列，只能是包裹的，也就是說其余的標簽必須放在下面div中，不能再有其它與其並列的標簽
  <div class="header">
    <p>我是頭部</p>
  </div>
</template>

<script>
    export default {
        name: "Vheader",
      data:function () {
        return {}
      },

      methods:{
          //在當前組件內調用
      },

      computed:{
        //在在當前組件內調用
      }

    }
</script>

<style scoped>
  /*設置scoped，只對當前組件樣式起作用*/

</style>

其它組件的創建與其類似，而將其引入到App.vue中分為三步：

• 引入組件
• 掛載組件
• 使用組件

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

<template>
  <!--頁面結構-->
  <div id="app">
    <!--使用組件-->
    <Vheader></Vheader>
    <Vcontent></Vcontent>
    <Vfooter></Vfooter>

  </div>
</template>

<script>
  // 導入組件
  import Vheader from './components/Vheader.vue'
  import Vcontent from './components/Vcontent.vue'
  import Vfooter from './components/Vfooter.vue'

  // 頁面業務邏輯
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },

  // 掛載組件
  components:{
    Vheader:Vheader,
    Vcontent:Vcontent,
    Vfooter:Vfooter
  }
}
</script>

<style>
  /*頁面樣式*/

</style>

這樣就完成組件的創建以及使用了。