Vue常用特性（表单操作，自定义指令，表单域修饰符，计算属性，侦听器）

最新推荐文章于 2022-11-13 20:29:42 发布

Java程序猿哦~

最新推荐文章于 2022-11-13 20:29:42 发布

阅读量308

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/m0_64896985/article/details/124054665

版权

Vue常用特性（这些都会在下面的案例中展现）

1，表单操作

input单行文本，textarea多行文本，select下拉多选，radio单选框，checkbox多选框

2，自定义指令

为何需要自定义指令？

内置指令不满足需求

内置指令分为全局和局部

3，表单域修饰符

number：转化为数值

trim：去掉开始和结尾空格

lazy：将input事件切换成change事件

3，计算属性

为何需要计算属性？

表达式的计算逻辑可能会比较复杂，使用计算属性可以是模板内容更加简洁

4，侦听器

侦听器使用场景

数据变化时执行异步或开销较大的操作

案例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js" type="text/javascript"></script>
</head>
<body>
    <div id="app">
        <form>
            <!--文本框 v-model="msg"默认值 -->
            用户名:<input type="text" v-model="msg"><br/>
            <!--单选 v-model="gender" gender可以根据value值默认选中 -->
            性别：<input type="radio" value="0" v-model="gender">男  <input type="radio" value="1" v-model="gender">女<br/>
            <!--下拉菜单 如果默认选择一个v-model="perfession" perfession这里根据value的值进行选择  如果默认选择多个perfession可以使用数组的形式 需要加上multiple -->
            职业：<select name="perfession" v-model="perfession" multiple>
                <option value="1">老师</option>
                <option value="2">工程师</option>
                <option value="3">前端</option>
                <option value="4">后端</option>
            </select>
            爱好：
            <!-- 复选框 v-model="hobby"默认选择多个 hobby使用数组的形式 -->
            <input type="checkbox" value="1" v-model="hobby">足球
            <input type="checkbox" value="2" v-model="hobby">篮球
            <input type="checkbox" value="3" v-model="hobby">台球
            <input type="checkbox" value="4" v-model="hobby">网球
            <input type="checkbox" value="5" v-model="hobby">乒乓球<br/>
            <!-- 文本域 v-model="intreduce" intreduce进行默认值 -->
            简介<textarea name="intreduce" v-model="intreduce"></textarea><br/>
            <!-- prevent取消默认行为 -->
            <input type="submit" value="提交" @click.prevent="handle">
        </form>
        <div>
            <!-- number转化为数值 不使用number会进行字符串拼接 -->
            <input type="text" v-model.number="msg1"><br>
            <button @click="handle1">点击</button><br>
            <!-- trim去掉开始和结尾的空格 中间的空格不能去除-->
            <input type="text" v-model.trim="msg2">{{msg2}}<br>
            <button @click="handle2">点击2</button><br>
            <!-- lazy将input事件切换为change事件 -->
            <input type="text" v-model.lazy="msg3">{{msg3}}<br>
        </div>
        <div>
            <!-- v-fouce使用我们自定义的指令 -->
            获得焦点<input type="text" v-fouce ><br>
            获得焦点<input type="text" v-color="color" >
        </div>
        <div>
            {{info}}
            <!-- split('')根据空格切割 reverse()进行翻转 join('')根据空格拼接展示 -->
            {{info.split('').reverse().join('')}}<br>
            <!-- 计算属性会缓存 只调用一次除非值发生变化 -->
            {{reverseString}}
            <!-- 第二次会调用缓存里的 -->
            {{reverseString}}
            <!-- 方法没有缓存 每次都会重新执行 -->
            {{reversehandle()}}
            {{reversehandle()}}
        </div>
        <div>
            <!-- 侦听器实现更改姓名 -->
            <input type="text" v-model="firstname"/><br>
            <input type="text" v-model="lastname"/><br>
            {{fullname}}
            <!-- 计算属性实现更改姓名 -->
            {{watdemo}}
        </div>
    </div>
    <script type="text/javascript">
        // 自定义全局指令（所有组件都能访问）   fouce指令名称 
        Vue.directive('fouce', {
            // el代表所使用这个指令的本身
            inserted:function(el){
                // focus()获取焦点
                el.focus();
            }
        })
        Vue.directive('color', {
            // el代表所使用这个指令的本身 binding传过来的参数
            inserted:function(el,binding){
                // 修改背景颜色 binding.value拿使用这个指令的参数的值 在此，就是拿获得焦点的文本框里面指令
                el.style.backgroundColor=binding.value;
            }
        })
        new Vue({
            el:"#app",
            data:{
                msg:"zzp",
                gender:"1",
                perfession:["1","2"],
                hobby:["1","3"],
                intreduce:"haha",
                msg1:"",
                msg2:"",
                msg3:"",
                color:"blue",
                info:"hello",
                firstname:"周",
                lastname:"星驰",
                fullname:"周"+"---"+"星驰"
            },
            methods: {
                handle:function(){
                    console.log(this.intreduce);
                },
                handle1:function(){
                    console.log(this.msg1+22);
                },
                handle2:function(){
                    console.log(this.msg2.length);
                },
                reversehandle:function(){
                    console.log("reversehandle")
                    return this.info.split('').reverse().join('');
                }
            },
            // 自定义局部指令 只有当前组件能够访问
            directives:{
                color:{
                inserted:function(el,binding){
                // 修改背景颜色 binding.value拿使用这个指令的参数的值 在此，就是拿获得焦点的文本框里面指令
                el.style.backgroundColor=binding.value;
            }
                }
            },
            computed: {
                // 直接当做普通属性调用不加括号
                // 任何data中数据变化立即重新计算
                // 计算属性会缓存
                reverseString:function(){
                    console.log("reverseString")
                // 必须retrun结果
                return this.info.split('').reverse().join('');
                },
                watdemo:function(){
                    return this.firstname+"---"+this.lastname;
                }
            },
            // 侦听器
            watch: {
                //firstname 要观察的对象(一般为非DOM事件)
                firstname:function(val){//val代表侦听的数据
                    this.fullname=val+"---"+this.lastname;
                },
                lastname:function(val){
                    this.fullname=this.firstname+"---"+val;
                }
            },
        })
    </script>
</body>
</html>

Java程序猿哦~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue常用特性（表单操作，自定义指令，表单域修饰符，计算属性，侦听器）

Vue常用特性（这些都会在下面的案例中展现）1，表单操作input单行文本，textarea多行文本，select下拉多选，radio单选框，checkbox多选框2，自定义指令为何需要自定义指令？内置指令不满足需求内置指令分为全局和局部3，表单域修饰符number：转化为数值trim：去掉开始和结尾空格lazy：将input事件切换成change事件3，计算属性为何需要计算属性？表达式的计算逻辑可能会比较复杂，使用计算属性可以是模板内容更加简洁4，
复制链接

扫一扫