封装自定义vue指令

1. 封装输入框自动聚焦指令

• 在utils工具包中创建directives.js文件复制自动聚焦指令代码
• 在main.js中引入directives.js文件, 并全局注册
• 在需要自动聚焦的input或者textarea标签上添加 v-focus 指令

import direcitve from '@/utils/directives' // 全局指令插件

Vue.use(direcitve) // 注册插件-对象内install方法就被执行了

//directives.js

// 采用Vue插件开发方式
// Vue.use()
// 方式1: 传入对象(带install方法) - 给Vue添加全局的东西(Vue插入插件)
// 方式2: 传入函数体
import Vue from 'vue'
const obj = {
  install () {
    // Vue.prototype.$属性=值
    // 全局自定义指令
    Vue.directive('focus', {
      // v-focus标签被插入到真实DOM上, 此方法才会执行
      inserted (el) { // el:指令所在的原生标签
       //判断是否是input或者textarea标签
        if (el.nodeName === 'INPUT' || el.nodeName === 'TEXTAREA') {
          el.focus() //如果是就调用原生标签的focus()方法自动聚焦
        } else {
          // 再获取内部input一下
          const inp = el.querySelector('input')
          const t = el.querySelector('textarea')
          if (inp.nodeName === 'INPUT' || t.nodeName === 'TEXTAREA') {
            inp.focus()
          } else {
            console.error('指令请在输入框上使用') //如果没有在input或者textarea标签上使用就报错
          }
        }
      }
    })
  }
}

export default obj

@vue/cli脚手架

如何搭建ue@cli脚手架环境

1. 下载@vue/cli在终端全局安装
   npm -g i @vue/cli
yarn global add @vue/cli
2. 安装后查看vue版本号
   vue -v

如何用脚手架创建项目并启动

1. 在终端执行命令 vue create 项目名
2. 选择模板
3. cd 项目名(切换到项目文件夹)
4. npm run sever 或 yarn sever(启动项目)
5. 打开页面启动成功

tree组件 树形数据转化

• 依赖两个条件: id字段和pid字段
• 核心思路: 寻找父节点

1. 先遍历一遍数据,把数据的id作为key ,自身作为value组成一个对象(map)结构
2. 遍历一遍数据,通过每一项的pid去和1中形成的map的key去匹配,如果匹配的到说明是他的子节点,就把它添加到children属性中,匹配不到就是根节点,添加到返回的新数组

//在src/utils/transTreeData.js中
export function transTreeData(list){
 const newlist =[]
 const map={ }
  list.foreach((item)=>{      
      item.children = [] //在每一项中都创建children属性
      map[item.id] = item //把每一项的id做为key,把每一项本身作为vaule存入map对象中
  })
 list.foreach((item)=>{
    if(map[item.pid]){ //把pid作为key去匹配map中的key
        map[item.pid].children.push(item) //有就把它添加到该节点的children数组中
     }esls{
        newlist.push(item) //匹配不到就把这一项作为一级节点添加到新数组中
     }
  })
return newlist
}

props和data为什么必须是函数?

• 组件存在的根本目的是为了复用,如果不定义成函数,每个复用的组件 用的都是同一份数据 一改全改 互相影响,
• 改造成函数以后 函数return 出去的对象是个全新的内存空间的对象,互相不影响