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