vue-2 directive:

instruction

What is html attribute: It is used to extend the function of html tags. The attribute is written in the html development tag: attribute = "attribute value",

Instructions are used to extend the functionality of tags in Vue

{ {}} : template syntax, text interpolation

Unparseable html tags

{ { You can write variables, constants, expressions }} : undefined and null will not be rendered to the page

It is to put the expression (the formula that returns the result by calculation) on the page for display

v-cloak: solve { { }} when refreshing the page , usually written on the root component, id="app", you must manually add css code

    - 使得 {
   
   {}} 刷新不让用户看见
    - 直到编译完成前，`<div>` 将不可见
    - 必须手工添加css代码
    - 适用于多个元素
    
    <div id="app" v-cloak>{
   
   {msg}}</div>
 
    <script>
         new Vue({
                el: '#app',
                data: {
                    msg: '欢迎Vue!'
                }
            })
    </script>

    <style> 
        [v-cloak]
             display:none;
         }
    </style>   

v-text: text command

• Unparseable html tags

• <element v-text='variable, constant, expression'></element>

• Vue3 warns that the content in the tag will be overwritten

v-html: parse HTML tags or special symbols

• Can parse html tags

• <element v-html='variable, constant, expression'></element>

• Vue2 will overwrite the content in the label

• vue3 warning, will overwrite

v-model.trim: remove the first space

messageIn this way, the value entered by the user in the input box will automatically remove leading and trailing spaces, and perform two-way binding with the data in the Vue instance .

<input v-model.trim="message">

template tag: <!-- it is a tag, but it will not be displayed on the page -->

<template v-if="age>18"> 成年人的世界，你懂得~ </template>

v-once: Dynamic display when the element content is loaded for the first time

• <element v-once>{ {...}}</element>

v-pre: don't want to compile content: { {}}

• <element v-pre>xxx{ {xxx}}xx</element>

v-bind: bind data and element attributes

• v-bind: attribute name=""    

• Abbreviation with colon: attribute name = ""

    <div id="app">
        <!-- 基本绑定样式 -->
        <p class="active">白日依山尽</p>
        <p :class="'active'">白日依山尽</p>
        <p :class="x">白日依山尽</p>
        <p :class="flag?x:''">白日依山尽</p>
        <!-- 对象的方式 -->
        <p :class="{active:false,border:true}">黄河入海流</p>
        <!-- 数组的方式 -->
        <p :class="['active','border']">欲穷千里目</p>
        <!-- style绑定 -->
        <p :style="{backgroundColor:'red',fontSize:'28px'}">更上一层楼</p>
        <p :style="{backgroundColor:z}">更上一层楼</p>
    </div>

v-show label show and hide

v-show principle: css method controls the display and hiding of labels by controlling display: none/block: suitable for frequent switching

Creation and deletion of v-if, v-else-if, v-else tags

The principle of v-if: control the display and hiding of elements by creating and destroying dom nodes. true add false remove: cost performance

: Use js to create (document.createElement()) and delete (ele.remove())

<元素1 v-if="条件1">
<元素2 v-else-if="条件2">
...
<元素n v-else>

紧挨着写，不能插入其他元素

The difference between v-if and v-show

v-show function: css method controls the display and hiding of labels by controlling display: none/block: suitable for frequent switching

The principle of v-if: control the display and hiding of elements through the creation and destruction of elements. true add false remove: cost performance

performance:

1. One v-if switch consumes one performance

2. v-show, only consumes a performance when the initial display

Security (permission control will reflect): v-if is higher than v-show

Support writing on the template tag

1. v-if support

2. v-show does not support    

v-for <!-- Mantra: Write v-for on whoever you want to appear multiple times -->

• For in traverses the array to obtain (value, subscript), and traverses the object to obtain (key value, key name, subscript)

• Syntax v-for="(traversal value, traversal subscript) in the data you want to facilitate"

  • // Grammar 1: traverse numbers: // v-for = "item in numbers" :key='unique, if there is an id, use id, if there is no id, use index'

  • // Grammar 2: Traverse the array // v-for = "(item,index) array in data" :key='unique, use id if there is an id, use index if there is no id'

  • // Grammar 3: Traversing objects // v-for = "(value,key,index)in object in data" :key='unique, if there is an id, use id, if there is no id, use index'. value is the key value, key is the key name, index index

  • With key, improve the efficiency of for loop

Priority of v-if and v-for

In vue2: v-for has higher priority than v-if

In vue3: v-if has higher priority than v-for

Note: Try not to write v-if and v-for on a tag

v-on: bind event listener

/* 
   绑定事件的语法：
      v-on:事件名= "少量的js代码(要求代码是赋值语法)"
      v-on:事件名= "函数名"
      v-on:事件名= "函数名(参数)"
    简写：
       @事件名 =  "少量的js代码(要求代码是赋值语法)"
       @事件名 =  "函数名"
       @事件名 =  "函数名(参数)"

    事件对象如何获取：
       如何阻止事件的默认行为 e.preventDefault()
       1. 调用时不传参数时，默认就在第一个形参位置就是事件对象
       2. 调用时传递参数时，需要手动的 把事件对象$event 放在最后一个参数位置

    事件修饰符：
       @事件名.prevent = '事件处理函数'
       @事件名.stop = '事件处理函数'
       @事件名.prevent.stop = '事件处理函数'

       特殊的事件如keyup 事件
    按键修改符：
       @keyup.enter = '事件处理函数'   抬起时并按下了回车键，就会指向事件处理函数
        .enter
        .delete (捕获“Delete”和“Backspace”两个按键)
        .space (空格键)
        .up   （上箭头）
        .down  （下箭头）
        .left   （左箭头）
        .right   （右箭头）

       配合功能键：
          .ctrl 键
          .alt 键
          .shift 键
          .meta 键

       需求： 按下enter键的同时按下ctrl键
          @keyup.ctrl.enter = ''
*/

v-model does two-way binding in form elements: the only two-way binding

The <input> and <textarea> elements of text type will bind the default value of value

The <input> and <textarea> elements of text type will bind the default value of value

<input type="text" v-model.number="text">

By default, as long as the v-model is bound to the input box, then when modifying the content, the content will change with this

But sometimes we want to modify the content and then modify the content when the change event occurs

<input type="checkbox"  v-model="checked" />

{
   
   {checked}}   //true或者false根据复选状态

The type of data variable is divided into two categories (input).
   The type of value of data variable is an array, and the value associated with v-model is an array that contains all the values ​​​​of the selected value. The
   type of value of data variable is non-array, and v-model The associated value is a Boolean value (true, false) (high frequency of use)

<select v-model='data中变量'>
      v-model关联的是选中的选项

Use v-model on common form elements to realize two-way binding of form elements

Use v-model on custom components to achieve two-way binding of subcomponent content