【vue系列-04】vue的表单数据收集，基本指令和自定义指令

逃离我推掉我的手 2024-03-30 13:56 43阅读 0赞

#### vue的表单数据收集、指令 ####

*  一，vue的核心属性
 *   *  1，收集表单数据
     *   *  1.1，收集数据案例
         *   *  1.1.1，type类型的输入框
             *  1.1.2，radio类型的单选框
             *  1.1.3，checkbox类型的复选框
             *  1.1.4，select类型的下拉框
         *  1.2，收集表单数据总结
         *  1.3，v-model的三个修饰符
     *  2，指令
     *   *  2.1，基本指令
         *   *  2.2.1，v-text
             *  2.2.2，v-html
             *  2.2.3，v-clock
             *  2.2.4，v-once
             *  2.2.5，v-pre
         *  2.2，自定义指令
         *   *  2.2.1，函数式自定义指令
             *  2.2.3，对象式自定义指令
             *  2.2.3，全局指令

## 一，vue的核心属性 ##

### 1，收集表单数据 ###

#### 1.1，收集数据案例 ####

可以使用这个v-model实现这个数据的绑定，但是在有些输入框中，还需要一些其他的指令搭配这个v-model指令结合使用。

##### 1.1.1，type类型的输入框 #####

这种方式的输入框，是可以直接通过这个v-model获取到值的。因为**v-model默认就是收集输入框的value值**

账号：<input type="type" v-model = "userInfo.account"> <br/><br/>
    密码：<input type="type" v-model = "userInfo.possword"> <br/><br/>
    
    
     data:{
        
    	userInfo:{
        
         	account:'',
             possword:''
         }
     }

##### 1.1.2，radio类型的单选框 #####

和上面的type类型不一样，因为上面的text类型有输入的value，而这种类型的数据没有输入值，只有单选值，因此需要在这个标签内部加上这个value值，这样才能获取到选择的值。

性别：
    男<input type="radio" name="sex" v-model = "userInfo.sex"  value="male">
    女<input type="radio" name="sex" v-model = "userInfo.sex" value="female"> <br/><br/>
        
    
     data:{
        
    	userInfo:{
        
         	sex:''
         }
     }

##### 1.1.3，checkbox类型的复选框 #####

在这个复选框中，由于也和这个单选框一样，只有选择，没有具体的输入这个value值，因此需要在标签内部加上这个value值，除了需要在这个标签内部加上这个value值之外，还需要在vue实例的data中，通过数组的方式接收这个复选框所选择的值。

爱好:
    学习<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/>
    
    
     data:{
        
    	userInfo:{
        
         	hobby:[]
         }
     }

如果复选框没有这个value值，那么勾选的本质就是一个布尔属性，如需要在勾选注意事项的时候，是可以不需要这个value值的，并且在data中接收到的这个值也是一个布尔值。

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

##### 1.1.4，select类型的下拉框 #####

这个由于也是选择框，没有输入具体的数据，因此需要在option中配置value值。并且在vue实例中的data数据用字符串接收即可。

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

#### 1.2，收集表单数据总结 ####

**text**

若输入框是一个文本属性，则v-model收集的值是value值，用户输入的值就是value值

**radio**

若输入框是一个单选框，则v-model收集的是value值，并且在标签内需要配置value值

**checkbox**

若输入框是一个复选框，那就需要分情况讨论

1，如果input中没有配置value属性，那么收集到的就是一个是否勾选的checked，是一个布尔值

2，如果input输入框中有配置value的属性：

(1).如果在data中的初始值是一个非数组，如一个字符串，那么收集到的也是checked的布尔值

(2).如果data中的初始值是一个数组，那么收集到的就是value组成的数组

#### 1.3，v-model的三个修饰符 ####

**lazy**

指的是失去焦点在收集数据，如下在文本框中输入数据时，不需要实时的根据用户的输入或者删除将内容进行数据的收集，而是在点击其他组件，失去焦点的时候再去收集全部的数据

**number**

输入字符串转化为有效的数字，比如在输入用户的年龄或者电话号码的时候，如果后端没有做这个是否为全部数字的校验的时候，那么就可以通过这个指令进行校验了。这个指令一般搭配这个输入框的number类型一起使用

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

**trim**

对输入的数据进行收尾的去除空格。这个在实际开发中，如果后端没有及时的对前端传过来的数据进行一个字符串的去空格的话，也是可以通过前端的这个指令进行一个数据的去重的。

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

### 2，指令 ###

#### 2.1，基本指令 ####

在vue内部提供了很多可以直接使用的指令，如一些使用比较频繁的指令，如下

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

除了上面这些使用的频繁的基本指令之外，vue也提供了很多的其他指令

##### 2.2.1，v-text #####

可以直接在标签中使用，将会把标签所在的结点渲染文本内容

<div v-text = "name"></div>
    <div>{
        {
        name}}</div>
    
    data:{
        
    	name:'zhs'
    }

但是使用这个标签的时候，v-text会替换掉整个结点的内容，如果直接使用 \{ \{\}\} 的插值语法获取值，就不会替换，因此直接使用 **\{ \{\}\}** 来获取值更灵活。

但是如果整个节点只有数据中的那一个值，如上面的只有name值，那么v-text和这个插值语法是等价的，如果结点中还有其他值，那么就不推荐使用这个v-text了。如下，如果结点中还有你好两个字，那么就不能使用v-text，而是需要使用下面的双花括号 的插值语法的形式获取值。

同样这个结点也不会去解析data数据中的含有标签的值。如下，如果实例中的值是一个含有标签的值，在使用v-text的时候，会直接将这个str的这个值以文本的形式直接渲染在结点中，而不会对里面的标签进行一个解析。

<div v-text = "str"></div>
    
    data:{
        
    	str:"<h3> 你好！</h3>"
    }

##### 2.2.2，v-html #####

这个v-html和这个v-text的这个文本使用是一样的，可以替换整个结点的内容。但是和v-text不一样的就是，v-html可以对data数据中的内容进行一个html的解析，如果数据中的字符串有html的标签，那么会直接对这些标签进行一个解析。

<div v-text = "str"></div>
    
    data:{
        
    	str:"<a href = "www.baidu.com"> 点我跳转百度</h3>"
    }

但是在使用这个v-html的时候，会带有一定的安全性的问题，如果在网站上动态的渲染html，会容易的导致XSS攻击，因此一定要在可信的内容上使用v-html

##### 2.2.3，v-clock #####

该指令是一个没有值的指令，如果在网速慢时，导致vue实例加载比较慢，从而让html页面给正常加载在页面，让用户看到一些未经加载的不友好的页面时，可以使用这个v-clock。

v-clock一般搭配这个css中的属性样式使用，如果在网速慢时，导致这个 \{ \{name\}\} 直接以文本的形式渲染在页面上，那么可以先使用这个display这个属性将对应的html的内容暂时给隐藏掉，在加载到vue实例之后，那么这个v-clock这个指令就会被删除，那么这个display也使用不上，那么这个name对应的值就会被正常的展示

##### 2.2.4，v-once #####

该指令也是一个没有值的指令，就是值在标签中使用这个指令之后，初次渲染这个值是一个动态指令，渲染完这个值之后会这里面的内容就会变成一个静态的内容，以后数据发生改变的时候不会引起v-once所在结果的更新。

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

##### 2.2.5，v-pre #####

这个结点也是没有值的，如果在结点上加了这个这个指令，那么vue会跳过该结点的编译过程，就是会将开发人员在结点上写的内容直接渲染在页面上，因此这个指令最好不要乱加。但是也可以通过添加这个指令，将一些没有使用到指令语法，插值语法的结点更快的加速编译。

如下第一个h1标签为纯文本，和vue实例没有太大关系，因此为了加速编译，可以直接使用这个v-pre指令。

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

#### 2.2，自定义指令 ####

##### 2.2.1，函数式自定义指令 #####

就是自定义一些vue中不存在的指令，可以在vue实例中通过这个directives来实现，他和data平级，里面通过定义函数来实现这个自定义的命令，在定义函数时不需要加上v- ，不过在使用的时候需要加上。

假设一个需求，定义一个 **v-big** 的指令，其功能和v-text类似，但是会将绑定的数值放大10倍。其完成的代码实现如下：

<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>

**并且big函数被调用的时机有两种**

1：指令与元素成功绑定时，就是一上来第一次使用的时候

2：指令所在的模板被重新解析时被调用，比如data中有数据发生改变

##### 2.2.3，对象式自定义指令 #####

再来一个需求，就是自定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认的获取焦点。

<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>

从上面两段可以发现，这个函数式的写法就是对象式的简写，由于binding和这个update两个函数要做的事基本是一样的，因此在函数式中只需要写一份即可。而这个inserted就是为了解决指令绑定完元素，但是元素还在内存中，还没有应用到页面上而出现的问题。

##### 2.2.3，全局指令 #####

上面两个讲的主要是在vue实例的局部指令，如果多个实例都需要使用这个指令的话，那么就可以定义成全局指令。

**函数式全局指令**

//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
        }
    })

这样就可以实现全局的指令配置了，其底层原理和过滤器一样。