[Vue]---Vue常用特性讲解

最新推荐文章于 2024-03-05 10:11:51 发布

_筱龙

最新推荐文章于 2024-03-05 10:11:51 发布

阅读量168

点赞数

分类专栏： vue全家桶资料文章标签： filter vue 过滤器

本文链接：https://blog.csdn.net/it_qslong/article/details/109472707

版权

vue全家桶资料专栏收录该内容

20 篇文章 3 订阅

订阅专栏

文章目录

- - Vue常用特性

Vue常用特性

常用特性概览

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

表单操作

基于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>Document</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">
        <form>
            <div>
                <span>姓名：</span>
                <span>
                        <input type="text" v-model='uname'>
                    </span>
            </div>
            <div>
                <span>性别：</span>
                <span>
                    <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>
                <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>
            </div>
            <div>
                <span>职业：</span>
                <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: '#app',
            data: {
                //姓名
                uname: '林俊杰',
                //性别
                gender: 1,
                //爱好
                hobby: ['2', '1'],
                occupation: ['2', '3'],
                //个人简介
                desc: '我是一名歌星'
            },
            methods: {
                handle: function() {
                    console.log(this.hobby)
                }
            }
        })
    </script>
</body>

</html>

表单域修饰符

number : 转化为数值
trim : 去掉开始和结尾的空格
lazy: 将input事件切换为change事件

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

自定义属性

语法规则(获取元素焦点)

vue.directive ('focus'{
	inserted: function (el){
        //获取元素的焦点
        el.focus ();
	}
})

用法

<input type='text' v-focus>

带参数的自定义指令

改变元素背景色

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

用法

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

局部指令

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

计算属性

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

我们用它实现一个字符串的反转

computed: {
	reversedMessage: function(){
		return this.msg.split('').reverse().join('');
	}
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>{{msg}}</div>
        <div>{{reverseString}}</div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        /*计算属性*/
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'qwer'
            },
            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>Document</title>
</head>

<body>
    <div id="app">
        <div>{{reverseString}}</div>
        <div>{{reverseString}}</div>
        <div>{{reverseMessage()}}</div>
        <div>{{reverseMessage()}}</div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        //计算属性与方法的区别
        //计算属性是基于它们的依赖进行缓存的
        //方法不存在缓存
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Nihao',
                num: 100
            },
            methods: {
                reverseMessage: function() {
                    console.log('methods')
                    return this.msg.split('').reverse().join('')
                }
            },
            computed: {
                reverseString: function() {
                    console.log('computed')

                    //return this.msg.split('').reverse().join('')
                    var total = 0;
                    for (var i = 0; i < this.num; i++) {
                        total += i
                    }
                    return total

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

</html>

侦听器

watch: {
	firstName: function (val){
		//val表示变化之后的值
		this.fullName = val + this.lastName ;
    },
	lastName: function (val) {
		this.fullName = this.firstName + val;
	}
}

通过v-model实现数据绑定
需要提供提示信息
需要侦听器监听输入信息的变化
需要修改触发的事件

我们可以用侦听器模仿一个应用场景

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>
            <span>用户名:</span>
            <span>
                <input type="text" v-model.lazy='uname'>
            </span>
            <span>{{tip}}</span>
        </div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        /*侦听器*/
        //1.采用侦听器监听用户名的变化
        //2.调用后台接口进行验证
        //3.根据验证的结果调整提示信息
        var vm = new Vue({
            el: '#app',
            data: {
                uname: '',
                tip: ''
            },
            watch: {
                uname: function(val) {
                    //调用后台接口验证用户名的合法性
                    this.CheckName(val)
                        //修改提示信息
                    this.tip = '正在验证...'
                }
            },
            methods: {
                CheckName: function(uname) {
                    var that = this
                        //调用接口，但是可以使用定时任务的方式模拟接口调用
                    setTimeout(function() {
                        if (uname == 'admin') {
                            that.tip = '用户名已经存在，请重新输入'
                        } else {
                            that.tip = '用户名可以被使用'
                        }
                    }, 2000)

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

</html>

过滤器

作用

格式化数据,比如将字符串格式化为首字母大写,将日期格式化为指定的格式

自定义过滤器

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

使用(让字符串从大写变小写，小写变成大写)

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

局部过滤器

filters:{
	capitalize: function() }
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="text" v-model='msg'>
        <div>{{msg | upper}}</div>
        <div>{{msg | upper | lower}}</div>
        <div :abc='msg | upper'>测试数据</div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        /*过滤器*/
        /*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: ''
            },
            filters: {
                upper: function(val) {
                    return val.charAt(0).toUpperCase() + val.slice(1)
                }
            }
        })
    </script>
</body>

</html>

生命周期

主要阶段

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

生命周期钩子	解释
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>Document</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>
        /*Vue实例的生命周期*/
        var vm = new Vue({
            el: '#app',
            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('updated')
            },
            beforeDestroy: function() {
                console.log('beforeDestroy')
            },
            destroyed: function() {
                console.log('destroyed')
            }
        })
    </script>
</body>

</html>

_筱龙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[Vue]---Vue常用特性讲解

文章目录Vue常用特性常用特性概览表单操作表单域修饰符自定义属性**带参数的自定义指令****局部指令**计算属性侦听器过滤器生命周期Vue常用特性常用特性概览表单操作自定义指令计算属性过滤器侦听器生命周期表单操作基于Vue的表单操作Input 单行文本textarea 多行文本select 下拉多选radio 单选框checkbox 多选框示例代码如下：<!DOCTYPE html><html lang="en"><h
复制链接

扫一扫