vue loop resolving, custom filter, avoid flickering

Keywords: Vue JSON Attribute

* vue version 1.0

Repeated resolution of vue loop data

v-for specifies that duplicate data will be deleted if duplicate data occurs during looping.

vue1.0: Just add track-by="$index" <li v-for='value in arr'track-ty='$index'></li>where V-for loop goes

vue2.0+: need to get index on v-for, for example: <li v-for='(value, index) in arr'track-ty='index'></li>

* vue loading prevents users from seeing {{}} curly braces

1>vue1.0 Use v-cloak, where curly braces are used

Defined in css: [v-cloak]{display:none;}, add <div to the node id='box' v-cloak>{{msg}}</div>

2>Replace {{text}} curly braces with the v-text directive

3>Replace the {{{html}} escaped curly braces with the v-html directive

	vue custom filter

vue1.0 provides its own filters, limitBy,orderBy, etc. Custom filter syntax in vue:

Vue.filter(name,function(input){
			return xxx;
		});
For instance:

<script src="lib/vue2.0.js"></script>
</head>
<body>
    <div id="box">
        {{a|toDou}}
    </div>
</body>
<script>
    Vue.filter('toDou',function (input) {
        return input<10?'0'+input:''+input;
    })
    var vm=new Vue({
        data:{
            a:9
        },
        methods:{

        }
    }).$mount('#box');
</script>
        vue bi-directional filter

<script src="lib/vue.js"></script>
    <script>
        //<h2>welcome</h2>
        Vue.filter('filterHtml',{
            read:function(input){ //model-view
                return input.replace(/<[^<]+>/g,'');
            },
            write:function(val){ //view -> model
                console.log(val);
                return val;
            }
        });
        window.onload=function(){
            var vm=new Vue({
                data:{
                    msg:'<strong>welcome</strong>'
                }
            }).$mount('#box');
        };

    </script>
</head>
<body>
<div id="box">
    <input type="text" v-model="msg | filterHtml">
    <br>
    {{{msg}}}//Escape html output
</div>
The output is: welcome

    Listen for data changes

    vm.$watch(name,fnCb); //shallowness

<script >
    var vm = new Vue({
        data:{
            a:111,
            b:22
        }
    }).$mount('#box');
    vm.$watch('a',function () {
        this.a = this.a+1;
    });
    document.onclick = function () {
        vm.a = 1;
    };
</script>
   vm.$watch(name,fnCb,{deep:true}; //Deep monitoring, attribute changes can also be monitored

 window.onload=function(){
        var vm=new Vue({
            el:'#box',
            data:{
                json:{name:'strive',age:16},
                b:2
            }
        });

        vm.$watch('json',function(){
            alert('Has changed');
        },{deep:true});

        document.onclick=function(){
            vm.json.name='aaa';
        };
    };

Posted by sgtpepper on Thu, 16 Jul 2020 07:21:59 -0700

Programmer Group

vue loop resolving, custom filter, avoid flickering

Hot Keywords