VUE零碎小技巧1

1、回顾

• 创建项目 vue create myapp

• 准备 scss 库

• 修改了页面的主结构 App.vue 构建页面的基本结构

• 分离页面主结构，创建各个页面组件 views

views/home/index.vue + views/home/store.js

• 配置各个页面的路由结构 router/index.js

• App.vue 中添加路由视图

• 页面底部导航添加点击链接

• 配置UI库 - vant 、 mint-ui / element-ui 、iview

• 结合状态管理器 编写 每一个页面的业务逻辑

• 项目打包 cnpm run build ---- dist文件夹

day04/myapp

2、slot分发内容 -- 插槽

**组件中内容是显示还是不显示，在哪里显示，如何显示，这就是内容分发所干的活

**

默认情况下，调用组件时，内部写内容是不会显示的，如果想要显示，就需要使用到插槽

// 定义组件
<template>
  <header class="header">
    <ul>
      <li>左</li>
      <li>中</li>
      <li>右</li>
    </ul>
  </header>
</template>
// 使用组件
<Header>
  你好！！！！！
</Header>

浏览器中并未显示 你好！！！！！

定义组件添加 slot 标签，可以使组件的内容显示

// 定义组件
<template>
  <header class="header">
    <ul>
      <li>左</li>
      <li>
        <!-- +++++++++++++++++++++++++++++ -->
        <slot>中</slot>
      </li>
      <li>右</li>
    </ul>
  </header>
</template>
// 使用组件
<Header>
  你好！！！！！
</Header>
<Header></Header>

第一个中间显示 您好！！！！ 第二个中间显示的是默认的 中

如果组件的结构都需要 可 自定义传递 ----- 具名插槽

// 定义组件
<header class="header">
  <ul>
    <li>
      <slot name="left">左</slot>
    </li>
    <li>
      <slot>中</slot>
    </li>
    <li>
      <slot name="right">右</slot>
    </li>
  </ul>
</header>
// 使用组件
<Header>
  你好！！！！！
</Header>
<Header></Header>
<Header>
  <div slot="left" @click="clickLogo">logo</div>
  <div>首页</div>
  <div slot="right">扫一扫</div>
</Header>
<Header>
  <div slot="left" @click="back">返回</div>
  <div>详情</div>
  <div slot="right">分享</div>
</Header>

可以给各个组件添加不同的事件

组件中内容是显示还是不显示，在哪里显示，如何显示，这就是内容分发所干的活

一般在 自定义组件 和 UI 库使用时居多，可以提高组件的 复用性

3、ref

可以获取DOM节点

<template>
  <div class="home">
    <h1 ref="title" id="title">标题</h1>
    <p ref="desc" id="desc">段落描述</p>
    <button @click="getDOM">获取DOM节点</button>
  </div>
</template>

<script>
export default {
  methods: {
    getDOM () {
      console.log(document.getElementById('title'))
      console.log(document.getElementById('desc'))
      console.log('----------------------')
      console.log(this.$refs.title)
      console.log(this.$refs.desc)
    }
  }
}
</script>

获取子组件的数据

<template>
  <div class="home">
    <Reftest ref="test" />
    <button @click="getData">获取子组件的数据</button>
  </div>
</template>

<script>
import Reftest from '@/components/Reftest'
export default {
  components: {
    Reftest
  },
  methods: {
    getData () {
      console.log(this.$refs.test.msg)
    }
  }
}
</script>

4、$parent

子组件可以直接获取父组件中的数据和方法

<template>
  <div>
    <button @click="getData">子组件直接获取父组件的数据</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      msg: 'child-----------------------------'
    }
  },
  methods: {
    getData () {
      // ++++++++++++++++++++
      console.log(this.$parent.message)
    }
  }
}
</script>

5、混入mixins

组件中的相同部分抽离为一个 js 模块，使用组件的混入选项导入即可,如果有相同的部分，以组件的选项为主

mixins/header.js

import Header from '@/components/Header'
export default {
  components: {
    Header
  },
  methods: {
    userFn () {
      console.log('个人中心')
    }
  }
}

Home.vue

<template>
  <div class="home">
    <Header>
      <div>首页</div>
      <div slot="right" @click="userFn">我的</div>
    </Header>
  </div>
</template>

<script>
import header from '@/mixins/header'
export default {
  mixins: [header]
}
</script>

About.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <Header>
      <div>关于</div>
      <div slot="right" @click="userFn">我的</div>
    </Header>
  </div>
</template>
<script>
import header from '@/mixins/header'
export default {
  mixins: [header],
  methods: {
    userFn () {
      console.log('about - 个人中心')
    }
  }
}
</script>

简化组件的代码 ----- 提交组件的复用性

6、自定义指令

• v-model/v-if/v-else-if/v-else/v-show/v-for/v-on/v-bind.....

<input type="text" autofocus/>

• 自定义指令实现 自动获取焦点

全局的自定义指令 Vue.directive() ---- main.js

Vue.directive('focus', { // 此处不是一个函数
  // 当被绑定的元素插入到 DOM 中时……
  inserted: (el) => { // el代表DOM元素
    el.focus() // js操作DOM
  }
})

局部的自定义指令 { directives: {}} -- 哪里使用哪里定义 --- Home.vue

export default {
  directives: {
    'focus': {
      inserted: (el) => {
        el.focus()
      }
    }
  }
}

使用指令 v-name name为自定义指令的名称

<input type="text" v-focus>

7、过滤器

全局过滤器 --- main.js

Vue.filter('sexFilter', (val) => {
  return val === 0 ? '女' : '男'
})

局部过滤器 --- 哪里使用哪里定义 --- Home.vue

filters: {
  lessonFilter (val) {
    return val === 1 ? '一阶段' : val === 2 ? '二阶段' : '三阶段'
  }
}

使用 {{ val | filtername }}

8、路由的过渡效果

页面间切换效果

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <!-- transition 包裹 设置name值，设置css -->
    <transition name="slide">
      <router-view/>
    </transition>
  </div>
</template>

<style lang="scss">
* { padding: 0; margin: 0; list-style: none}
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-enter {
  // 定义进入过渡的开始状态
  transform: translateX(100%);
}
.slide-enter-active {
  // 定义进入过渡的开始状态
  transition: all 300ms;
}
.slide-enter-to {
  // 完全进入
  transform: translateX(0%);
}
.slide-leave {
  // 开始离开
  transform: translateX(0%);
}
.slide-leave-active {
  transition: all 0;
}
.slide-leave-to {
  transform: translateX(-100%);
}
</style>

9、nextTick

• 状态改变，视图渲染，实际上DOM节点的值并未及时发生改变，使用nextTick可以解决此问题

<template>
  <div class="home">
    <div ref="test"> {{ count }} </div>
    <button @click="getData">加1获取div的值</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      count: 0
    }
  },
  methods: {
    getData () {
      this.count++

      // console.log(this.$refs.test.innerHTML) // 是上一次的DOM节点的值
      this.$nextTick(() => {
        console.log(this.$refs.test.innerHTML)
      })
    }
  }
}
</script>