Vue common system commands

Vue common system commands

Interpolation expression

The most common form of data binding, the most common is to use interpolation expressions, written in {{}}

   <span>Message: {{ msg }}</span>

The label will be replaced with the value of the msg attribute on the corresponding data object (msg is defined in the data object). Whenever the msg attribute on the bound data object is changed, the content at the interpolation point will be updated. The interpolation expression mainly displays the data in the data in the Vue object. Legal data expressions 1 write variables directly 2 string splicing 3 numerical operations 4 ternary expressions 5 built-in functions

<div id="app">
    <p>Name: {{name}}</p>
    <p>Age: {{age+1}}</p>
    <p>{{age>18? "Adult":"Underage"}}
    <p>{{name.split("").reverse().join("")}}</p>
</div>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            name:"Xiao Ming",
            age:20
        }
    })

v-text

V-text, like interpolation expressions, is also used to display data. It is used in the attributes of tags, while interpolation expressions are used in the innerHTML position

<div id="app">
    <p v-text="'Name:'+name"></p>
    <p v-text="'age:'+(age+1)"></p>
</div>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            name:"Xiao Ming",
            age:20
        }
    })
</script>

v-html

Interpolation expressions and v-text will interpret the data as plain text instead of HTML. In order to output real HTML, you need to use the v-html command:

<div id="app">
    <p v-html="html">{{html}}</p>
</div>
<script>
     new Vue({
        el:'#app',
        data:{
           html:"<h1> Hello Vue</h1>"

        }
    })
</script>

v-bind attribute/style binding

One or more attributes/styles can be dynamically bound to html elements or components, and style and class can be dynamically bound. The abbreviated form is to add a colon in front of the attributes and styles :, the original wording v-bind:class, the abbreviated:class

<div id="app">
    <img v-bind:src="pic">
</div>
<script>
     new Vue({
        el:'#app',
        data:{
           pic:"avatar.jpg"
        }
    })
</script>

Shorthand mode via colon

<div id="app">
    <img :src="pic">
</div>

Dynamically modify styles

<template>
<div v-bind:class="{'active':isActive,'text-danger':hasError}">
   class
</div>
</template>

<script>
    export default {
        name: "HelloBind",
      data(){
          return{
            isActive:true,
            hasError:true
          }
      }
    }
</script>

image.png

<div data-v-278940af="" class="active text-danger">
   class
</div>

Modify hasError to false

data(){
          return{
            isActive:true,
            hasError:false
          }
      }

The attribute becomes

<div data-v-278940af="" class="active">
   class
</div>

Binding by class

<div :class="classStyle">
   class
</div>
</template>

<script>
    export default {
        name: "HelloBind",
      data(){
          return{
            classStyle:{
              active:true,
              text_danger:true
            }
          }
      }
    }
</script>

Binding by array form

<div :class="['active','text_danger']">
   class
</div>

v-if conditional rendering

if(ok){
 <h1>Yes</h1>
}else{
 <h2>NO</h2>
}
<template>
  <div v-if="isShow">YES</div>
  <div v-else>NO</div>
</template>

<script>
    export default {
        name: "HelloIF",
        data(){
          return{
            isShow: false
          }
        }
    }
</script>

v-show

<template>
  <div>
    <div v-show="isShow">Show</div>
  </div>

</template>

<script>
    export default {
        name: "HelloIF",
        data(){
          return{
            isShow: true
          }
        }
    }
</script>

v-if is a true conditional rendering, because it will ensure that the event listeners and subcomponents in the conditional block are properly destroyed and reconstructed during the switching of the conditional block. v-if is also lazy: if the condition is false in the initial rendering, nothing is done-partial compilation is started when the condition becomes true for the first time (the compilation will be cached). v-if has a higher switching cost and v-show has a higher initial rendering cost. Therefore, if you need to switch frequently to use v-show, it is better to use v-if if the conditions are unlikely to change during runtime.

v-for list rendering

Iterate over the array

 item in Array
 (item, index) in Array

Iterate over objects

value in Object

Use item in Array to traverse the array

<div id="app">
    <ui>
        <li v-for="s in list">{{s.id}}-{{s.name}}</li>
    </ui>
</div>
<script>
     new Vue({
        el:'#app',
        data:{
          list:[
              {id:11,name:"xiaoming"},
              {id:22,name:"xiaohong"},
              {id:33,name:"tony"}
          ]
        }
    })
</script>

Use (item, index) in Array to traverse the array

<div id="app">
    <ui>
        <li v-for="(s,index) in list">{{index}}-{{s.name}}</li>
    </ui>
</div>
<script>
     new Vue({
        el:'#app',
        data:{
          list:[
              {id:1,name:"xiaoming"},
              {id:2,name:"xiaohong"},
              {id:3,name:"tony"}
          ]
        }
    })
</script>

Use value in Object to traverse the object value is the value of the object property, obj is the object that needs to be traversed

<div id="app">
    <ui>
        <li v-for="s in stu">{{s}}</li>
    </ui>
</div>
<script>
     new Vue({
        el:'#app',
        data:{
          stu:{id:1,name:"xiaoming",age:20}
        }
    })
</script>

Use (value, key, index) in Object to traverse objects

<div id="app">
    <ui>
        <li v-for="(value,key,index) in stu">{{index}}-{{key}}-{{value}}</li>
    </ui>
</div>
<script>
     new Vue({
        el:'#app',
        data:{
          stu:{id:1,name:"xiaoming",age:20}
        }
    })
</script>
Focus on the use of the key attribute of v-for

Note that when using v-for to render data, you must remember to add the key attribute and ensure that this key is unique and non-repetitive. Its function is to uniquely identify each item of data and improve rendering performance. Note: The following changes will not trigger the view update 1. Set a new value to the array by index 2. Change the array by length to solve:

      1. Vue.set(arr, index, newValue)
      2. arr.splice(index, 1, newValue)

v-model two-way data binding

To achieve two-way data binding, this instruction is used by input/select/textarea/labels and components

<div id="app">
   <div>User name: <input type="text" v-model="name"></div>
    <div>Password: <input type="text" value="password"></div>
</div>
<script>
     new Vue({
        el:'#app',
        data:{
         name:"admin",
         password: "123456"
        }
    })
</script>

v-model is used in the checkbox to control the selected state of the check box

v-on

Function: Binding event monitoring, the expression can be the name of a method or an inline statement, and can be omitted if there is no modifier. When used on ordinary html elements, only native DOM events can be monitored. When used on custom element components, you can also listen to custom events triggered by subcomponents. 2. Common events: v-on:click//click v-on:keydown v-on:keyup v-on:mousedown v-on:mouseover v-on:submit...

v-on:click button click event

<div id="app">
   <div>{{name}}</div>
    <button v-on:click="login">Login</button>
</div>
<script>
     new Vue({
        el:'#app',
        data:{
         name:"admin",
        },
        methods:{
            login () {
                this.name="login successful"
            }
        }
    })
</script>

Generally, it is abbreviated @click

 <button @click="login">Login</button>

$event

<div id="app">
   <div>{{name}}</div>
    <button @click="login($event)">Login</button>
</div>
<script>
     new Vue({
        el:'#app',
        data:{
         name:"admin",
        },
        methods:{
            login (e) {
                console.log(e)
            }
        }
    })
</script>

Event modifier: enhanced event function, .stop prevents bubbling.prevent prevents default behavior

<div id="app">
   <a href="http://www.google.com" @click.prevent="stop">Prevent redirection</a>
</div>
<script>
     new Vue({
        el:'#app',
        methods:{
            stop () {
                console.log("Prevent jump")
            }
        }
    })
</script>

When the key modifier triggers a key event like keydown, you can use the key modifier to specify that a special key is pressed before the event is triggered. The kd1 event is triggered when the enter key is pressed

<input type="text" @keydown.enter="kd1">  

Since the keyCode corresponding to the Enter key is 13, you can also use the following alternatives

<input type="text" @keydown.13="kd1"> The kd1 event is triggered when the enter key is pressed

But if you need to press the letter a (corresponding keyCode=65) to trigger the kd1 event, there are two ways of writing: 1. Since the key modifier a is not supported by default, you need to add a corresponding Vue.config.keyCodes.a = 65. So this way of writing is:

      Vue.config.keyCodes.a = 65
      <input type="text" @keydown.a="kd1"> This will trigger

2. The number 65 corresponding to a can also be added as a key modifier

<input type="text" @keydown.65="kd1"> This will trigger

Each key on the keyboard can be obtained through http://keycode.info/to get the number corresponding to the key currently pressed

<div id="app">
    <div>{{msg}}</div>
  <input v-model="msg" @keyDown.13="submit">
</div>
<script>
     new Vue({
        el:'#app',
         data:{
            msg:""
         },
        methods:{
            submit () {
                console.log(this.msg)
            }
        }
    })
</script>
Reference: https://cloud.tencent.com/developer/article/1445684 Vue common system instructions-Cloud + Community-Tencent Cloud