[Vue] 6 - Options - filters, computed, watch, template, dynamic binding style (: class /: style)

Posted by roxki on Tue, 11 Feb 2020 12:16:57 +0100

Article directory

1.filters

  1. If there are two vue instances, one instance cannot get the method in the other instance. As follows, we write two instances: the filter myFilter is defined in instance 1 and cannot be used in instance 2

Definition: filter name FN (data to be filtered, parameter 1, parameter 2){return operation}
Use: in the vue instance, {'data' | FN (parameter 1, parameter 2)}}}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="shortcut icon" href="#" type="image/x-icon">
</head>
<body>
    <div id="app1">   
       {{'hello' | myFilter('lxz')}}
       <!-- Use: 'data data' | fn(Parameter 1, parameter 2) -->
    </div>
    <div id="app2">
        {{'hello' | myFilter('lxz123')}}
        <!-- Example vm2 No access vm1 Filter method in -->
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        // Here we write two instances: the filter myFilter is defined in instance 1 and cannot be used in instance 2
    let vm1 = new Vue({ 
        el:'#app1',
        filters:{
            // Definition: filter name FN (data to be filtered, parameter 1, parameter 2){return operation}
            myFilter(data,name){
               return data + name;
            }
        }
    })
    let vm2 = new Vue({ 
        el:'#app2',
        
    })
    </script>
</body>
</html>
  1. Global filter:
  1. To be public, it must not be placed on the instance, but on the constructor Vue, vue.filter (function name, function)
  2. After putting it on the constructor, every instance of new will have this method - this is called global filter
  3. The global filter should be placed at the top of the page and mounted before new
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="shortcut icon" href="#" type="image/x-icon">
</head>
<body>
    <div id="app1">   
       {{'hello' | myFilter1('lxz')}}
    </div>
    <div id="app2">
        {{'hello' | myFilter1('lxz123')}}
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
   /* 
    1. To be public, it must not be placed on the instance, but on the constructor Vue, vue.filter (function name, function)
    2. After putting it on the constructor, every instance of new will have this method -- this is called global filter
    3. The global filter should be placed at the top of the page and mounted before new
    */
    Vue.filter('myFilter1',(data,name)=>{   //filter does not have s, so you need to mount one by one
        return data + name ;
    })
    let vm1 = new Vue({ 
    	el:'#app1',      
    })
    let vm2 = new Vue({ 
        el:'#app2', 
    })
    </script>
</body>
</html>

2. Calculated calculation attribute

  1. Attribute in computed, not method
  2. There will be no cache in the method. The calculation attributes in computed will be buffered according to the attributes of the dependency (data managed by vue, which can be changed in response). If the dependency value is unchanged, it will not be recalculated
  3. The calculation attribute consists of two parts: get and set (you can't write only set). In general, the set method will be called when js is used to affect other people or when the form element sets a value
  4. Computed calls the get method by default, and the get method must have return, but computed does not support asynchrony. You can use watch to solve this problem
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="shortcut icon" href="#" type="image/x-icon">
</head>
<body>
    <div id="app">   
      //All election <input type="checkbox" v-model='checkAll'>
      <hr>
      <input type="checkbox" v-for='item in lists' v-model='item.isSelected'>
      <br>
      <br>
      <br>
      <hr>
      <input type="text" v-model='a'>{{msg}}
      <!-- Calculate an error message based on the value of the input box  -->
      </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({ 
        el:'#app',
        computed:{//computed calls the get method by default, and the get method must have return
            // But computed does not support asynchrony, which can be solved with watch
            checkAll:{
                get(){
                    return this.lists.every(ele =>{   //As for the result of return, you can assign a value to checkAll
                        return ele.isSelected == true;
                    })
                },set(val){    //val is passed when assigning a value to checkAll
                    this.lists.forEach(ele =>{
                        ele.isSelected = val;
                    })
                }
            },
            msg(){
                if(this.a.length < 3){
                    return 'The number of words needs to be greater than 3';
                }else if(this.a.length >6){
                    return 'The number of words should be less than 6';
                }else{
                    return '';
                }
            }
        },
        data:{
            a:'',
            lists:[
                {isSelected: true,name:'book'},
                {isSelected: false,name:'package'},
            ]
        }
    })
    </script>
</body>
</html>

3. watch

  1. Observe the change of a, do one thing when a changes (execute a function)
  2. Only when the value changes can it be triggered. Asynchronous is supported. In other cases, it is recommended to use computed
  3. The intermediate state can be set before the final result is obtained;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="shortcut icon" href="#" type="image/x-icon">
</head>
<body>
    <div id="app">   
      <input type="text" v-model='a'>{{msg}}
      </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({ 
        el:'#app',
        computed:{  //computed calls the get method by default, and the get method must have return
            // But computed does not support asynchrony, which can be solved with watch

        },
        watch:{  //Only when the value changes can it be triggered. Asynchronous is supported. In other cases, it is recommended to use computed
            // Observe the change of a, do one thing when a changes (execute a function)
            a(newVal , oldVal){   //The property name of the watch should be the same as the name of the observer. Execute this method as soon as it changes
            	this.msg = 'waiting......';   //, set the intermediate state before getting the final result
                setTimeout(()=>{
                    if(newVal.length < 3 && newVal.length >0){ 
                         this.msg = 'The number of words needs to be greater than 3';   //This return is not a return, but an end. In fact, the else if used here does not write return
                    }else if(newVal.length >6){
                        this.msg = 'The number of words should be less than 6';
                    }else{
                        this.msg = '';
                    }
                },10)
            }
        },
        data:{
            a:'',
            msg:''   //This value is the value at the beginning of the page entry
        }
    })
    </script>
</body>
</html>

In addition to the above, it can also be
vm. $watch (monitored data, function) $is its own internal method; main = = this cannot be used inside the method, vm should be used==

vm.$watch('a' , (newVal , oldVal)=>{ xx })

Which is better, watch or computed?

  1. If asynchrony is used to obtain a certain data, select watch;
  2. If asynchrony is not used, select calculated. For example, a data fullName = firstName +secondName + lastName. The data fullName depends on multiple data. If you use watch, it is more difficult. You need to observe multiple data. If you use calculated, you only need to write one

Interview question: the difference between watch,methods and computed?

  1. methods and computed: calculation attributes are cached based on their responsive dependency. Only when the dependent data changes will they be recalculated. If there is no cache, there will be a call method for rendering or data change
  2. Watch and computed: watch supports asynchrony, computed does not support asynchrony, but it is better to use computed when one data is obtained depending on multiple data

4.template

  1. The template tag is provided to us by vue. It has no practical significance and is used to wrap elements
  2. v-show does not support template, only v-if can be placed on the template label
 <div v-if='false'>111</div>
 <div v-if='false'>222</div>
 <div v-if='false'>333</div>
 <div>hello</div>

<template v-if='false'>  
    <div>111</div>
    <div>222</div>
    <div>333</div>
</template>

<div>hello</div>

Toggle label:

< button @ Click =! Flag '> toggle < / button >
<template v-if='flag'>
   < label for = "" > log in < / label >
   <input type="text" key='1'>
   <! -- by defau lt, the same structure will be reused when you switch the dom again. If you do not need to reuse, you need to add key -- >
   <! --: key='1 'has a colon, which is a variable. This is the number 1. Without a colon, the string 1 -- >
</template>
<template v-else>
    < label for = "" > registration < / label >
    <input type="text" key='2'>
 </template>

5. Dynamic binding style

v-bind: dynamically bind 'attribute', class or style can write in two ways: object or array

: class = "object / array"

class:

  1. The style of: class binding does not conflict with that of class binding. The value of: class can be an object or an array
  2. Object writing method:: class="{z:flag,y:true}" note that "{}" is placed in "", and the value "true" takes effect
  3. Array:: class = "[Class1, class2, 'm']" Class1 / class2 is a variable. M is either a variable or a class name
         <!-- v-bind: Dynamic binding'attribute',class or style Write in two ways: object or array -->
        
         <div class="font1" :class="flag ? 'red':'' ">111</div>
         <!-- :class Bound styles and class The binding does not conflict,:class The value of can be an object or an array -->
        
         <div class="font2" :class="{font1:flag,green:true}">222</div>
         <div class="font2" :class="{true:'font1 green',false:'blue'}[true]">333</div>
        <!-- Participants: :class="{z:flag,y:true}"   Be careful{}In "" value true Take effect -->

         <div :class="[class1,class2,'blue']">444</div>
         <div :class="[class1,class2,{red:false}]">555</div>
        <!-- Array: :class="[class1,class2,'m']"    class1/class2 It's a variable. m Either variable or class name -->
        
        <hr>
        <!-- Interlacing -->
        <ul>
            <li v-for='(a,index) in 10' :class='{red:index%2}'>{{a}}</li>
        </ul>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="shortcut icon" href="#" type="image/x-icon">
    <style>
        .red{
        background: red;
        }
        .blue{
        background: blue;
        }
        .green{
        background: green;
        }
        .font1{
            font-weight: 900;
        }
        .font2{
            color:palevioletred;
        }
    </style>
</head>
<body>
    <div id="app">   
         <!-- v-bind: Dynamic binding'attribute',class or style Write in two ways: object or array -->
        
         <div class="font1" :class="flag ? 'red':'' ">111</div>
         <!-- :class Bound styles and class The binding does not conflict,:class The value of can be an object or an array -->
        
         <div class="font2" :class="{font1:flag,green:true}">222</div>
         <div class="font2" :class="{true:'font1 green',false:'blue'}[true]">333</div>
        <!-- Participants: :class="{z:flag,y:true}"   Be careful{}In "" value true Take effect -->

         <div :class="[class1,class2,'blue']">444</div>
         <div :class="[class1,class2,{red:false}]">555</div>
        <!-- Array: :class="[class1,class2,'m']"    class1/class2 It's a variable. m Either variable or class name -->
        
        <hr>
        <!-- Interlacing -->
        <ul>
            <li v-for='(a,index) in 10' :class='{red:index%2}'>{{a}}</li>
        </ul>

        <!-- ------------style------------ -->
        <div style='font-size:18px;' :style="{backgroundColor:'red',color:'#fff'}">style style</div>
        <div :style="[style1,style1,{fontSize:'14px;'}]">style 222</div>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({ 
        el:'#app',
        
        data:{
            class1:'font1',
            class2:'font2',
            style1:{backgroundColor:'blue'},
            style2:{color:'green'},
            flag:true,
        }
    })
    </script>
</body>
</html>

: style = "object / array"

  1. Attribute name should be named with small hump
<div style='font-size:18px;' :style="{backgroundColor:'red',color:'#fff'}">style style</div>

<div :style="[style1,style1,{fontSize:'14px;'}]">style 222</div>
42 original articles published, 3 praised, 10000 visitors+
Private letter follow

Topics: Vue Attribute IE less

Hot Topics

©2024 Programmer Think