current position:Home>Vue - instruction knowledge points - Summary

Vue - instruction knowledge points - Summary

2021-08-25 12:04:20 HZM_ Endless

Content rendering instructions

  1. v-text Disadvantages of instructions : Will overwrite the original content inside the element !
  2. {{ }} Interpolation expression : Most used in actual development , Just a placeholder for content , It doesn't cover the original content !
  3. v-html Role of instructions : You can put a string with a label , To render as true HTML Content !

Attribute binding instruction

Be careful : Interpolation expressions can only be used on elements Content node in , Cannot be used in the of elements Attribute node in !
  • stay vue in , have access to v-bind: Instructions , Dynamically bind values for the attributes of elements ;
  • The abbreviation is English :
  • In the use of v-bind During property binding , If the bound content needs to be dynamically spliced , Then the string should be wrapped in single quotation marks , for example :

    <div :title="'box' + index"> This is a  div</div>

Event binding

  • stay vue The provided template rendering Syntax , In addition to supporting In addition to binding simple data values , And support Javascript The operation of expressions

     example  :
    {{ OK ? 'YES' : 'NO'}}
    {{ message.split('').reverse().join('') }}
  • vue Provides v-on Event binding instructions , Used to assist programmers in DOM Element binding event listener

    <h3>count  The value of is  : {{ count }}</h3>
    <!--  The grammar format is  v-on: Event name =" The name of the event handler " -->
    <button v-on:click="addCount">+1</button>

    Be careful : Native DOM Objects have onclick、oninput、onkeyup And so on , Replace with vue After the event binding form of , Respectively :v-on:click、v-on:input、v-on:keyup

  • adopt v-on Bound event handler , need stay methods node To declare :

    const vm = new Vue({
       el: '#app',
       data: { count: 0 },
        methods: {
            //v-on  Bound event handler , Need to declare in  methods  In nodes 
            addCount() { //  The name of the event handler 
            // this  At present  new  Coming out  vm  Instance object ,
            //  adopt  this  Access to  data  Data in 
            this.count += 1
  1. v-on: Short for @
  2. The grammar format is :

    <button @click="add"></button>
    methods: {
       add() {
                //  If you want to modify in the method  data  Data in , Can pass  this  Access to the 
                this.count += 1
  3. $event Application scenarios of : If the default event object e It is covered. , You can manually pass a $event. for example :

    <button @click="add(3, $event)"></button>
    methods: {
       add(n, e) {
                //  If you want to modify in the method  data  Data in , Can pass  this  Access to the 
                this.count += 1

    notes :$event yes vue Special variables provided , Used to represent the native event parameter object event.$event Can solve the event parameter object event

    Covered questions .

  4. Event modifier :

    • .prevent Blocking default behavior

      ( example : prevent a Link jump , Prevent form submission, etc )

      <a @click.prevent="xxx"> link </a>
    • .stop Stop the event from bubbling

      <button @click.stop="xxx"> Button </button>
    • capture Trigger the current event handler in capture mode

      .once Bound events only trigger 1 Time

      .self Only in Is the event handler function triggered when the current element itself

v-model Instructions

  1. input Input box

    • type="radio"
    • type="checkbox"
    • type="xxxx"
  2. textarea
  3. select

    v-model Modifier for instruction

    In order to facilitate the processing of user input , vue by v-model The Directive provides 3 A modifier , Namely :

    Modifier effect Example
    .number Automatically change the user's input value to numerical value type <input v-model.number="age">
    .trim Automatically filter the first and last blank characters entered by users <input v-model.trim="msg">
    .lazy stay "change" Sometimes not "input" When the update <input v-model.lazy="msg">

Conditional rendering instructions

  1. v-show The principle is : Add or remove elements dynamically display: none style , To realize the display and hiding of elements

    • If you want to switch the display state of elements frequently , use v-show Performance will be better
  2. v-if The principle is : Each time an element is dynamically created or removed , Realize the display and hiding of elements

    • If you just enter the page , Some elements do not need to be displayed by default , And later this element probably doesn't need to be shown , here v-if Better performance
In actual development , Most of the time , Don't worry about performance , Use it directly v-if Just fine !!!

v-if When instructions are used , There are two ways :

  1. Give a Boolean value directly true or false

    <p v-if="true"> By  v-if  Elements of control </p>
  2. to v-if Provide a judgment condition , According to the judgment, the result is true or false, To control the display and hiding of elements

    <p v-if="type === 'A'"> good </p>
  3. v-else | v-else-if Instructions must cooperate with v-if Instructions used together , Otherwise it will not be recognized .

List instruction rendering

  1. v-for Instruction needs to be used item in items Special syntax of form :

    • items It's an array to loop
    • item Is every item that is cycled
  2. ( Use key Maintain the status of the list )
  3. Use key Maintain the status transition of the list

  1. key Precautions for :

    • key The value of can only be of string or numeric type
    • key The value of must be unique ( namely :key Values cannot be repeated )
    • It is suggested that the data items id The value of the property is key Value ( because id The value of the property is unique )
    • Use index The value of is taken as key There is no point in the value of ( because index The value of is not unique )
    • It is recommended to use v-for Be sure to specify key Value ( Both improve rendering performance , To prevent the state of the list from being disordered )

copyright notice
author[HZM_ Endless],Please bring the original link to reprint, thank you.

Random recommended