11-vue_day06

day06內容

11.高級組件
1) 組件參數的傳遞
1. 基礎
組件聲明
briup-info,{
template:``,
data(){},
props:[“visible”] // 形式參數，期望父組件傳遞給子組件的參數
}
組件調用

在調用briup-info這個組件的時候，傳遞了一個參數爲visible，值是一個字符串’true’

        <briup-info :visible="true"/>
        在調用briup-info這個組件的時候，傳遞了一個參數爲visible，值是一個布爾類型true

        <briup-info :visible="1"/>
        在調用briup-info這個組件的時候，傳遞了一個參數爲visible，值是一個number類型的1

        <briup-info :visible="{name:'terry'}"/>
        在調用briup-info這個組件的時候，傳遞了一個參數爲visible，值是一個對象 {name:"terry"}

        <briup-info :visible="[1,2,3]"/>
        在調用briup-info這個組件的時候，傳遞了一個參數爲visible，值是一個數組[1,2,3]

    2. 參數類型聲明
      1) 組件聲明
        briup-info,{
          template:``,
          data(){},
          props:{
            visible:Boolean,
            title:String
          }
         }
      2) 組件調用
        <briup-info :visible="true" title="one"/>
        <briup-info :visible="isVisible" title="one"/>

        data:{
          isVisible:true
        }
  2) 單向數據流
    父組件  ------> 子組件
    (變量)          顯示
    visible         v-if="visible"  
      true                顯示
      false               隱藏

    千萬記住，在組件中不要直接改變父組件傳遞過來參數
  3) 自定義事件
    父組件  <------ 子組件  
    父組件通過@xxx監聽
    子組件通過this.$emit('xxx')，通知父組件,父組件進行變量的修改
  4) 插槽
    通過slot標籤來接收父組件傳遞過來的子模板
    參數模板傳遞

    組件定義：
      my-test
      template:`
        <div>
          {{title}}
          <slot name="header"></slot>
          <slot name="footer"></slot>
        </div>
      `
      props:{title:String}
    組件調用
      簡單方法
      <my-test title="helloworld">
        <h2 slot="header">你好，世界</h2>
        <h3 slot="footer">你好，世界</h3>
      </my-test>

      推薦方法
      <my-test title="helloworld">
        <template v-slot:header>
          <h2 >你好，世界</h2>
        </template>
        <template v-slot:footer>
          <h3>你好，世界</h3>
        </template>
        
      </my-test>

      helloworld  -> title
      h2標籤      -> slot

  5) 回調插槽
    回調函數的思想來理解作用域插槽
     
12.渲染函數
13.動態組件
14.style與class綁定
15.使用vue cli完成看點資訊系統（登錄，資訊管理頁面，欄目管理頁面）

16. 腳手架
  1) 介紹
  html + css + js   => 瀏覽器
  腳手架（生產線）【解耦】
  vue => html + css + js => 瀏覽器
  項目結構搭建：
    手動搭建
      1. 前端結構
        index.html
        style
        js
        images

        js不能以模塊分割形式進行開發，不利於分工協作
      2. 第三方框架有些是隻提供腳手架形式的引用（npm）
    腳手架
      特別厲害的架構師給我們搭建了一個項目結構，我們在這個結構基礎上進行開發即可

      babel     es6 --> es5   -> 運行在瀏覽器中
        開發項目形式就編程了模塊化的開發
      webpack   構建工具
        模塊化開發 -> 模塊的整合（打包） -> 整體
        組件的封裝的css很難處理, webback可以處理css模塊
        webpack還能處理各種文件，一切皆模塊
        webpack提供了一些插件，webpack server 
        自動化開發過程：

        項目項目初始化 -> 寫代碼 -> 測試->  打包 ->部署（將代碼部署在服務器中）

          【老師可能爲大家安裝apache服務器】
  
  2) 應用
    1. 安裝腳手架生成工具
      > cnpm install -g @vue/cli
      # 測試
      > npm --version
      @vue/cli 4.3.1
    2. 通過腳手架初始化項目(自動幫我們安裝了依賴，所以無需再去安裝)
      # 進入到工作目錄 ， 加入 d:/briup/vue
      > d:
      > cd briup/vue
      > vue create app01
    3. 安裝項目所需要的依賴
      > cd app01
      > cnpm install  （無需）
    4. 運行項目
      > npm run serve
    5. 改造項目

  3) vue的目錄結構
    node_modules    依賴
    public          js附着在html中
    src             源碼，使用js模塊化開發的頁面
    babel.config.js babel配置文件

  4) 在vue腳手架中，每一個組件都是一個文件，這個文件使用.vue作爲後綴
    1. 頁面組件
      文章頁面  Article.vue
      欄目頁面  Category.vue
      學校頁面  School.vue
    2. 功能組件
      表格    Table.vue
      列表    List.vue
    
    組件元素：
      <template></template>       模板
      <script></script>           腳本
      <style></style>             樣式

---

npm yarn
都屬於包管理機制
npm是node自代的，安裝完成nodejs之後可以直接使用npm
yarn是第三方的，先手動安裝yarn纔可以使用yarn

1. 安裝
   cnpm install yarn --global
   yarn xxx