v-model组件理解

 Vue的确很好玩，但是有时候方向盘打得太急，转弯甩到外太空云里雾里~~~~我在这里，以下是今天的主题关于v-model的理解，关于官方文档中使用自定义事件的表单输入组件这个案例个人理解其实是一个内部定义的v-model组件，可以在自定义子组件时用model：{prop：xx，event：xx}来显示声明：

html：

<div id="asdf"><currency-input v-model="price"></currency-input></div>

js:

<script type="text/javascript">Vue.component("currency-input",{template:'\    <span>\      $\      <input\        ref="input"\        v-bind:value="valueq"\        v-on:input="updateValue($event.target.value)"\      >\    </span>\  ',  model:{  prop:"value",  event:"input"  }, props:["valueq"], methods:{ updateValue:function(value){ var formattedValue = value.trim().slice(0,value.indexOf(".")===-1?value.length:value.indexOf(".")+3); if(formattedValue !== value){ this.$refs.input.value = formattedValue; } this.$emit("input",Number(formattedValue)); } }, });new Vue({el:"#asdf",data:{  price:this.updateValue }})</script>

valueq是博主自己在理解官网demo的时候踩了坑此处特意标注一下，这个例子为理解用作其他用途的v-model做了铺垫，以下是一个小小的简单的例子：

html：

<div id="app"><my-checkbox v-model="foo"></my-checkbox></div>

js：

Vue.component("my-checkbox",{

    template:"\

        <label>\

        <input type='checkbox' value='sss' :checked='cccc' @change='say'>apple\

        </label>\

    ",

    model:{

        prop:'checked',

        event:'change'

    },

    props:{

        cccc:true,

        sss:"hello world"

    },

    methods:{

        say:function(){

            this.$emit('change',alert(1111));

        }

    }

});

new Vue({

    el:"#app",

    data:{

        foo:''

    }

})

不知道为了什么。。。忧愁它围绕着我。。。我每天都在祈祷。。。快让我吃吃吃饱。。。