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

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>

posted on 2017-05-04 14:41 yangh_martin 阅读(196) 评论(0) 编辑收藏举报

刷新页面返回顶部