Vue 组件化开发

• 渲染用户列表 v-for v-if
• 录入功能 v-model v-on:click
• 删除用户 Array.splice(index,1)
• 删除所有
• 学员筛选功能 computed

class属性动态控制的语法

参考文档

1. 单独使用三目运算

2. 单独使用对象

3. 单独使用数组

4. 数组+三目运算

<button 
  v-for="(tabname,tabidx) in tabArr" 
  :class="['btn',tabidx==status?'btn-danger':'']" 
  @click="status=tabidx"
  type="button"
>
  {{tabname}}
</button>

5. 数据+对象

一、组件化介绍

1. 什么是组件化？

将可复用的代码块，封装为独立的整体，进行复用

2. 为什么要采用组件化？

降低代码冗余度、提高开发效率、节省开发成本

3. 如何实现组件化？

• 结构 HTML
• 样式 CSS
• 功能
  • Javascript
  • JQuery
  • Vue

二、vue中组件化

先注册、后使用 vue项目中的组件，都是一个独立的.vue 单文件组件，在项目中可以随处调用

1. 全局注册

Vue.component('my-select',{  //全局注册
    template:`<div class="my-select"></div>`
})

2. 局部注册

new Vue({
    el:'#app',   //占地盘
    components:{
        'my-select':{  //局部注册
            template:`<div class="my-select"></div>`
        },
        'my-model':{}
    }
})

3. 组件的复用性

开放封闭 原则

• 开放 给组件的使用者，提供一些接口，可以对组件的表现进行自定义
• 封闭 组件内部通用的能力，必须事先写好，方便使用者调用

三、props组件传参

让组件的调用者，向组件内部传递数据

1. 在组件内部定义props

Vue.component('my-select',{  //全局注册
    props:['list','num']
})

2. 在调用组件的时候，传递props

<my-select :list="skill"></my-select>

3. 命名规范

• 全小写 list
• 小驼峰 listData
• 大驼峰 ListData
• 烤串命名法 list-data

4. props 命名要求

• props定义为全小写，传递props也用小写
• 组件内部用小驼峰定义props【listData】,调用组件的时候用烤串命名法传递 list-data

四、组件内部可以使用那些配置项？

1. new Vue实例内部的配置

• el

• data

• computed

• watch

• methods

• created 等

2. Vue.component 组件内部的配置

• template

• data 必须是函数，里面return对象数据

• props 组件特有的，允许组件的调用者，向组件内部传递数据

• computed

• watch

• methods

• created 等

select组件封装

尝试实现其内部交互