Article link:Vue.js Basic Course
Development tool preparation:
- According to personal preference
IDE
, I use isWebStorm
, recommendedAtom
AndVSCode
; - Installation
git base
Andnode.js
; - Installation
vue-cli
, commandnpm i -g @vue/cli
; -
New
vue-cli
Projects:- Method 1: Install via graphical interface
vue ui
; - Method 2: Install via command line
vue create project-name
- Method 1: Install via graphical interface
- Run project
npm run serve
, port8080
.
<! –more–>
Bidirectional binding v-model
Bidirectional binding is mostly used for form events and updates content by listening to events entered by users.
Most of the work at this stage is inApp.vue
In fact,template
Consistent with the common writing style,js
Writing style:
export default {
name: 'app',
data() {
return {
title: 'vue.js',
myname: '请输入名字'
}
}
}
Remove white space.trim
Directly inv-model
Add the following.trim
Just.
<input type="text" v-model.trim="name" value="name">
load on demand.lazy
Before leavinginput
When the content of the input is updated, inv-model
Add the following.lazy
Just.
Limit input numbers.number
Inv-model
Add the following.number
Just.
Traversalv-for
Traversal has a basic template:
<div id="app">
<ul v-for="(item,index) in member" :key="index">
<li>{{item}}</li>
</ul>
</div>
Componentcomponent
InApp.vue
Introduction ofcomponents
Components in:
<template>
<div id="app">
<Card />
</div>
</template>
<script>
import Card from './components/Card'
export default {
components: {
Card
}
}
</script>
Data transferprops
<template>
<div id="app">
<Card :cardData="cardData"/>
</div>
</template>
among them:cardData="cardData"
Is the core of this component and is used to bind propertiescardData
. Other data display work is onCard.vue
Component.
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>
Let’s analyze it here.<div class="card_wall"></div>
package<div class="card"></div>
It is mainly to facilitate the later application expansion and to make the application more stable as a whole.
Life cycle
I don’t like to use the life flow chart of the official website to explain this content, and use words to express it more clearly.
-
Initialization: Set up data monitoring, compile templates, mount to
DOM
And update when data changesDOM
(e) etc.; - Lifecycle Hook: In fact, it is a process processing, similar to a service station.
Introduction to Life Cycle Hook
-
beforeCreate
: instance initialization -
created
: instance creation completed (available$data
) -
beforeMount
: Before the template is mounted (not yet generatedhtml
) -
mounted
: Template Mount Completed -
beforeUpdate
: ifdata
Change, Trigger Component Update, Re-Render -
updated
: update completed -
beforeDestroy
: Before the instance is destroyed (the instance can also be used) -
destroyed
: instance destroyed (all bindings released, all event listeners removed, all child instances removed)
Life cycle hooks are used most frequentlymounted
Which is mainly used when calling properties and methods,
instructions
v-once
instructions
After the first rendering is completed, it becomes static content, and all sub-elements below it have the same effect.
v-pre
instructions
v-pre
The command causes the specified element to be ignored.
v-cloak
instructions
v-cloak
The instruction is used to remove flash when rendering data on the page. Use the following method:
<template>
<div id="app">
<div v-cloak>${ item.title }</div>
</div>
</template>
<style>
[v-cloak] {
display: none;
}
</style>
v-html
instructions
v-html
The instructions willhtml
Tags rendered asDOM
Displayed on the page.
v-html
Instructions can only be used by trusted users, otherwise they are vulnerable toXSS
Attack.
Animation
VueAnimation is usually added to the page only when it really needs to be used. It is recommended inCSSUse animation in.
When to add a gradient
-
v-if
Conditional rendering -
v-show
Condition display - Dynamic component
- The root node of the component
Gradual classification
-
v-enter
DefinitionEnter gradientWhenStartThe style of.- Only before the component is inserted, it is removed after the component is inserted.
-
v-enter-active
DefinitionEnter gradientTheProcessEffect, you can set the gradual change process time (duration
) and velocity curves (easing curve
)。- It takes effect before the component is inserted and is removed when the animation is completed.
-
v-enter-to
DefinitionEnter gradientAfterEndThe style of.- Effective after the component is inserted, at the same time
v-enter
Removed and completedEnter gradientRemove during animation.
- Effective after the component is inserted, at the same time
-
v-leave
DefinitionLeave gradientWhenStartThe style of.- In the trigger assemblyLeave gradientIt will take effect when the time comes, and then it will be removed immediately.
-
v-leave-active
DefinitionLeave gradientTheProcessEffect, you can set the gradual change process time (duration
) and velocity curves (easing curve
)。- In the trigger assemblyLeave gradientEffective when, removed when animation is complete.
-
v-leave-to
DefinitionLeave gradientAfterEndThe style of.- In the trigger assemblyLeave gradientAt the same time
v-enter
Removed and completedLeave gradientRemove during animation.
- In the trigger assemblyLeave gradientAt the same time
transition
Custom name
<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
You can use the in CSSanimation
Animation design is more gorgeous.
.zoom-leave-active {
animation: special_effects 1.5s;
}
.zoom-enter-active {
animation: special_effects 1.5s reverse;
}
@keyframes special_effects {}
transition
Custom animation category
Except in<transition>
Medium settingname
Custom prefix (attribute) and preset animation category.
-
enter-class
Define when entering animationStartThe style of. -
enter-active-class
Defines theProcessEffect. -
enter-to-class
After the definition enters the animationEndThe style of. -
leave-class
When defining to leave the animationStartThe style of. -
leave-active-class
Defines the that leaves the animationProcessEffect. -
leave-to-class
After the definition leaves the animationEndThe style of.
The above six custom attributesPriority levelAbove the general gradient category.
CSS animation library:Animation.css
JavaScript
Hook
<transition>
JavaScriptHooks can also be bound, and CSS can be combined as well as used alone.transition
Andanimations
Together.
-
beforeEnter(el)
InEnter gradient or animationEffective before. -
enter(el,callback)
InEnter gradient or animationEffective when components of are inserted. -
afterEnter(el)
InEnter gradient or animationEffective at the end. -
enterCanceled(el)
InGradient or animation not completedCancel when. -
beforeLeave(el)
InLeave gradient or animationEffective before. -
leaveCancelled(el)
InGradient or animation not completedCancel when.
<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>
Inenter
Andleave
Must be used indone
Otherwise, they will take effect at the same time and the animation will be completed in an instant.
Sets the gradient at initial load
If you want to set the gradient effect of the assembly when the screen is initially loaded, you can do this by settingappear
Property.
-
appear-class
When loadingStartThe style of. -
appear-to-class
LoadingProcessThe style of. -
appear-active-class
LoadingEndTime style.
<transition
appear
appear-class="show-appear-class"
appear-to-class="show-appear-to-class"
appear-active-class="show-appear-active-class">
</transition>
First<transition>
Add to labelappear
, then similar custom animation can be given toclass name
Naming.
Initial loadJavaScript Hooks
-
beforeAppear
Before loading -
appear
When loading -
afterAppear
After loading -
appearCancelled
Cancel load (after load starts)
<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
Use for the same tag elementkey
Make a distinction.
Gradient modein-out
Andout-in
in-out
Mode
- The newly added elements are gradually changed into.
- After the gradual change enters, the existing elements gradually change away.
out-in
Mode
- The existing elements gradually fade away.
- After the gradual change leaves, the new element gradually changes again.
<transition mode="out-in"></transition>
<transition mode="in-out"></transition>
List transition
-
<transition-group>
Will render ahtml
Label, default is<span>
, you can also choose to customizetag
For other labels. - Not Available (Gradient Mode
in-out
Andout-in
), because it is no longer switching back and forth between elements. - One for each element
key
Value, cannot be repeated.
The list is sorted randomly.
<transition-group>
Can change the sort of array, need to install before use.shuffle
npm i --save lodash.shuffle
let shuffle = require('lodash.shuffle')
Filterfilter
filters
Series connection
filter
Multiple can be connected in series at the same timefilter
Function.
filters
Parameter
$emit
- The parent component can use the
props
Pass data to subcomponents. - Subassemblies can be used
$emit
Triggers a custom event for the parent component.