共计 4876 个字符，预计需要花费 13 分钟才能阅读完成。
文章链接：Vue.js 基础教程
开发工具准备：
根据个人喜欢选择 IDE，我使用的是 WebStorm，推荐使用 Atom 和 VSCode；
安装 git base 和 node.js；
安装 vue-cli，命令 npm i -g @vue/cli；
新建 vue-cli 项目：
方法一：通过图形界面进行安装 vue ui；
方法二：通过命令行安装 vue create project-name
运行项目 npm run serve，端口 8080。
<!–more–>
双向绑定 v -model
双向绑定大多用于表单事件，通过监听使用者输入的事件来更新内容。
现阶段大部分工作在 App.vue 上，template 与普通写法一致，js 写法：
export default {
name: ‘app’,
data() {
return {
title: ‘vue.js’,
myname: ‘ 请输入名字 ’
}
}
}
去掉空白符.trim
直接在 v -model 后加上.trim 即可。
<input type=”text” v-model.trim=”name” value=”name”>
懒加载.lazy
在离开 input 时才更新输入的内容，在 v -model 后加上.lazy 即可。
限定输入数字.number
在 v -model 后加上.number 即可。
遍历 v -for
遍历有一个基本的模板：
<div id=”app”>
<ul v-for=”(item,index) in member” :key=”index”>
<li>{{item}}</li>
</ul>
</div>
组件 component
在 App.vue 中引入 components 中的组件：
<template>
<div id=”app”>
<Card />
</div>
</template>
<script>
import Card from ‘./components/Card’
export default {
components: {
Card
}
}
</script>
数据传递 props
<template>
<div id=”app”>
<Card :cardData=”cardData”/>
</div>
</template>
其中:cardData=”cardData” 是这个组件的核心，用于绑定属性 cardData。其他数据展示工作放在 Card.vue 组件中进行。
JS Result
EDIT ON
<template>
<div class=”card_wall”>
<div class=”card” v-for=”item in cardData” :key=”item.name”>
<div class=”card_title”>{{item.name}}</div>
<div class=”card_body”>
<p> 生日：{{item.birthday}}</p>
<p>E-mail：{{item.mail}}</p>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
cardData: {
type: Array,
required: true
}
}
}
</script>
这里解析一下 <div class=”card_wall”></div> 包裹 <div class=”card”></div> 主要是方便后期应用扩展，以及让应用整体更稳定。
生命周期
我不喜欢用官网的生命流程图来讲解这个内容，使用文字表达更加让思维清晰。
初始化：设置数据监听，编译模板，挂载到 DOM 并在数据变化时更新 DOM 等；
生命周期钩子：其实就是一个过程处理，类似于服务站。
生命周期钩子简介
beforeCreate：实例初始化
created：实例建立完成（可以取得 $data）
beforeMount：模板挂载之前（还没有生成 html）
mounted：模板挂载完成
beforeUpdate：如果 data 发生变化，触发组件更新，重新渲染
updated：更新完成
beforeDestroy：实例销毁之前（实例还可以使用）
destroyed：实例已销毁（所有绑定被解除、所有事件监听器被移除、所有子实例被移除）
生命周期钩子用得最多的是 mounted，主要用在调用属性、方法的时候，
指令
v-once 指令
第一次渲染完成后变为静态内容，其下的所有子元素都是这样的效果。
v-pre 指令
v-pre 指令会让指定元素被忽略。
v-cloak 指令
v-cloak 指令用于去除页面渲染数据时出现闪现的情况，使用方法：
<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 中使用动画。
加入渐变的时机
v-if 条件渲染
v-show 条件显示
动态组件
组件的根节点
渐变的分类
v-enter 定义进入渐变时开始的样式。
只存在组件插入前，组件插入后就移除。
v-enter-active 定义进入渐变的过程效果，可以设定渐变过程的时间（duration）和速度曲线（easing curve）。
在组件被插入前生效，在完成动画时移除。
v-enter-to 定义进入渐变后结束的样式。
在组件被插入后生效，同时 v -enter 被移除，并在完成进入渐变动画时移除。
v-leave 定义离开渐变时开始的样式。
在触发组件离开渐变时生效，接着马上移除。
v-leave-active 定义离开渐变的过程效果，可以设定渐变过程的时间（duration）和速度曲线（easing curve）。
在触发组件离开渐变时生效，在完成动画时移除。
v-leave-to 定义离开渐变后结束的样式。
在触发组件离开渐变时生效，同时 v -enter 被移除，并在完成离开渐变动画时移除。
transition 自定义名称
<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>
.zoom-enter, .zoom-leave-to {
width: 0px;
height: 0px;
}
.zoom-enter-active, .zoom-leave-active {
transition: width 1s, height 1s;
}
animation
可以使用 CSS 中的 animation 动画设计更为华丽的效果。
.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) 在未完成渐变或动画时取消。
<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 载入结束时样式。
<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 取消载入（载入开始后）
<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 模式
新加入的元素做渐变进入。
渐变进入结束后，原存在的元素再渐变离开。
out-in 模式
原存在的元素渐变离开。
渐变离开结束后，新元素再渐变进入。
<transition mode=”out-in”></transition>
<transition mode=”in-out”></transition>
列表过渡
<transition-group> 会渲染出一个 html 标签，预设是 <span>，也可以选择自定义 tag 为其他标签。
无法使用（渐变模式 in-out 和 out-in），因为不再是元素之间来回切换。
每个元素需要设定一个 key 值，不能重复。
列表乱数排序
<transition-group> 能够改变数组的排序，使用前需要先安装 shuffle
npm i –save lodash.shuffle
let shuffle = require(‘lodash.shuffle’)
过滤器 filter
filters 串联
filter 可以同时串联多个 filter 函数。
filters 参数
$emit
父组件可以使用 props 把数据传递给子组件。
子组件可以使用 $emit 触发父组件的自定义事件。
