Vue核心知识：v-model语法糖的使用，了解数据双向绑定

v-model语法糖在组件上的使用
实现效果：如果在一个页面中我们需要引入一个弹窗组件，点击按钮 a显示弹窗，然后点击弹窗的关闭按钮，关闭弹窗，用v-model实现。
使用v-model来进行双向数据绑定的时：
<input v-model="something">
仅仅是一个语法糖：
<input v-bind:value="something" v-on:input="something = $event.target.value">
所以在组件中使用的时候，相当于下面的简写：
<custom v-bind:value="something" v-on:input="something = $event.target.value"></custom>
所以要组件的v-model生效，它必须：
接受一个value属性
在有新的value时触发input事件
使用示例（单页应用）：
<template>
    <div class="toggleClassWrap">
     <modelVue v-if="ifShow" v-model="ifShow"></modelVue>
    </div>
</template>
<script type="text/javascript">
    import modelVue from '../../components/model.vue'
    export default{
        data () {
            return {
                ifShow:true,
            }
        },
        components : {
            modelVue
        }
    }
</script>
model.vue组件
<template>
 <div id="showAlert">
 <div>showAlert 内容</div>
 <button class="close" @click="close">关闭</button>
 </div>
</template>
<script>
 export default{
 props:{
 value:{
 type:Boolean,
 default:false,
 }
 },
 data(){
 return{}
 },
 mounted(){
 
 },
 methods:{
 close(){
 this.$emit('input',false);//传值给父组件, 让父组件监听到这个变化
 }
 },
 }
</script>
<style scoped>
 .close{
 background:red;
 color:white;
 }
</style>
上述只有在工程目录中才方便看到效果，改成demo：