js高级开发

# vue.js高级开发

# 代码封装的关键

相同的流程，写死不同的地方，单独配置

# 代码封装的作用

复用（20%）易于维护和管理（80%）代码量（200）代码拆分取一个表示作用的命名

 import().then({} => {
 })

1
2

# 了解认识组件(component)

相似的页面，在不同的地方出现两次以上，我们可以考虑封装成为组件，在不同的地方上使用

总体思路（从易到难，从顶层到细节） 1、引入属性，主要是页面中，哪些页面可以根据需要显示或者删除 2、引入插槽，利用slot占位（需要在使用的时候，改变的地方，我们要留下插槽，以便于组件的通用性）

# 组件的封装细节

利用v-bind="$attrs" 和 v-on="$listeners" 来处理重要的组件的数据绑定与实践绑定
遇到耦合性比较强的页面，我们可以直接使用$parent来指向引用我们的父组件
表格里面的列数据，可以直接使用数组来配置使用，也可以直接在引用时插入组件

# 认识render函数

建立reader函数的方法 vue文件里面不包含tmeplate模板

2、认识createElement函数 createElement一般可以简写做h,参数一般有4个，其中第一个是必须的，其他的都是可选的 h(元素、元素的各种属性说明、元素的子元素、元素的内容（一般指文本））

h函数里面的元素说明对象、即第二个参数，它是一个对象

{
  'class':{   // 相当于我们平时在模板中使用的:class
  },
  style: {   // 相当于模板:style
  },
  attrs: {  // 表示原生标签是上的一些属性
  },
  props: {  // 自定义组件上的自定义属性
  },
  on: {   // 自定义组件上经过emit触发的自定义事件
  },
  nativeOn: {  // 原生的事件
  }，
  domProps： {  // 标签的DOM值
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3、如何使用原生js来代替常用的指令

   v-if(if)
   v-for(map)
   v-model(domProps: value = this.text rativeOn:input)
   v-on

1
2
3
4

← 认识axios 表单验证插件 (vee-validate)→