vue--指令中值得随笔的地方

v-model-- 双向数据绑定
1. number修饰指令

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>number</title>

</head>

<body id="app">

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

{{num}}

</body>

<script src="../../bower_components/vue/dist/vue.js"></script>

<script>

    var vm=new Vue({

        el:'#app',

        data:{

            num:23

        }

    });

//修饰符 number部分源码

/*

export function toNumbet(value){

       if (typeof value !== "string"){

       return value

       }else {

       var parsed = Number(value)

       return isNaN(parse)? value : parsed

}

  */

</script>

</html>

2.debounce--不同于filter中的debounce,它们的实现原理相似(settimeout),作用不同,该指令用于延迟用户输入数据同步到model中的时间,并不能延迟用户输入事件的延迟所以想要获取变化后的数据，用$watch（）监听；而事件的延迟filter中的debounce

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>debounce</title>

</head>

<body id="app">

<input type="text" v-model="refresh" debounce="1000">

<p>{{refresh}}</p>

</body>

<script src="../../bower_components/vue/dist/vue.js"></script>

<script>

    var vm=new Vue({

        el:'#app',

        data:{

            refresh:''

        }

    })

</script>

</html>

巴特西

vue--指令中值得随笔的地方

最新文章

热门文章