Vue常用特性~非常详细哦，带源码资料

最新推荐文章于 2023-03-20 15:58:37 发布

weixin_46370867

最新推荐文章于 2023-03-20 15:58:37 发布

阅读量86

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_46370867/article/details/113063566

版权

Vue 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

下面是对Vue常用特性的整理，希望可以帮助到有需要的小伙伴~
源码资料：
链接：https://pan.baidu.com/s/14rRYtUfXkO6mxUtCh4FCcA
提取码：e0sw

Vue常用特性

常用特性概览

表单操作
自定义指令
计算属性
过滤器
侦听器
生命周期

表单操作

在这里插入图片描述

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

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
    <style>
        form div {
            height: 40px;
            line-height: 40px;
        }

        form div:nth-child(4) {
            height: auto;
        }

        form div span:first-child {
            display: inline-block;
            width: 100px;
        }
    </style>
</head>
<body>
    <div id="app" action="https://www.taobao.com/">
        <form>
            <div>
                <span>姓名：</span>
                <span>
                    <input type="text" v-model="uname">
                </span>
            </div>

            <div>
                <span>性别：</span>
                <span>
                    <!-- 用value值，把男和女区分出来 -->
                    <input type="radio" id="male" value="1" v-model="gender">
                    <label for="male">男</label>
                    <input type="radio" id="female" value="2" v-model="gender">
                    <label for="female">女</label>
                </span>
            </div>

            <div>
                <span>爱好：</span>
                <span>
                    <input type="checkbox" id="ball" value="1" v-model="hobby">
                    <label for="ball">篮球</label>
                    <input type="checkbox" id="sing" value="2" v-model="hobby">
                    <label for="sing">唱歌</label>
                    <input type="checkbox" id="code" value="3" v-model="hobby">
                    <label for="code">写代码</label>
                </span>
            </div>

            <div>
                <span>职业：</span>
                <!-- multiple="true" 多选的条件 
                    只写multiple也可以
                -->
                <select v-model="occupation" multiple="true">
                    <option value="0">请选择职业</option>
                    <option value="1">教师</option>
                    <option value="2">软件工程师</option>
                    <option value="3">律师</option>
                </select>
            </div>

            <div>
                <span>个人简介：</span>
                <textarea v-model="desc"></textarea>
            </div>

            <div>
                <!-- 阻止事件的默认行为 -->
                <input type="submit" value="提交" @click.prevent='handle'>
            </div>
        </form>
    </div>

    <script src="../../js/vue.js"></script>
    <script>
        // 表单基本操作
        var vm = new Vue({
            // el：告诉vue把数据插入到哪个位置
            el: "#app",
            // data: 提供数据
            data: {
                uname: 'lisi',
                gender: 1,
                hobby: ['2','3'],
                // occupation: 3
                occupation: ['2','3'],
                desc: 'nihao'
            },
            methods: {
                handle: function(){
                    // console.log(this.uname)
                    // console.log(this.gender)
                    // console.log(this.hobby.toString())
                    // console.log(this.occupation)
                    console.log(this.desc)
                }
            }
        })
    </script>
</body>
</html>

表单域修饰符

number :转化为数值
trim :去掉开始和结尾的空格，不能去掉中间的空格
lazy:将input事件切换为change事件（只要有内容的变化就会触发input事件，但是只有当失去焦点的时候才会触发change事件）

v-model.修饰符的名称 = “值”

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

示例number

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单作用域修饰符</title>
</head>
<body>
    <div id="app">
        <!-- number 把字符串转为数字类型 -->
        <input type="text" v-model.number="age">
        <button @click='handle'>点击</button>
    </div>
    <script src="../../js/vue.js"></script>
    <script>
        var vm = new Vue({
            // el：告诉vue把数据插入到哪个位置
            el: "#app",
            // data: 提供数据
            data: {
                age: ''
            },
            methods: {
                handle: function(){
                    console.log(this.age + 13)
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

示例trim

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单作用域修饰符</title>
</head>
<body>
    <div id="app">
        <!-- number 把字符串转为数字类型 -->
        <!-- <input type="text" v-model.number="age"> -->
        <input type="text" v-model.trim="info">
        <button @click='handle'>点击</button>
    </div>
    <script src="../../js/vue.js"></script>
    <script>
        var vm = new Vue({
            // el：告诉vue把数据插入到哪个位置
            el: "#app",
            // data: 提供数据
            data: {
                age: '',
                info: ''
            },
            methods: {
                handle: function(){
                    // console.log(this.age + 13)
                    console.log(this.info.length)
                }
            }
        })
    </script>
</body>
</html>

示例lazy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单作用域修饰符</title>
</head>
<body>
    <div id="app">
        <!-- number 把字符串转为数字类型 -->
        <!-- <input type="text" v-model.number="age"> -->
        <!-- <input type="text" v-model.trim="info"> -->
        <input type="text" v-model.lazy='msg'>
        <div>{{msg}}</div>
        <button @click='handle'>点击</button>
    </div>
    <script src="../../js/vue.js"></script>
    <script>
        var vm = new Vue({
            // el：告诉vue把数据插入到哪个位置
            el: "#app",
            // data: 提供数据
            data: {
                age: '',
                info: '',
                msg: ''
            },
            methods: {
                handle: function(){
                    // console.log(this.age + 13)
                    console.log(this.info.length)
                }
            }
        })
    </script>
</body>
</html>

自定义指令

为何需要自定义指令

内置指令不满足需求

自定义指令的语法规则（获取元素焦点)

directive 关键字

focus 指令名称

// 自定义指令
Vue.directive('focus',{
    inserted: function(el){
        el.focus();
    }
});

自定义指令用法

<input type="text" v-recus>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义指令</title>
</head>
<body>
    <div id="app">
        <input type="text">
        <!-- 将数据定位到什么位置 -->
     <input type="text" v-focus>
    </div>
    <script src="../../js/vue.js"></script>
    <script>
        // 自定义指令
        // directive 关键字
		// focus 指令名称
        Vue.directive('focus',{
            inserted: function(el){
                el.focus();
            }
        });

        var vm = new Vue({
            // el：告诉vue把数据插入到哪个位置
            el: "#app",
            // data: 提供数据
            data: {
            },
            methods: {
                handle: function(){

                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

带参数的自定义指令（改变元素背景色)

vue.directive ('color', {
	inserted: function (el,binding){
	el.style.backgroundcolor = binding.value.color;
	}
})

指令的用法

<input type="text" v-color= '{color : "orange"}'>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义指令</title>
</head>
<body>
    <div id="app">
        <!-- v-color="msg" 指令中的值相当于数中的orange -->
       <input type="text" v-color="msg">
    </div>
    <script src="../../js/vue.js"></script>
    <script>
        /*
            自定义指令 - 带参数
        */
       
       Vue.directive('color', {
           // el 对应的元素
           // binding 形参
            bind: function(el,binding){
                // 根据指令的参数设置背景色
                // console.log(binding.value.color) 
                el.style.backgroundColor = binding.value.color;
            } 
       })

       var vm = new Vue({
           el: '#app',
           data: {
               msg: {
                   color: 'orange'
               }
           },
           methods: {
               handle: function(){

               }
           }
       })
    </script>
</body>
</html>

在这里插入图片描述

局部指令

局部指令只能在本组件中使用

directives: {
	focus: {
	//指令的定义
	inserted: function (el) {
        	el.focus()
		}
	}
)

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义指令</title>
</head>
<body>
    <div id="app">
        <!-- v-color="msg" 指令中的值相当于数中的orange -->
       <input type="text" v-color="msg">
       <input type="text" v-focus>
    </div>
    <script src="../../js/vue.js"></script>
    <script>
        /*
            自定义指令 - 局部指令
        */
       
      
       var vm = new Vue({
           el: '#app',
           data: {
               msg: {
                   color: 'orange'
               }
           },
           methods: {
               handle: function(){

               }
           },
           // 自定义指令
           directives: {
            //    多个局部指令之间用逗号分开
               color: {
                    bind: function(el,binding){
                    // 根据指令的参数设置背景色
                    // console.log(binding.value.color) 
                        el.style.backgroundColor = binding.value.color;
                    }
               },
               focus: {
                   inserted: function(el) {
                       el.focus();
                   }
               }
           }
       })
    </script>
</body>
</html>

计算属性

为何需要计算属性

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

计算属性是把逻辑单独抽取出来

计算属性的用法

computed: {
               reverseString: function(){
					// 注意：一定要加上return关键字，this关键字
                   return this.msg.split('').reverse().join('')
					// 计算属性是基于data中的数据处理的，在本例中是msg数据
               }
           }

注意：

可以在页面交互的实现计算属性的逻辑功能
在抽取出来的逻辑前一定要加上 return关键字、this关键字
计算属性是基于data中的数据处理的
使用的时候直接写函数名

普通示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性</title>
</head>
<body>
    <div id="app">
       <div>{{msg}}</div>
       <!-- reverse() 反转的方法
            join() 字符串拼接的方法
        -->
       <div>{{msg.split('').reverse().join('')}}</div>
    </div>
    <script src="../../js/vue.js"></script>
    <script>
       
      
       var vm = new Vue({
           el: '#app',
           data: {
               msg: "Hello" 
           }
       })
    </script>
</body>
</html>

计算属性示例：反转字符串的顺序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性</title>
</head>
<body>
    <div id="app">
       <div>{{msg}}</div>
       <!-- reverse() 反转的方法
            join() 字符串拼接的方法
        -->
       <div>{{reverseString}}</div>
    </div>
    <script src="../../js/vue.js"></script>
    <script>
       
      
       var vm = new Vue({
           el: '#app',
           data: {
               msg: "Hello" 
           },
           computed: {
               reverseString: function(){
                   return this.msg.split('').reverse().join('')
               }
           }
       })
    </script>
</body>
</html>

计算属性与方法的区别

计算属性是基于他们的依赖进行缓存的
方法不存在缓存

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性与方法的区别</title>
</head>
<body>
    <div id="app">
       <div>{{msg}}</div>
       <!-- 计算属性 -->
       <!-- 2次调用同一个方法，第一次调用的时候会调用该方法；第二次调用比第一次快，因为有缓存，不用重新执行该方法就可以直接出结果 -->
       <div>{{reverseString}}</div>
       <div>{{reverseString}}</div>
       <!-- 普通方法 -->
       <!-- 2次调用同一个方法，第一次调用的时候会执行该方法；第二次调用和第一次一样，该方法会再执行一次，因为没有缓存，不会直接出结果 -->
       <div>{{reverseMessage()}}</div>
       <div>{{reverseMessage()}}</div>
    </div>
    <script src="../../js/vue.js"></script>
    <script>
       
      
       var vm = new Vue({
           el: '#app',
           data: {
               msg: "Hello",
               num: 100 
           },
           // 普通方法
           methods: {
               reverseMessage: function(){
                console.log('methods')
                return this.msg.split('').reverse().join('')
               }
           },
           // 计算属性
           computed: {
               /*
                reverse() 反转的方法
                join() 字符串拼接的方法
               */
               reverseString: function(){
                   console.log('computed')
                //    return this.msg.split('').reverse().join('')

                // 计算1到100的和，因为有缓存，只调用100次该方法，但是该方法只执行了一次
                var total = 0;
                for(var i=0; i<=this.num;i++) {
                    total += i;
                }
                return total;
               }
           }
       })
    </script>
</body>
</html>

在这里插入图片描述

侦听器

侦听器可以监听数据的变化。

在这里插入图片描述

侦听器的应用场景

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

侦听器的用法

watch: {
	// 函数名 要和 变化的数据的变量名 保持一致
	firstName: function(val) {
		this.fullName = val + ' ' + this.lastName;
	},
	lastName: function(val) {
		this.fullName = this.firstName + ' ' + val;
	}
}

侦听器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侦听器</title>
</head>
<body>
    <di id="app">
        <div>
            <span>名</span>

            <span>
                <input type="text" v-model="firstName">
            </span>
        </div>

        <div>
            <span>姓</span>
            <span>
                <input type="text" v-model="lastName">
            </span>
        </div>
        <div>{{fullName}}</div>
    </div>

    <script src="../../js/vue.js"></script>
    <script>
       
        var vm = new Vue({
            el: "#app",
            data: {
                firstName: 'Jim',
                lastName: 'Green',
                fullName: 'Jim Green'
            },
           

            // 侦听器
            // 通过watch属性监听数据的变化
            watch: {
                // 函数名 要和 变化的数据的变量名 保持一致
                firstName: function(val) {
                    this.fullName = val + ' ' + this.lastName;
                },
                lastName: function(val) {
                    this.fullName = this.firstName + ' ' + val;
                }
            }
        })
    </script>
</body>
</html>

计算属性的方式监听数据变化：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侦听器</title>
</head>
<body>
    <di id="app">
        <div>
            <span>名</span>

            <span>
                <input type="text" v-model="firstName">
            </span>
        </div>

        <div>
            <span>姓</span>
            <span>
                <input type="text" v-model="lastName">
            </span>
        </div>
        <div>{{fullName}}</div>
    </div>

    <script src="../../js/vue.js"></script>
    <script>
       
        var vm = new Vue({
            el: "#app",
            data: {
                firstName: 'Jim',
                lastName: 'Green',
                fullName: 'Jim Green'
            },
            // 计算属性的监听方式
            computed: {
                fullName: function(){
                    return this.firstName + ' ' + this.lastName;
                }
            }
            
        })
    </script>
</body>
</html>

在这里插入图片描述

过滤器

过滤器的作用

过滤器就是用来处理数据的，格式化数据。

比如将字符串格式化为首字母大写，将日期格式化为指定的格式等

在这里插入图片描述

自定义过滤器

Vue.filter('过滤器名称',function(value){
		// 过滤器业务逻辑
	})

过滤器的使用

<div>{{msg | upper}}</ div>
<div>{{msg | upper | lower}}</div>
<div v-bind:id="id | formatId"></div>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤器</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="msg">
        <!-- 使用过滤器 在插值表达式中写入： | upper -->
        <div>{{msg | upper}}</div>
        <!-- 使用多个过滤器 -->
        <div>{{msg | upper | lower}}</div>
        <!-- 通过属性调用过滤器 -->
        <div :abc='msg | upper'>测试数据</div>
    </div>
    <script src="../../js/vue.js"></script>
    <script>
        /*
            过滤器
        */
       // 参数val 代表要处理的数据
        // 首字母大写
       Vue.filter('upper',function (val) {
          return val.charAt(0).toUpperCase() + val.slice(1);
       })
       // 首字母小写
       Vue.filter('lower',function (val) {
          return val.charAt(0).toLowerCase() + val.slice(1);
       })

       var vm = new Vue({
           el: "#app",
           data: {
               msg: ""
           }
       })
    </script>
</body>
</html>

在这里插入图片描述

局部过滤器

vue的实例就是一个组件，局部过滤器可以在本组件中使用，全局过滤器可以在任何地方使用

filters: {
	过滤器名称: function () {}
}

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义过滤器</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="msg">
        <!-- 使用过滤器 在插值表达式中写入： | upper -->
        <div>{{msg | upper}}</div>
       
    </div>
    <script src="../../js/vue.js"></script>
    <script>
       

       var vm = new Vue({
           el: "#app",
           data: {
               msg: ""
           },
           // 自定义过滤器
           filters: {
             upper: function (val) {
                 // 首字母大写
                return val.charAt(0).toUpperCase() + val.slice(1);
             }
           }
       })
    </script>
</body>
</html>

带参数的过滤器

从第二个参数arg开始处理

vue.filter('format' , function (value,arg1,arg2...){
	// value就是过滤器传递过来的参数
})

带参数的过滤器的使用

<div>{{date | format (实参)}}</div>

日期格式化规则

y: 年,

M: 年中的月份(1-12),

d: 月份中的天(1-31),

h: 小时(0-23) ,

m: 分(0-59) ,

s: 秒(0-59) ,

S : 毫秒(0-999）,

q: 季度(1-4)

示例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>带参数的过滤器-格式化日期</title>
</head>
<body>
    <div id="app">
        <div>{{date | format('yyyy-MM-dd')}}</div>
    </div>
    <script src="../../js/vue.js"></script>
    <script>
        /*
            带参数的过滤器 - 格式化日期
        */
        Vue.filter('format',function (value,arg) {
            if(arg == 'yyyy-MM-dd') {
                var ret = '';
                ret += value.getFullYear() + '-' + (value.getMonth() + 1) + '-' +value.getDate();
                return ret;
            }
            return value;
        })


        var vm = new Vue({
            el: "#app",
            data: {
                date: new Date()
            }
        })
    </script>
</body>
</html>

示例2：使用dateFormat实现日期的格式化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>带参数的过滤器-格式化日期</title>
</head>
<body>
    <div id="app">
        <div>{{date | format('yyyy-MM-dd hh:mm:ss')}}</div>
    </div>
    <script src="../../js/vue.js"></script>
    <script>
        /*
            带参数的过滤器 - 格式化日期
        */
        // Vue.filter('format',function (value,arg) {
        //     if(arg == 'yyyy-MM-dd') {
        //         var ret = '';
        //         ret += value.getFullYear() + '-' + (value.getMonth() + 1) + '-' +value.getDate();
        //         return ret;
        //     }
        //     return value;
        // })

        Vue.filter('format',function (value,arg) {
                    function dateFormat(date,format) {
                if (typeof date === 'string') {
                    var mts = date.match(/(\/Date\((\d+)\)\/)/);
                    if (mts && mts.length >= 3) {
                        date = parseInt(mts[2]);
                    }
                }
                date = new Date(date);
                if (!date || date.toUTCString() == "Invalid Date") {
                    return "";
                }

                var map = {
                    "M" : date.getMonth() + 1, // 月份
                    "d" : date.getDate(), // 日
                    "M" : date.getHours(), // 小时
                    "M" : date.getMinutes(), // 分
                    "M" : date.getSeconds(), // 秒
                    "q" : Math.floor((date.getMonth() + 3) / 3), // 季度
                    "S" : date.getMilliseconds() // 毫秒
                };

                format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
                    var v = map[t];
                    if (v !== undefined) {
                        if (all.length > 1) {
                            v = '0' + v;
                            v = v.substr(v.length - 2);
                        }
                        return v;
                    } else if (t === 'y') {
                        return (date.getFullYear() + '').substr(4 - all.length);
                    }
                    return all;
                });
                return format;
            }
            return dateFormat(value,arg)
        })

        var vm = new Vue({
            el: "#app",
            data: {
                date: new Date()
            }
        })
    </script>
</body>
</html>

生命周期

挂载(初始化相关属性)
- beforeCreate
- created
- beforeMount
- mounted
更新(元素或组件的变更操作)
- beforeUpdate
- updated
销毁（销毁相关属性)1
- beforeDestroy
- destroyed

在这里插入图片描述

生命周期得官网

https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90

Vue实例得产生过程：

beforeCreate在实例初始化之后，数据观测和事件配置之前被调用。
created在实例创建完成后被立即调用。
beforeMount在挂载开始之前被调用。
mounted el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。
beforeUpdate数据更新时调用，发生在虚拟DOM打补丁之前。
updated由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
beforeDestroy实例销毁之前调用。
destroyed实例销毁后调用。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello world</title>
</head>
<body>
    <div id="app">
       <div>{{msg}}</div>
       <button @click='update'>更新</button>
       <button @click='destroy'>销毁</button>
    </div>
    <script src="../../js/vue.js"></script>
    <script>
        var vm = new Vue({
            // el：告诉vue把数据插入到哪个位置
            el: "#app",
            // data: 提供数据
            data: {
                msg: '生命周期'
            },
            methods: {
                update: function () {
                    this.msg = 'hello'
                },
                destroy: function () {
                    this.$destroy();
                }
            },
            beforeCreate: function () {
                console.log('beforeCreate')
            },
            created: function () {
                console.log('created')
            },
            beforeMount: function () {
                console.log('beforeMount')
            },
            mounted: function () {
                console.log('mounted')
            },
            beforeUpdate: function () {
                console.log('beforeUpdate')
            },
            updated: function () {
                console.log('updated')
            },
            beforeDestroy: function () {
                console.log('beforeDestroy')
            },
            destroyed: function () {
                console.log('destroyed')
            }
        })
    </script>
</body>
</html>