Vue.js Basic Course

  course, Front end, Front end frame, javascript, vue.js

Article link:Vue.js Basic Course

Development tool preparation:

  1. According to personal preferenceIDE, I use isWebStorm, recommendedAtomAndVSCode;
  2. Installationgit baseAndnode.js;
  3. Installationvue-cli, commandnpm i -g @vue/cli;

  4. Newvue-cliProjects:

    1. Method 1: Install via graphical interfacevue ui;
    2. Method 2: Install via command linevue create project-name
  5. Run projectnpm 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.vueIn fact,templateConsistent with the common writing style,jsWriting style:

export default {
    name: 'app',
    data() {
        return {
            title: 'vue.js',
            myname: '请输入名字'
        }
    }
}

Remove white space.trim

Directly inv-modelAdd the following.trimJust.

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

load on demand.lazy

Before leavinginputWhen the content of the input is updated, inv-modelAdd the following.lazyJust.

Limit input numbers.number

Inv-modelAdd the following.numberJust.

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.vueIntroduction ofcomponentsComponents 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.vueComponent.

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.

  1. Initialization: Set up data monitoring, compile templates, mount toDOMAnd update when data changesDOM(e) etc.;
  2. Lifecycle Hook: In fact, it is a process processing, similar to a service station.

Introduction to Life Cycle Hook

  1. beforeCreate: instance initialization
  2. created: instance creation completed (available$data)
  3. beforeMount: Before the template is mounted (not yet generatedhtml)
  4. mounted: Template Mount Completed
  5. beforeUpdate: ifdataChange, Trigger Component Update, Re-Render
  6. updated: update completed
  7. beforeDestroy: Before the instance is destroyed (the instance can also be used)
  8. destroyed: instance destroyed (all bindings released, all event listeners removed, all child instances removed)

Life cycle hooks are used most frequentlymountedWhich is mainly used when calling properties and methods,

instructions

v-onceinstructions

After the first rendering is completed, it becomes static content, and all sub-elements below it have the same effect.

v-preinstructions

v-preThe command causes the specified element to be ignored.

v-cloakinstructions

v-cloakThe 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-htmlinstructions

v-htmlThe instructions willhtmlTags rendered asDOMDisplayed on the page.

v-htmlInstructions can only be used by trusted users, otherwise they are vulnerable toXSSAttack.

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

  1. v-ifConditional rendering
  2. v-showCondition display
  3. Dynamic component
  4. The root node of the component

Gradual classification

  1. v-enterDefinitionEnter gradientWhenStartThe style of.

    • Only before the component is inserted, it is removed after the component is inserted.

  2. v-enter-activeDefinitionEnter 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.

  3. v-enter-toDefinitionEnter gradientAfterEndThe style of.

    • Effective after the component is inserted, at the same timev-enterRemoved and completedEnter gradientRemove during animation.

  4. v-leaveDefinitionLeave gradientWhenStartThe style of.

    • In the trigger assemblyLeave gradientIt will take effect when the time comes, and then it will be removed immediately.

  5. v-leave-activeDefinitionLeave 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.

  6. v-leave-toDefinitionLeave gradientAfterEndThe style of.

    • In the trigger assemblyLeave gradientAt the same timev-enterRemoved and completedLeave gradientRemove during animation.

transitionCustom 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 CSSanimationAnimation design is more gorgeous.

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

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

@keyframes special_effects {}

transitionCustom animation category

Except in<transition>Medium settingnameCustom prefix (attribute) and preset animation category.

  • enter-classDefine when entering animationStartThe style of.
  • enter-active-classDefines theProcessEffect.
  • enter-to-classAfter the definition enters the animationEndThe style of.
  • leave-classWhen defining to leave the animationStartThe style of.
  • leave-active-classDefines the that leaves the animationProcessEffect.
  • leave-to-classAfter the definition leaves the animationEndThe style of.

The above six custom attributesPriority levelAbove the general gradient category.

CSS animation library:Animation.css

JavaScriptHook

<transition>JavaScriptHooks can also be bound, and CSS can be combined as well as used alone.transitionAndanimationsTogether.

  • 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>

InenterAndleaveMust be used indoneOtherwise, 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 settingappearProperty.

  • appear-classWhen loadingStartThe style of.
  • appear-to-classLoadingProcessThe style of.
  • appear-active-classLoadingEndTime 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 nameNaming.

Initial loadJavaScript Hooks

  • beforeAppearBefore loading
  • appearWhen loading
  • afterAppearAfter loading
  • appearCancelledCancel 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 elementkeyMake a distinction.

Gradient modein-outAndout-in

in-outMode

  1. The newly added elements are gradually changed into.
  2. After the gradual change enters, the existing elements gradually change away.

out-inMode

  1. The existing elements gradually fade away.
  2. 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 ahtmlLabel, default is<span>, you can also choose to customizetagFor other labels.
  • Not Available (Gradient Modein-outAndout-in), because it is no longer switching back and forth between elements.
  • One for each elementkeyValue, 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

filtersSeries connection

filterMultiple can be connected in series at the same timefilterFunction.

filtersParameter

$emit

  1. The parent component can use thepropsPass data to subcomponents.
  2. Subassemblies can be used$emitTriggers a custom event for the parent component.