步入vue第二天

v-model的修饰符

v-model修饰符
.lazy 失去焦点后提交值
.number有效转换"1"== 1 为数字
.trim清除前后空格

laze实例

 <textarea v-model.lazy="formData.other" name="" id="" cols="30" rows="10"></textarea>
 结果会提交文本域的值给formData.other

number实例

年龄：<input type="number" v-model.number="formData.ages">
v-model.number有效转换"1"== 1 为数字

trim实例

姓名：<input type="text" v-model.trim="formData.userName">
去除字词前后的空格

v-model

是什么？

1.双向数据绑定，既可以从data流向页面，也可以由页面流向data
2.通常用于表单收集，v-model默认绑定value值
3.v-model:value=““或v-model=””(简写)

原理？

1.v-model本质是一个语法糖
2.v-bind绑定数据
3.oninput数据传递

directives局部自定义指令语法

directives:{
            "nums":{
                // bind成功绑定时调用
                bind(element,binding){
                    console.log(element);
                    console.log(binding);
                    element.innerText = binding.value*10;
                    binding.value = binding.value*10;
                    console.log("----------------");
                },
                // inserted成功插入页面调用
                inserted(element,binding){
                    console.log(element);
                    console.log(binding);
                    element.innerText = binding.value*100;
                    binding.value = binding.value*100;
                    console.log("----------------");
                },
                // update重新解析时(改变)调用
                update(element,binding){
                    console.log(element);
                    console.log(binding);
                    element.innerText = binding.value+binding.oldValue;
                    binding.value = binding.oldValue;
                    console.log("----------------");
                }
            }
        }