Vue.js基础教程

开发工具准备:

  1. 根据个人喜欢选择IDE,我使用的是WebStorm,推荐使用AtomVSCode
  2. 安装git basenode.js
  3. 安装vue-cli,命令npm i -g @vue/cli
  4. 新建vue-cli项目:
    1. 方法一:通过图形界面进行安装vue ui
    2. 方法二:通过命令行安装vue create project-name
  5. 运行项目npm run serve,端口8080

双向绑定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>主要是方便后期应用扩展,以及让应用整体更稳定。

生命周期

我不喜欢用官网的生命流程图来讲解这个内容,使用文字表达更加让思维清晰。

  1. 初始化:设置数据监听,编译模板,挂载到DOM并在数据变化时更新DOM等;
  2. 生命周期钩子:其实就是一个过程处理,类似于服务站。

生命周期钩子简介

  1. beforeCreate:实例初始化
  2. created:实例建立完成(可以取得$data
  3. beforeMount:模板挂载之前(还没有生成html
  4. mounted:模板挂载完成
  5. beforeUpdate:如果data发生变化,触发组件更新,重新渲染
  6. updated:更新完成
  7. beforeDestroy:实例销毁之前(实例还可以使用)
  8. destroyed:实例已销毁(所有绑定被解除、所有事件监听器被移除、所有子实例被移除)

生命周期钩子用得最多的是mounted,主要用在调用属性、方法的时候,

指令

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
.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
.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 transitionanimations一起使用。

  • beforeEnter(el)进入渐变或动画前生效。
  • enter(el,callback)进入渐变或动画的组件插入时生效。
  • afterEnter(el)进入渐变或动画结束时生效。
  • enterCanceled(el)未完成渐变或动画时取消。
  • beforeLeave(el)离开渐变或动画前生效。
  • leaveCancelled(el)未完成渐变或动画时取消。
1
2
3
4
5
6
7
8
9
10
11
<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>

enterleave中必须使用done,不然它们会同时生效,动画也会瞬间完成。

设定初始载入时的渐变

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

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

列表过渡

  • <transition-group>会渲染出一个html标签,预设是<span>,也可以选择自定义tag为其他标签。
  • 无法使用(渐变模式in-outout-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触发父组件的自定义事件。