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) 业务实现
    张三，栏目管理
    李四，文章管理