11-vue_day07

day07內容

12.渲染函數
echarts 圖表 （基於dom）
echarts 圖表 （基於vue - 渲染函數）
語法：
渲染函數的出現是給編程者操作dom的底層接口，但是沒有這個東西，絕大多數業務都可以滿足（一般建議在vue中使用dom）
render函數首次執行是在beforeMount之前，在mounted之後，因爲render的本質就是完成數據綁定的過程。
當dom中綁定的數據發生改變的時候，render函數就會執行
對比template
template屬性
Vue.component(‘briup-alert’,{
template:<div id="one">{{message}}</div>,
data(){
return {
message:“hello”
}
}
})
render函數
Vue.component(‘briup-alert’,{
data(){
return {
message:“hello”
}
},
render(createElement){
return createElement(‘div’,{
attrs:{
id:‘one’,
},
domProps: {
innerHTML: this.message
},
})
}
})
案例： 在vue腳手架中使用echarts
案例：高德地圖
1) 成爲開發者（註冊）
2) 創建應用，獲取key碼
3) 引用高德地圖的api
4) 編程
注意：
對於地圖、圖表的庫的引用建議使用script方式在public/index.html中使用，這樣可以減少bundle的大小。
13.動態組件
< keep-alive>
< component :is=“currentPage”>< /component>
< /keep-alive>
1) keep-alive是用於保存組件的狀態
2) component 表示定義一個動態組件，當前加載哪個組件取決於is的屬性值，is的值爲當前組件的組件名稱
14.style與class綁定
style綁定

    1) 靜態綁定
    <div style="color:red;font-size:12px">hello world</div>

    2) 動態綁定-字符串
    <div :style="style">hello world</div>
    data:{
      style:"color:red;font-size:12px"
    }

    3) 動態綁定-對象
    <div :style="style">hello world</div>
    data:{
      style:{color:"red",font-size:"12px"}
    }

    4) 動態綁定-數組
    <div :style="style">hello world</div>
    data:{
      style:[{color:"red"},{font-size:"12px"}]
    }
  class綁定
    1) 靜態綁定
    <div class="article red">hello world</div>

    <style>
      .article {
        font-size:12px;
      }
      .red {
        color:red;
      }
    </style>

    2) 動態綁定-字符串
    <div :class="clazz">hello world</div>
    data :{
      clazz:"article red"
    }

    3) 動態綁定-數組
    <div :class="clazz">hello world</div>
    data :{
      clazz:["article","red"]
    }

    4) 動態綁定-對象
    <div :class="clazz">hello world</div>
    data :{
      clazz:{
        article:true,
        red:true
      }
    }

***15.使用vue cli完成看點資訊系統（登錄頁面，資訊管理頁面，欄目管理頁面）***
  1) 技術棧
    vue-cli
    vue + jquery ajax + elementui 
    ajax
  2) 安裝第三方模塊
    1. 通過script方式直接導入
      地圖、圖表（基於dom）、jquery
    2. 通過npm方式導入
      vue生態
      vueRouter、vuex、 elementui
      1) 手動安裝並且進行配置
      2) 使用vue/cli插件功能
        > vue add element 
        按照提示的問題進行相應的配置即可
  3) 前端架構
    架構師：
    完成認證機制
    完成路由機制
  4) 業務實現
    張三，欄目管理
    李四，文章管理