Vue基础

生命周期

Vue中实例 在创建 –> 销毁

  1. 创建
  2. 初始化数据
  3. 编译template
  4. 挂载DOM
  5. 渲染
  6. 更新渲染
  7. 卸载
  • beforeCreate：实例创建之初 初始化插件
  • created组件已经创建完成 异步请求获取 DOM 并没有生成
  • beforeMount：组件挂载之前
  • mounted：组件挂载之后 异步请求获取 render dom 更新 页面变化
  • beforeUpdate：数据发生变化 更新之前
  • updated：数据发生变化更新后
  • beforeDestroy： 实例销毁前
  • destroyed：销毁后
  • activated： keep-alive 组件激活
  • deactivated：keep-alive 组件停用
  • errorCaptured： 捕获实例的错误

双向绑定 v-model

双向绑定大多用于表单事件，通过监听使用者输入的事件来更新内容。

现阶段大部分工作在App.vue上，template与普通写法一致，js写法：

1
2
3
4
5
6
7
8
9
export default {
  name: 'app',
  data() {
    return {
      title: 'vue.js',
      myname: '请输入名字',
    };
  },
};

去掉空白符.trim

直接在v-model后加上.trim即可。

1
<input type="text" v-model.trim="name" value="name" />

懒加载.lazy

在离开input时才更新输入的内容，在v-model后加上.lazy即可。

限定输入数字.number

在v-model后加上.number即可。

遍历 v-for

遍历有一个基本的模板：

1
2
3
4
5
<div id="app">
  <ul v-for="(item,index) in member" :key="index">
    <li>{{item}}</li>
  </ul>
</div>

组件 component

在App.vue中引入components中的组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
  <div id="app">
    <Card />
  </div>
</template>

<script>
  import Card from './components/Card'

  export default {
    components: {
      Card
    }
  }
</script>

数据传递 props

1
2
3
4
5
<template>
  <div id="app">
    <Card :cardData="cardData" />
  </div>
</template>

其中:cardData="cardData"是这个组件的核心，用于绑定属性cardData。其他数据展示工作放在Card.vue组件中进行。

See the Pen props接收数据 by whjin (@whjin) on CodePen.

这里解析一下<div class="card_wall"></div>包裹<div class="card"></div>主要是方便后期应用扩展，以及让应用整体更稳定。

指令

v-once 指令

第一次渲染完成后变为静态内容，其下的所有子元素都是这样的效果。

v-pre 指令

v-pre指令会让指定元素被忽略。

v-cloak 指令

v-cloak指令用于去除页面渲染数据时出现闪现的情况，使用方法：

1
2
3
4
5
6
7
8
9
10
11
<template>
  <div id="app">
    <div v-cloak>${ item.title }</div>
  </div>
</template>

<style>
  [v-cloak] {
    display: none;
  }
</style>

v-html 指令

v-html指令会把html标签渲染成DOM显示在页面上。

v-html指令只能对可信任的用户使用，否则容易受到XSS攻击。

动画

Vue动画一般在真正需要使用的情况下才加入页面，推荐在CSS中使用动画。

加入渐变的时机

  1. v-if条件渲染
  2. v-show条件显示
  3. 动态组件
  4. 组件的根节点

渐变的分类

  1. v-enter定义进入渐变时开始的样式。
    • 只存在组件插入前，组件插入后就移除。
  2. v-enter-active定义进入渐变的过程效果，可以设定渐变过程的时间（duration）和速度曲线（easing curve）。
    • 在组件被插入前生效，在完成动画时移除。
  3. v-enter-to定义进入渐变后结束的样式。
    • 在组件被插入后生效，同时v-enter被移除，并在完成进入渐变动画时移除。
  4. v-leave定义离开渐变时开始的样式。
    • 在触发组件离开渐变时生效，接着马上移除。
  5. v-leave-active定义离开渐变的过程效果，可以设定渐变过程的时间（duration）和速度曲线（easing curve）。
    • 在触发组件离开渐变时生效，在完成动画时移除。
  6. v-leave-to定义离开渐变后结束的样式。
    • 在触发组件离开渐变时生效，同时v-enter被移除，并在完成离开渐变动画时移除。

transition 自定义名称

1
2
3
4
5
6
7
8
9
10
<template>
  <div id="app">
    <div class="main">
      <button @click="change = !change">縮放控制器</button>
      <transition name="zoom">
        <div v-if="change" class="ant_man_style"></div>
      </transition>
    </div>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
.zoom-enter,
.zoom-leave-to {
  width: 0px;
  height: 0px;
}
.zoom-enter-active,
.zoom-leave-active {
  transition:
    width 1s,
    height 1s;
}

animation

可以使用 CSS 中的animation动画设计更为华丽的效果。

1
2
3
4
5
6
7
8
9
10
.zoom-leave-active {
  animation: special_effects 1.5s;
}

.zoom-enter-active {
  animation: special_effects 1.5s reverse;
}

@keyframes special_effects {
}

transition 自定义动画类别

除了在<transition>中设定name自定义前缀（属性），还可以预设动画类别。

  • enter-class定义进入动画时开始的样式。
  • enter-active-class定义进入动画的过程效果。
  • enter-to-class定义进入动画后结束的样式。
  • leave-class定义离开动画时开始的样式。
  • leave-active-class定义离开动画的过程效果。
  • leave-to-class定义离开动画后结束的样式。

以上六个自定义属性优先级别高于一般渐变类别。

CSS 动画库：Animation.css

JavaScript 钩子

<transition>还可以绑定 JavaScriptHooks，除了单独使用，也能结合 CSS transition和animations一起使用。

  • beforeEnter(el)在进入渐变或动画前生效。
  • enter(el,callback)在进入渐变或动画的组件插入时生效。
  • afterEnter(el)在进入渐变或动画结束时生效。
  • enterCanceled(el)在未完成渐变或动画时取消。
  • beforeLeave(el)在离开渐变或动画前生效。
  • leaveCancelled(el)在未完成渐变或动画时取消。
1
2
3
4
5
6
7
8
9
10
11
12
<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @enter-cancelled="enterCancelled"
  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
  @leave-cancelled="leaveCancelled"
>
  <div v-if="change" class="ant_man_style"></div>
</transition>

在enter和leave中必须使用done，不然它们会同时生效，动画也会瞬间完成。

设定初始载入时的渐变

如果想要设定一开始载入画面时组件的渐变效果，可以通过设定appear属性来实现。

  • appear-class载入时开始的样式。
  • appear-to-class载入过程的样式。
  • appear-active-class载入结束时样式。
1
2
3
4
5
6
7
<transition
  appear
  appear-class="show-appear-class"
  appear-to-class="show-appear-to-class"
  appear-active-class="show-appear-active-class"
>
</transition>

先在<transition>标签内加入appear，接着类似自定义动画可以给class name命名。

初始载入 JavaScript Hooks

  • beforeAppear载入前
  • appear载入时
  • afterAppear载入后
  • appearCancelled取消载入（载入开始后）
1
2
3
4
5
6
7
8
9
10
11
<div id="app">
  <transition
    appear
    @before-appear="beforeAppear"
    @appear="appear"
    @after-appear="afterAppear"
    @appear-cancelled="appearCancelled"
  >
    <div v-if="change" class="ant_man_style"></div>
  </transition>
</div>

key

对相同的标签元素使用key进行区分。

渐变模式 in-out 和 out-in

in-out 模式

  1. 新加入的元素做渐变进入。
  2. 渐变进入结束后，原存在的元素再渐变离开。

out-in 模式

  1. 原存在的元素渐变离开。
  2. 渐变离开结束后，新元素再渐变进入。
1
<transition mode="out-in"></transition> <transition mode="in-out"></transition>

列表过渡

  • <transition-group>会渲染出一个html标签，预设是<span>，也可以选择自定义tag为其他标签。
  • 无法使用（渐变模式in-out和out-in），因为不再是元素之间来回切换。
  • 每个元素需要设定一个key值，不能重复。

列表乱数排序

<transition-group>能够改变数组的排序，使用前需要先安装shuffle

1
2
3
npm i --save lodash.shuffle

let shuffle = require('lodash.shuffle')

过滤器 filter

filters 串联

filter可以同时串联多个filter函数。

filters 参数

$emit

  1. 父组件可以使用props把数据传递给子组件。
  2. 子组件可以使用$emit触发父组件的自定义事件。