Vue2.0基础-温故而知新-part2

心虚的Aki
192 阅读4分钟

2.1 组件基本概念(P53~P60)

  • 组件：实现应用中局部功能代码和资源的集合。将页面拆分，内容封装，按需引入。
  • 组件化优势：复用性强、便于维护
  • 非单文件组件（开发时不用）：一个文件中有多个组件, a.html里有多个组件
    • Vue.extend({})创建组件，创建时配置项中不要写el，而是由vm管理组件（Vue.extend()也可以省略）
    • 在vm配置项中components里局部注册组件，多个组件放在一个对象里
    • 在模版中使用组件标签
  • 组件名：不用小驼峰，多个单词之间用-相连，或者大驼峰（vue-cli中）
  • VueComponent构造函数：
    • 组件的本质为VueComponent构造函数
    • 模板中使用组件标签时，Vue会生成VueComponent的实例对象
    • 每次调用Vue.extend时，都会生成一个全新的实例对象，并且组件配置项中函数的this指向为VueComponent实例对象
  • 重要的关系：VueComponent.prototype.__ proto__ === Vue.prototype，即把VueComponent原型对象的原型对象由Object的原型对象改为Vue的原型对象，目的是将组件实例对象可以访问到Vue原型上的属性和方法
  • 单文件组件：一个文件中只有一个组件，a.vue
    • < template > 标签中写组件的结构
    • < script > 标签中写交互
    • < style > 标签中写样式
    • App.vue领导所有组件，main.js中只有App.vue

2.2 脚手架Vue-cli(P61～P64)

  • 脚手架是Vue的标准化开发工具
  • main.js：整个项目的入口文件
    • render函数：作用是（当使用精简版的vue.js时）将APP放入容器中，接受的参数为createElement函数（用h代表）
  • App.vue：统领其他组件的父组件
  • vue.config.js 对脚手架进行个性化定制

2.3 特殊标签属性(P65）

  • key属性（见v-for）
  • ref属性：给元素或子组件打标识（相当于id），可以通过vc.$refs.xxx拿到对应的HTML元素（给DOM元素标签上添加ref属性）或对应的vc（给组件标签上添加ref属性）。

2.4 给组件传输数据(P66)

  • 组件内借助props配置项准备接收
    • 数组形式简单接收：props为需要参数变量组成的数组，默认接收都是字符串
    • 对象形式：可以限制接收的类型
        props: {
       variable: Number
    }
    • 对象形式：限制类型+默认值指定+必要性限制
        props: {
      variable: {
        type: Number,
        default: 1,
        required: true
      }
    }
  • props适用的数据传递（不能跨级）
    • 父组件调用组件时，在标签属性中传入
    • 子给父传数据（见P72）：需要父先给子一个函数
    //父组件中准备好方法，传给子
methods: {
    receive(x) {
        //x为收到的数据
    }
}

    //子组件中调用函数，参数为想要传输的数据
this.receive(x)
  • 接收到的数据不要修改
  • 优先级高于data内的数据

2.5 混入mixin 配置项(P67)

  • 不同组件共享一个配置（例如共用的methods、data，所有配置项都可以），写在mixin.js文件中
  • 局部混入：组件的配置项中添加mixins配置项接收这些公用配置 
    //mixins配置项为数组形式
    mixins: [mixin1, mixin2]
  • 全局混入：在main.js中引入，并调用Vue.mixin() 
        Vue.mixin(mixin1)
    Vue.mixin(mixin2)
  • 优先级低于已有的配置项（生命周期钩子是例外，私有的和混入的钩子共同发生，并且混入的先调用）

2.6 插件(P68)

  • 本质为包含install方法的对象，写在plugins.js中
  • install()第一个参数是Vue，之后的参数是插件使用者传入的数据
  • 插件的使用：在main.js中引入+应用 Vue.use(plugins)
  • 可以操作Vue原型对象，使用插件后，vm与vc上都能用

2.7 组件的自定义事件(P80~P82)

  • 区别于内置事件（click keyup等给HTML元素使用的事件）
  • 是一种子组件给父组件传递数据的方式
  • 创建方法一：写在组件的标签中
    <Child @customEvent="callBack"/>
  • 创建方法二：在钩子函数中利用api:$on，结合ref属性给对应的组件实例上创建自定义事件
    mounted() {
      this.$refs.child.$on('customEvent', this.callBack)
    }
    //注意，此处的callBack要在父组件的methods中提前配置好，不要直接在$on的参数中写（避免this指向问题）
  • 触发：想要触发事件就要到对应组件的实例对象中调用$emit()方法，可以实现子向父传递数据
    this.$emit('customEvent', paraments)
  • 解绑：到对应组件的实例对象中调用$off()方法，一次解绑多个自定义事件时参数为数组，不传参数时解绑全部自定义事件。当组件被销毁时，自定义事件都会无效。
    • 注意点：想给组件添加原生DOM事件，需要与自定义事件区分，添加.native修饰符

2.8 全局事件总线(P84~P85)

  • 实现任意组件间传递数据
  • 使用一个不属于任何组件但每个组件都可以访问的中介组件，利用2.1的“重要的关系”创建
    new Vue({
      ...
      // 在beforeCreate钩子中，给Vue原型对象上添加全局事件总线（$bus），$bus为Vue实例对象（即拥有$on、$emit、$off等API）
      beforeCreate() {
        Vue.prototype.$bus = this
      }
    })
  • A给B传递数据：
    • A中利用$emit发送数据
    • B中给$bus绑定自定义事件，并在B中写好回调，记得在钩子中解绑自定义事件

2.9 消息订阅与发布(P87)

  • 另一种任意组件间传递数据的方法
  • 使用第三方库来实现，例如pubsub-js
    • 订阅方（即接收方）：pubId = pubsub.subscribe('消息名', callBack(消息名, 消息内容))
    • 销毁订阅：pubsub.unsubscribe(pubId)
    • 发布方：pubsub.publish('消息名', 消息内容)

2.10 Vue封装的动画与过渡(P91～P95)

  • 在操作DOM元素时，Vue会根据时机给元素添加类名
  • 元素出现时：v-enter（进入起点） v-enter-to（进入终点） enter-active（进入过程当中）
  • 元素消失时：v-leave v-leave-to leave-active
  • v是默认名，也可以具体指定，在transition标签的name属性中指定
  • 写法：准备好样式、用transition标签包裹、用动画或者过渡实现

2.11 解决AJAX跨域问题(P96~P97)

    module.exports = {
      devServer: {
        proxy: {
          '/api': { //匹配所有以/api开头的请求路径
            target: '<url>',
            pathRewrite: {'^/api': ''}, //发送给服务器时去掉前缀api
          },
          ... //可以配置多个代理
        }
      }
    }

2.12 第三方样式的引用(P98)

  • 在App.vue中使用import引入第三方库时会有严格的资源检查，容易编译失败
  • 在index.html中使用< link >引入，并把第三方库放在相同的文件夹中，并且src使用相对路径

2.13 插槽slot(P102

  • 在父组件的template的子标签的标签体之中写入的内容，Vue会将其放在子组件template的slot标签中、
  • 即：谁调用谁准备放入的东西，谁被调用谁写slot准备位置
  • 具名插槽：区分多个插槽
    • slot标签的name属性进行区分，在插入时使用slot属性一一对应（或者在template标签中使用v-slot: 来对应）
    父组件：
    <Category>
      <template slot="header">
        <div></div>
      </template>
    </Category>
    
子Category组件：
      <template>
        <slot name="header"></slot>
        <slot name="footer"></slot>
      </template>
  • 作用域插槽：数据在子组件内，但根据数据生成的结构在父组件中决定 
    通过作用域插槽，将子组件中的movies数据传给父组件
父组件：
    <Category>
      <template scope="{movieData}">
        <div></div>
      </template>
    </Category>
    
子Category组件：
      <template>
        <slot :moives="movies"></slot>
      </template>
avatar
文章
阅读
粉丝