vue的表单数据收集案例之基本指令和自定义指令详解

账号：<input type="type" v-model = "userInfo.account"> <br/><br/>
密码：<input type="type" v-model = "userInfo.possword"> <br/><br/>

<!-- vue实例中的data数据 -->
 data:{
	userInfo:{
     	account:'',
         possword:''
     }
 }

性别：
男<input type="radio" name="sex" v-model = "userInfo.sex"  value="male">
女<input type="radio" name="sex" v-model = "userInfo.sex" value="female"> <br/><br/>
    
<!-- vue实例中的data数据 -->
 data:{
	userInfo:{
     	sex:''
     }
 }

爱好:
学习<input type="checkbox" v-model = "userInfo.hobby" value="study">
运动<input type="checkbox" v-model = "userInfo.hobby" value="sport">
打游戏<input type="checkbox" v-model = "userInfo.hobby" value="games">  <br/><br/>

<!-- vue实例中的data数据 -->
 data:{
	userInfo:{
     	hobby:[]
     }
 }

<input type="checkbox" v-model = 'userInfo.agree'>接受并订阅

<!-- vue实例中的data数据 -->
 data:{
	userInfo:{
     	agree:''
     }
 }

所属地区：
<select v-model="userInfo.city">
    <option value="">请选择所属地区</option>
    <option value="江西">江西</option>
    <option value="广东">广东</option>
    <option value="贵州">贵州</option>
    <option value="贵州">湖南</option>
</select> <br/><br/>

<!-- vue实例中的data数据 -->
 data:{
	userInfo:{
     	city:''
     }
 }

<input type = "text">

<input type = "radio">

 <textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>

年龄：<input type="number" v-model.number = "userInfo.age"> <br/><br/>

账号：<input type="type" v-model.trim = "userInfo.account"> <br/><br/>

v-bind：单向绑定			v-model：双向绑定 			v-for：遍历数组			v-on：监听事件
v-if：条件渲染(控制结点是否存在)		v-show：条件渲染(控制结点是否展示)		v-else：配合v-if使用

<div v-text = "name"></div>
<div>{{name}}</div>
<!-- vue实例中的data数据 -->
data:{
	name:'zhs'
}

<div v-text = "name"></div>
<div>你好，{{name}}</div>

<div v-text = "str"></div>
<!-- vue实例中的data数据 -->
data:{
	str:"<h3> 你好！</h3>"
}

<div v-text = "str"></div>
<!-- vue实例中的data数据 -->
data:{
	str:"<a href = "www.baidu.com"> 点我跳转百度</h3>"
}

<style>
    //只有是这个v-clock属性的都有下面的样式
	[v-clock]{
    	display:none;
	}    
</style>
<div id = "root">
	<h1 v-clock>{{name}}</h1>
</div>
<!-- vue实例中的data数据 -->
data:{
	name:'zhs'
}

<div id = "root">
	<h1 v-once>初始值为：{{n}}</h1>
    <h1>当前n的值为：{{n}}</h1>
    <button @click="n++">点我n+1</button>
</div>
<!-- vue实例中的data数据 -->
data:{
	n:1
}

<div id = "root">
	<h1 v-pre>vue其实很简单</h1>
    <h1>当前n的值为：{{n}}</h1>
    <button @click="n++">点我n+1</button>
</div>
<!-- vue实例中的data数据 -->
data:{
	n:1
}

<div id="root">
    <h1>当前元素的值是：<span v-text = "n"></span></h1>
    <h1>放大10倍后的值是：<span v-big = "n"></span></h1>
    <button @click="n++">点我n+1</button>
</div>

<script type="text/javascript" >
    Vue.config.productionTip = false    //阻止vue启动时提示生产提示
    new Vue({
        //指定当前实例为哪个容器服务，id对应#，class对应.
        el:'#root',
        //data用于存储数据，只有el对应的容器可以使用
        data:{
            n:1
        },
        directives:{
            // element：一个真实的dom元素span
            // binding：标签和元素之间的绑定，即span和这个big之间的绑定           
            big(element,binding){
                //修改元素里面的值
                element.innerText = binding.value * 10;
                console.log(element,binding)
            }
        }
    })
</script>

<div id="root">
    <input type="text" v-fbind:value = "n">
</div>

<script type="text/javascript" >
    Vue.config.productionTip = false    //阻止vue启动时提示生产提示
    new Vue({
        //指定当前实例为哪个容器服务，id对应#，class对应.
        el:'#root',
        //data用于存储数据，只有el对应的容器可以使用
        data:{
            n:1
        },
        directives:{
            fbind:{
                //指令与元素成功绑定时
                bind(element,binding){
                    element.value = binding.value * 10
                },
                //指令所在元素被插入页面时
                inserted(element,binding){
                    element.focus();
                },
                //指令所在的模板被重新解析时被调用 
                update(element,binding){
                    element.value = binding.value * 10
                }
            }
        }
    })
</script>

//Vue.directive(指令名，回调函数)
Vue.directives("big",function(element,binding){
   //修改元素里面的值
   element.innerText = binding.value * 10;
   console.log(element,binding)
)

//Vue.directive(指令名，配置对象)
Vue.directives("fbind",fbind:{
    //指令与元素成功绑定时
    bind(element,binding){
        element.value = binding.value * 10
    },
    //指令所在元素被插入页面时
    inserted(element,binding){
        element.focus();
    },
    //指令所在的模板被重新解析时被调用 
    update(element,binding){
        element.value = binding.value * 10
    }
})