vue知识目录

一 vue基础知识

基本代码结构，插值表达式，vue常用指令：v-text v-html v-bind(简写 ：) v-on (简写 @) v-model v-for (key) v-if v-show v-cloak v-once 过滤器 ,键盘修饰符, 父子传值

兄弟组件传值

• 通过中央通信 let bus = new Vue()

A：methods :{ 函数{bus.$emit(‘自定义事件名’，数据)} 发送

B：created （）{bus.$on(‘A发送过来的自定义事件名’，函数)} 进行数据接收

自定义指令

<input type="text" v-model="searchName" v-focus v-color="'red'" v-font-weight="900">
directives: {
        color: { // 为元素设置指定的字体颜色
          bind(el, binding) {
            el.style.color = binding.value;
          }
        },
        'font-weight': function (el, binding2) { // 自定义指令的简写形式，等同于定义了 bind 和 update 两个钩子函数
          el.style.fontWeight = binding2.value;
        }
      }

事件修饰符：

• .stop 阻止冒泡
• .prevent 阻止默认事件
• .capture 添加事件侦听器时使用事件捕获模式
• .self 只当事件在该元素本身（比如不是子元素）触发时触发回调
• .once 事件只触发一次

vue如何获取dom

先给标签设置一个ref值，再通过this.$refs.domName获取，例如：

<div ref="test"></div>

const dom = this.$refs.test

二 vue进阶

生命周期，vueX, vue-router, axios,动画，组件 watch :监听一个值的变化，执行相应函数 computed :计算属性 ，插槽

三 vue高级

路由守卫，axios封装,