VUE基础知识三

最新推荐文章于 2024-10-17 10:08:04 发布

杨乙燃5132

最新推荐文章于 2024-10-17 10:08:04 发布

阅读量616

点赞数 1

分类专栏： Vue 文章标签： vue.js html5 javascript

本文链接：https://blog.csdn.net/xiongIT/article/details/123857544

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、键盘事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript"  src="js/vue.min.js"></script>
  
</head>
<body>
    <div id="app">
        <h2>欢迎来到{{name}}学习</h2>
        <input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo">
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el:'#app',
        data:{
            name:'菜鸟教程'
        },
        methods: {
            showInfo(e){
                console.log(e.target.value)
            }
        },
    })
</script>
</html>

效果图

总结

键盘上的每个按键都有自己的名称和编码，例如：Enter（13）。而Vue还对一些常用按键起了别名方便使用

Vue中常用的按键别名：

回车：enter
删除：delete (捕获“删除”和“退格”键)
退出：esc
空格：space
换行：tab (特殊，必须配合keydown去使用)
上：up
下：down
左：left
右：right

注意：

系统修饰键（用法特殊）：ctrl、alt、shift、meta
配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
配合keydown使用：正常触发事件
可以使用keyCode去指定具体的按键，比如：@keydown.13="showInfo"，但不推荐这样使用Vue.config.keyCodes.自定义键名 = 键码，可以自定义按键别名

2、计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript"  src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        姓：<input type="text" v-model="firstName"><br><br>
        名：<input type="text" v-model="lastName"><br><br>
        姓名：<span>{{fullName}}</span>
    </div>
    <script>
        new Vue({
            el:'#app', 
            data:{ 
                firstName:'张',
                lastName:'三'
            },
            computed:{
                fullName:{
                    get(){
                        return this.firstName + '-' + this.lastName
                    },
                    set(value){
						const arr = value.split('-')
						this.firstName = arr[0]
						this.lastName = arr[1]
                    }
                }
            }
        })
    </script>
</body>
</html>

效果图：

总结：

计算属性：

定义：要用的属性不存在，需要通过已有属性计算得来。

原理：底层借助了Objcet.defineproperty()方法提供的getter和setter。

get函数什么时候执行？

初次读取时会执行一次
当依赖的数据发生改变时会被再次调用

优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便

备注：

计算属性最终会出现在vm上，直接读取使用即可
如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
如果计算属性确定不考虑修改，可以使用计算属性的简写形式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript"  src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        姓：<input type="text" v-model="firstName"><br><br>
        名：<input type="text" v-model="lastName"><br><br>
        姓名：<span>{{fullName}}</span>
    </div>
    <script>
      new Vue({
    el:'#app', 
    data:{ 
        firstName:'张',
        lastName:'三'
    },
    computed:{
    	fullName(){
		    return this.firstName + '-' + this.lastName
    	}
    }
})
    </script>
</body>
</html>

3、监视属性基本用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript"  src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h2>今天天气好{{info}}!</h2>
        <button @click="changeWeather">点击切换天气</button>
    </div>
    <script>
        Vue.config.productionTip = false 

        new Vue({
            el:'#app', 
            data:{ 
                isHot:true,
            },
            computed:{
                info(){
                    return this.isHot ? '炎热' : '凉爽' 
                }
            },
            methods:{
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
            watch:{
                isHot:{
                    //初始化时让handler调用一下
                    immediate:true, 
                    //handler什么时候调用？当isHot发生改变时
                    handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
                }
            }
        })
    </script>
</body>
</html>

效果图：

总结：

监视属性watch：

当被监视的属性变化时，回调函数自动调用，进行相关操作
监视的属性必须存在，才能进行监视
监视有两种写法：
创建Vue时传入watch配置
通过vm.$watch监视

vm.$watch('isHot',{
	immediate:true,
	handler(newValue,oldValue){
		console.log('isHot被修改了',newValue,oldValue)
	}
})

4、深度监视

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript"  src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h3>a的值是:{{numbers.a}}</h3>
		<button @click="numbers.a++">点我让a+1</button>
		<h3>b的值是:{{numbers.b}}</h3>
		<button @click="numbers.b++">点我让b+1</button>
    </div>

    <script>
        Vue.config.productionTip = false 

        new Vue({
            el:'#app', 
            data:{ 
                isHot:true,
                numbers:{
                    a:1,
                    b:1,
                }
            },
            watch:{
                //监视多级结构中所有属性的变化
                numbers:{
                    deep:true,
					handler(){
						console.log('numbers改变了')
					}
                }
                //监视多级结构中某个属性的变化
				/* 'numbers.a':{
					handler(){
						console.log('a被改变了')
					}
				} */
            }
        })
    </script>
</body>
</html>

效果图：

总结：

深度监视：

Vue中的watch默认不监测对象内部值的改变（一层）
在watch中配置deep:true可以监测对象内部值的改变（多层）
备注：

Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
使用watch时根据监视数据的具体结构，决定是否采用深度监视

5、监视属性简写

如果监视属性除了handler没有其他配置项的话，可以进行简写。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript"  src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h2>今天天气好{{info}}!</h2>
        <button @click="changeWeather">点击切换天气</button>
    </div>

    <script type="text/javascript">
        const vm = new Vue({
            el:'#app',
            data:{
                isHot:true,
            },
            computed:{
                info(){
                    return this.isHot ? '炎热' : '凉爽'
                }
            },
            methods: {
                changeWeather(){
                    this.isHot = !this.isHot
                }
            },
            watch:{
                //正常写法
                isHot:{
                    handler(newValue,oldValue){
                        console.log('isHot被修改了',newValue,oldValue)
                    }
                }, 
                //简写
                isHot(newValue,oldValue){
                    console.log('isHot被修改了',newValue,oldValue,this)
                }
            }
        })
    
        //正常写法
        vm.$watch('isHot',{
            handler(newValue,oldValue){
                console.log('isHot被修改了',newValue,oldValue)
            }
        })
        //简写
        vm.$watch('isHot',function(newValue,oldValue){
            console.log('isHot被修改了',newValue,oldValue,this)
        })
    </script>
</body>
</html>

6、监听属性 VS 计算属性

使用计算属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript"  src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        姓：<input type="text" v-model="firstName"><br><br>
        名：<input type="text" v-model="lastName"><br><br>
        姓名：<span>{{fullName}}</span>
    </div>
    <script>
       new Vue({
    el:'#app', 
    data:{ 
        firstName:'张',
        lastName:'三'
    },
    computed:{
    	fullName(){
		    return this.firstName + '-' + this.lastName
    	}
    }
})
    </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>
    <script type="text/javascript"  src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        姓：<input type="text" v-model="firstName"><br><br>
        名：<input type="text" v-model="lastName"><br><br>
        姓名：<span>{{fullName}}</span>
    </div>
    <script>
     new Vue({
	el:'#app',
	data:{
		firstName:'张',
		lastName:'三',
		fullName:'张-三'
	},
	watch:{
		firstName(val){
			setTimeout(()=>{
				this.fullName = val + '-' + this.lastName
			},1000);
		},
		lastName(val){
			this.fullName = this.firstName + '-' + val
		}
	}
})
    </script>
</body>
</html>

总结：

computed和watch之间的区别：

computed能完成的功能，watch都可以完成
watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作

两个重要的小原则：

所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象
所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或组件实例对象。