vue組件，axios ,路由

組件（Component）自定義封裝的功能。

把一個功能相關的[HTML、css和javascript]代碼封裝在一起組成一個整體的代碼塊封裝模式，我們稱之為“組件”。

 組件就是一個html網頁中的功能，一般就是一個標簽，標簽中有自己的內容結構，樣式和特效。

默認組件

<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>

 

單文件組件

將一個組件相關的html結構，css樣式，以及交互的JavaScript代碼從html文件中剝離出來，

合成一個文件，這種文件就是單文件組件，相當於一個組件具有了結構、表現和行為的完整功能，

方便組件之間隨意組合以及組件的重用，這種文件的擴展名為“.vue”，比如："Home.vue"。

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>

2script編寫vue.js代碼

<script> export default {
name:"Home", // 該組件名
components:{} // 引用其他組件 ，存放位置
data: function(){
return {
num:0, //該組件需要用到的數據
}
}
}
</script>

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

scoped 只作用局部樣式
<style scoped>
  .sub,.add{
    border: 1px solid red;
    padding: 4px 7px;
  }
</style>

組件的嵌套

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

因為,產生了父組件調用子組件的情況.

傳遞數據

例如,我們希望把父組件的數據傳遞給子組件.

可以通過props屬性來進行傳遞.

傳遞數據三個步驟：

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

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

<template>
  <div >
    <button @click="num--">-</button>
    <input type="text" v-model="num">
    <button @click="num++">+</button>
    <--! 調用子組件,將父組件中的num 數據傳給子組件用，子組件把該值mynum 放在了 props對應的列表中-->
    <Menu :mynum="num" title="home中的非變量的數據"/>  <--! title 為父組件中的普通數據，前面不用加冒號-->
  </div>
</template>


<script>
  import Menu from './Menu' //導入子組件

  export default {
    name:'Home',
    components:{Menu,},
    data:function () {
      return {
        num:1,
      }
    },

  }
</script>


<style scoped>

</style>

 

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

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

<template>

  <div>
     <span>父組件Home傳來的數據：{{mynum}}</span>
      <span>自己組件中的數據：{{number}}</span>
    <span>這是父組件中傳來的普通數據：{{title}}</span>
  </div>
</template>


<script>

  export default {

    name:"Menu",
    props:['mynum',"title"], //父組傳來的數據
    components:{},
    data(){

      return {
        number:0, //該組件自己的數據
      }
    }
  }

 

 

 

總結：

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

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

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

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

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

   這種情況,在開發時,也被稱為"單向數據流"。

 

在組件中使用axios獲取數據

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

npm install axios     （jquery 的導入也類似）

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

import axios from 'axios' // 從node_modules 導包
Vue.prototype.$axios=axios // 將對象掛載到vue對象中   ,習慣插件左邊加個 $ 符號

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

<script>
  import Menu from './Menu' //導入子組件

  export default {
    name:'Home',
    components:{Menu,},
    data:function () {
      return {
        num:1,
      }
    },
    methods:{ get_weather:function () { this.$axios.get('http://wthrcdn.etouch.cn/weather_mini?city=深圳').then( function (response) { console.log(response); } ).catch(function (error) { console.log(error); }) } }

  }
</script>

路由（Router）

1 .安裝

npm install --save vue-router

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

 

2. 創建路由文件

路由文件可以直接創建在src目錄下，但是如果項目大了， 分成多個不同的大平台或者大的子項目，可以選擇分目錄保存路由，

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

src/router/backend.js // 后台路由

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

步驟 ：

　　1.在src 目錄下新建 一個文件夾  router ,在該文件夾下建一個 index.js  文件，在該文件下編寫一下代碼

1. 初始化路由對象

//導包
import Vue from 'vue' import Router from 'vue-router'

//導入組件

// import Home from '../components/Home'

// @ 表示的是src 的目錄路徑

import Home from '@/components/Home'
import Table from '@/components/Table'


// 讓 Vue啟用路由 Router
Vue.use(Router);

export default new Router({
// 聲明項目的路由列表
  routes:[
    {
      name:"Home" , // 在組件視圖中，以后生成url地址的別名，一般和主鍵名一致方便維護
      path:'/',// 用於訪問的路徑
      component:Home,//  這個不是字符串
    },
     {
      name:"Table" , // 在組件視圖中，以后生成url地址的別名，一般和主鍵名一致方便維護
      path:'/table',// 用於訪問的路徑
      component:Table,//  這個不是字符串
    },
  ]
})

　　2.  main.js 文件中    注冊路由信息

import Vue from 'vue'
import App from './App' //從別的路徑導包

import axios from 'axios' // 從node_modules 導包
Vue.prototype.$axios=axios // 將對象掛載到vue對象中
Vue.config.productionTip = false

import router from './router/index'


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

　　3.App.vue文件    顯示路由中對應的內容

   　　1. 展示 <router-view></router-view>
　 　　2. 在別的組件中寫： <router-link to="/">首頁</router-link>  跳轉。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>
    <Home/>
    <Table></Table>
    <!--<Menu></Menu>-->
    <router-view></router-view>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'
import Home from './components/Home'
import Table from './components/Table'
import Menu from './components/Menu'

export default {
  name: 'App',
  components: {
    HelloWorld,
    Home,
    Table,
    Menu

  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

在終端 切換到該項目根目錄下，開啟服務： 

npm run dev