VUE学习--04

cos six

已于 2023-02-23 16:39:44 修改

阅读量239

点赞数

分类专栏： vue学习文章标签： vue.js 学习前端

于 2023-02-23 16:14:12 首次发布

本文链接：https://blog.csdn.net/qq_54708796/article/details/129180663

版权

本文详细介绍了Vue中的数据代理，包括通过vm对象代理data中的属性、数据代理的好处以及基本原理。同时，文章讲解了计算属性的定义、工作原理及优势，并探讨了监视属性的使用和深度监视的配置。此外，还深入讨论了列表渲染中的key作用和原理，以及在列表过滤中的数据响应机制。

摘要由CSDN通过智能技术生成

Vue中的数据代理

总结：

Vue中的数据代理通过vm对象来代理data对象中属性的操作（读/写）
Vue中数据代理的好处：更加方便的操作data中的数据
基本原理：
通过object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。

绑定事件在昨天的博客中已经展示,这里不在重复

键盘事件

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>键盘事件</title>
		<script type="text/javascript" src="./vue-2.4.0.js"></script>
	</head>
	<body>
		<div id="root">
			<h2>欢迎来到{
  {name}}学习</h2>
			<input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo">
		</div>
	</body>

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

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods: {
				showInfo(e){
					console.log(e.target.value)
				}
			},
		})
	</script>
</html>

效果:

Vue中常用的按键别名：

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

注意：

系统修饰键（用法特殊）：ctrl、alt、shift、meta

配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
配合keydown使用：正常触发事件
可以使用keyCode去指定具体的按键，比如：@keydown.13="showInfo"，但不推荐这样使用

Vue.config.keyCodes.自定义键名 = 键码，可以自定义按键别名

计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        姓：<input type="text" v-model="firstName"><br><br>
        名：<input type="text" v-model="lastName"><br><br>
        姓名：<span>{
  {fullName}}</span>
    </div>

    <script>
        Vue.config.productionTip = f