Vue (三) --- Vue 組件開發

時間  2019-11-19
標籤 vue 組件 開發 简体版
原文   原文鏈接

------------------------------------------------------------------好心情，會讓你峯迴路轉。javascript

 

5. 組件化開發

5.1 組件[component]

組件（Component）是自定義封裝的功能。在前端開發過程當中，常常出現多個網頁的功能是重複的，並且不少不一樣的網站之間，也存在一樣的功能。css

而在網頁中實現一個功能，須要使用html定義功能的內容結構，使用css聲明功能的外觀樣式，還要使用js來定義功能的特效，所以就產生了把一個功能相關的[HTML、css和javascript]代碼封裝在一塊兒組成一個總體的代碼塊封裝模式，咱們稱之爲「組件」。html

 

因此，組件就是一個html網頁中的功能，通常就是一個標籤，標籤中有本身的內容結構，樣式和特效。前端

這樣，前端人員就能夠在開發時，只須要書寫一次代碼，隨處引入便可使用。vue

 

組件有兩種：默認組件[全局組件] 和 單文件組件java

5.1.1 默認組件

<div id="app">
    <addnum></addnum>
    <addnum></addnum>
    <addnum></addnum>
    <addnum></addnum>
    <addnum></addnum>
</div>
<script>
    Vue.component("addnum",{
        template:'<div><input type="text" v-model="num"><button @click="num+=1">點擊</button></div>',
        data: function(){
            // 寫在這裏的數據只有當前組件可使用
            return {
                num:1,
           }
       }
   });
​
​
    var vm = new Vue({
        el:"#app",
        // 這裏寫的數據是全局公用的，整個文件共享
        data:{
​
       }
   })
</script>

 

 

 

 

6. Vue自動化工具（Vue-CLI）

前面學習了普通組件之後，接下來咱們繼續學習單文件組件則須要提早先安裝準備一些組件開發工具。不然沒法使用和學習單文件組件。node

通常狀況下，單文件組件，咱們運行在 自動化工具vue-CLI中，能夠幫咱們編譯單文件組件。因此咱們須要在系統中先搭建vue-CLI工具，python

官網：https://cli.vuejs.org/zh/webpack

 

Vue CLI 須要 Node.js 8.9 或更高版本 (推薦 8.11.0+)。你可使用 nvm 或 nvm-windows在同一臺電腦中管理多個 Node 版本。ios

nvm工具的下載和安裝： https://www.jianshu.com/p/d0e0935b150a

https://www.jianshu.com/p/622ad36ee020

安裝記錄:

打開:https://github.com/coreybutler/nvm-windows/releases

安裝完成之後,先查看環境變量是否設置好了.

​
​

經常使用的nvm命令

nvm list # 列出目前在nvm裏面安裝的全部node版本 nvm install node版本號 # 安裝指定版本的node.js nvm uninstall node版本號 # 卸載指定版本的node.js nvm use node版本號 # 切換當前使用的node.js版本

 

若是使用nvm工具，則直接能夠不用本身手動下載，若是使用nvm下載安裝 node的npm比較慢的時候，能夠修改nvm的配置文件(在安裝根目錄下)

# settings.txt
root: C:\tool\nvm   [這裏的目錄地址是安裝nvm時本身設置的地址,要根據實際修改]
path: C:\tool\nodejs
arch: 64
proxy: none
node_mirror: http://npm.taobao.org/mirrors/node/ 
npm_mirror: https://npm.taobao.org/mirrors/npm/

 

 

6.1 安裝node.js

Node.js是一個新的後端(後臺)語言，它的語法和JavaScript相似，因此能夠說它是屬於前端的後端語言，後端語言和前端語言的區別：

  • 運行環境：後端語言通常運行在服務器端，前端語言運行在客戶端的瀏覽器上

  • 功能：後端語言能夠操做文件，能夠讀寫數據庫，前端語言不能操做文件，不能讀寫數據庫。

咱們通常安裝LTS(長線支持版本)：

下載地址：https://nodejs.org/en/download/【上面已經安裝了nvm，那麼這裏不用手動安裝了】

 

node.js的版本有兩大分支：

官方發佈的node.js版本：0.xx.xx 這種版本號就是官方發佈的版本

社區發佈的node.js版本：xx.xx.x 就是社區開發的版本

 

Node.js若是安裝成功，能夠查看Node.js的版本,在終端輸入以下命令：

node -v

 

6.2 npm

在安裝node.js完成後，在node.js中會同時幫咱們安裝一個npm包管理器npm。咱們能夠藉助npm命令來安裝node.js的包。這個工具至關於python的pip管理器。

npm install -g 包名              # 安裝模塊   -g表示全局安裝，若是沒有-g，則表示在當前項目安裝
npm list                       # 查看當前目錄下已安裝的node包
npm view 包名 engines           # 查看包所依賴的Node的版本 
npm outdated                   # 檢查包是否已通過時，命令會列出全部已過期的包
npm update 包名                 # 更新node包
npm uninstall 包名               # 卸載node包
npm 命令 -h                     # 查看指定命令的幫助文檔

 

6.3 安裝Vue-CLI

npm install -g vue-cli

若是安裝速度過慢，一直超時，能夠考慮切換npm鏡像源：http://npm.taobao.org/

 

6.4 使用Vue-CLI初始化建立項目

6.4.1 生成項目目錄

使用vue自動化工具能夠快速搭建單頁應用項目目錄。

該工具爲現代化的前端開發工做流提供了開箱即用的構建配置。只需幾分鐘便可建立並啓動一個帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目：

// 生成一個基於 webpack 模板的新項目
vue init webpack 項目名
例如：
vue init webpack myproject
​
​
// 啓動開發服務器 ctrl+c 中止服務
cd myproject
npm run dev           # 運行這個命令就能夠啓動node提供的測試http服務器

運行了上面代碼之後,終端下會出現如下效果提示：

 

那麼訪問：http://localhost:8080/

 

6.4.2 項目目錄結構

src 主開發目錄，要開發的單文件組件所有在這個目錄下的components目錄下

static 靜態資源目錄，全部的css，js文件放在這個文件夾

dist項目打包發佈文件夾，最後要上線單文件項目文件都在這個文件夾中[後面打包項目,讓項目中的vue組件通過編譯變成js 代碼之後,dist就出現了]

node_modules目錄是node的包目錄，

config是配置目錄，

build是項目打包時依賴的目錄

src/router 路由,後面須要咱們在使用Router路由的時候,本身聲明.

 

6.4.3 項目執行流程圖:

整個項目是一個主文件index.html,index.html中會引入src文件夾中的main.js,main.js中會導入頂級單文件組件App.vue,App.vue中會經過組件嵌套或者路由來引用components文件夾中的其餘單文件組件。

 

7. 單文件組件的使用

組件有兩種：普通組件、單文件組件

普通組件的缺點：

  1. html代碼是做爲js的字符串進行編寫，因此組裝和開發的時候不易理解，並且沒有高亮效果。

  2. 普通組件用在小項目中很是合適，可是複雜的大項目中，若是把更多的組件放在html文件中，那麼維護成本就會變得很是昂貴。

  3. 普通組件只是整合了js和html，可是css代碼被剝離出去了。使用的時候的時候很差處理。

 

將一個組件相關的html結構，css樣式，以及交互的JavaScript代碼從html文件中剝離出來，合成一個文件，這種文件就是單文件組件，至關於一個組件具備告終構、表現和行爲的完整功能，方便組件之間隨意組合以及組件的重用，這種文件的擴展名爲「.vue」，好比："Home.vue"。

  1. 建立組件

在組件中編輯三個標籤，編寫視圖、vm對象和css樣式代碼。

7.1 template 編寫html代碼的地方

<template>
  <div id="Home">
    <span @click="num--" class="sub">-</span>
    <input type="text" size="1" v-model="num">
    <span @click="num++" class="add">+</span>
  </div>
</template>

7.2 script編寫vue.js代碼

<script>
  export default {
    name:"Home",
    data: function(){
      return {
        num:0,
     }
   }
 }
</script>

7.3 style編寫當前組件的樣式代碼

<style scoped>
  .sub,.add{
    border: 1px solid red;
    padding: 4px 7px;
 }
</style>

 

7.4 完成案例-點擊加減數字

建立Homes.vue

<template>
 <div class="add_num">
     <span @click="num++">+</span>
     <input type="text" size="2" v-model="num">
     <span @click="num--">-</span>
 </div>
</template>
​
<script>
 export default{
   name:"AddNum",
   data: function(){
     return {
       num: 0,
     }
   }
 }
</script>
​
<style scoped>
   .add_num{
     font-size: 32px;
   }
</style>
​

在App.vue組件中調用上面的組件

<template>
 <div id="Home">
   <span @click="num--" class="sub">-</span>
   <input type="text" size="1" v-model="num">
   <span @click="num++" class="add">+</span>
 </div>
</template>
​
​
<script>
 export default {
   name:"Home",
   data: function(){
     return {
       num:0,
     }
   }
 }
</script>
​
<style scoped>
 .sub,.add{
   border: 1px solid red;
   padding: 4px 7px;
 }
</style>
​

在開發vue項目以前，須要手動把 App.vue的HelloWorld組件代碼以及默認的css樣式，清楚。

上面的代碼效果：

 

 

 

 

7.4 組件的嵌套

有時候開發vue項目時,頁面也能夠算是一個大組件,同時頁面也能夠分紅多個子組件.

由於,產生了父組件調用子組件的狀況.

例如,咱們能夠聲明一個組件,做爲父組件

在components/建立一個保存子組件的目錄HomeSon

在HomeSon目錄下,能夠建立當前頁面的子組件,例如,是Menu.vue

//  組件中代碼必須寫在同一個標籤中
<template>
    <div id="menu">
      <span>{{msg}}</span>
      <div>hello</div>
  </div>
</template>
​
<script>
  export default {
    name:"Menu",
    data: function(){
      return {
        msg:"這是Menu組件裏面的菜單",
     }
   }
 }
</script>
​

而後，在父組件中調用上面聲明的子組件。

最後,父組件被App.vue調用.就能夠看到頁面效果.

 

效果:

 

 

7.5 傳遞數據

例如,咱們但願把父組件的數據傳遞給子組件.

能夠經過props屬性來進行傳遞.

傳遞數據三個步驟：

  1. 在父組件中，調用子組件的組名處，使用屬性值的方式往下傳遞數據

    <Menu :mynum="num" title="home裏面寫的數據"/>
    ​
    # 上面表示在父組件調用Menu子組件的時候傳遞了2個數據：
     若是要傳遞變量[變量能夠各類類型的數據]，屬性名左邊必須加上冒號:，同時，屬性名是自定義的，會在子組件中使用。
     若是要傳遞普通字符串數據，則不須要加上冒號:

  2. 在子組件中接受上面父組件傳遞的數據，須要在vm組件對象中，使用props屬性類接受。

    <script>
      export default {
        name:"Menu",
        props:["mynum","title"],
        data: function(){
          return {
            msg:"這是Menu組件裏面的菜單",
         }
       }
     }
    </script>
    ​
    // 上面 props屬性中表示接受了兩個數據。

  3. 在子組件中的template中使用父組件傳遞過來的數據.

    <template>
        <div id="menu">
          <span>{{msg}}，{{title}}</span>
          <div>hello，{{mynum}}</div>
      </div>
    </template>

 

效果：

步驟流程:

 

使用父組件傳遞數據給子組件時, 注意一下幾點:

  1. 傳遞數據是變量,則須要在屬性左邊添加冒號.

    傳遞數據是變量,這種數據稱之爲"動態數據傳遞"

    傳遞數據不是變量,這種數據稱之爲"靜態數據傳遞"

  2. 父組件中修改了數據,在子組件中會被同步修改,可是,子組件中的數據修改了,是否是影響到父組件中的數據.

    這種狀況,在開發時,也被稱爲"單向數據流"

 

 

 

8. 在組件中使用axios獲取數據

默認狀況下，咱們的項目中並無對axios包的支持，因此咱們須要下載安裝。

在項目根目錄中使用 npm安裝包

npm install axios

接着在main.js文件中，導入axios並把axios對象 掛載到vue屬性中多爲一個子對象，這樣咱們才能在組件中使用。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App' // 這裏表示從別的目錄下導入 單文件組件
import axios from 'axios'; // 從node_modules目錄中導入包
Vue.config.productionTip = false
​
Vue.prototype.$axios = axios; // 把對象掛載vue中
​
/* eslint-disable no-new */
new Vue({
 el: '#app',
 components: { App },
 template: '<App/>'
});
​

8.1 在組建中使用axios獲取數據

<script>
 export default{
 。。。
 methods:{
     get_data:function(){
         // 使用axios請求數據
       this.$axios.get("http://wthrcdn.etouch.cn/weather_mini?city=深圳").then((response)=>{
           console.log(response);
       }).catch(error=>{
           console.log(error);
       })
     }
   }
 }
</script>

 

效果:

 

使用的時候，由於本質上來講，咱們仍是原來的axios，因此也會收到同源策略的影響。

 

 

 

 

9. 路由（Router）

安裝:

npm install --save vue-router

路由：把組件和對應的 uri地址進行一一映射的關係。

9.1 建立路由文件

路由文件能夠直接建立在src目錄下，可是若是項目大了， 分紅多個不一樣的大平臺或者大的子項目，能夠選擇分目錄保存路由，

src/router/index.js // 前臺路由

src/router/backend.js // 後臺路由

 

在index.js文件中編寫初始化路由信息,以及綁定地址和組件的映射關係

import Vue from 'vue'
import Router from 'vue-router'
​
// 導入路由中須要使用的組件
import Home from '@/components/Home'
import AddNum from '@/components/AddNum'
import HelloWorld from '@/components/HelloWorld'
​
Vue.use(Router);
​
export default new Router({
 routes:[
 // 路由信息
   {
     path:"/",
     name: "Home",
     component: Home
   },
   {
     path:"/num",
     name: "AddNum",
     component: AddNum
   },
   {
     path:"/hw",
     name: "HelloWorld",
     component: HelloWorld
   },
 ]
})

index.js路由信息要被main.js加載,因此須要在src/main.js中導入路由對象

在main.js中的Vue對象中註冊了路由之後,那麼直接在App.vue文件中的html代碼裏面,顯示當前uri路徑對應的組件內容.

 

實現生成站內鏈接.可使用vue-router提供的路由標籤也可使用vue-router提供的this.$router

經過連接能夠切換路由標籤裏面對應的組件，連接的地址是上面index.js文件中定義的path值，不過連接標籤是"router-link",連接地址用'to'來定義：

<router-link to="/">站點首頁</router-link>
<router-link to="/num">AddNum</router-link>

代碼編寫:

效果:

連接地址中能夠傳遞參數，格式以下：

// name對應的是路由中定義的一個path對應的name屬性
   <router-link :to='{name:"UpDate",params:{code:item.code}}'>

有時候須要在組件的js中跳轉頁面，也就是改變路由，改變路由有下面這些方式：

// 當前頁面從新加載
this.$router.go('/user');
​
// 跳轉到另一個路由
this.$router.push({path:'/user'});
​
// 獲取當前的路由地址
var sPath = this.$route.path;

 

 

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程