数据代理
通过defineProperty里面传入obj2和x，然后get和set下读取接收下然后再接收set中给对象x用value接收下，这样就能两个数据读取和接收了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>何为数据代理</title>
</head>
<body>
<!--数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）-->
<script type="text/javascript">
let obj = { x: 100 }
let obj2 = { y: 200 }
Object.defineProperty(obj2, 'x', {
get() {
return obj.x
},
set(value) {
obj.x = value
}
})
</script>
</body>
</html>类似指针
控制台输出vm，你的name和address是get和set代理的
new的vue是一个全局对象，无法在控制台变化，error：data.name失败
vm的data实际存在_data中，但是要额外定义data，导入到new vue中，控制台判断是否===，true
_data相当于另一个新对象，然后里面的值和原始的data数据一样。
控制台vm._data.name='atguigu'
vm.name原来是尚硅谷
vm.name显示"atguigu"
控制台的_data是address，name等是数据劫持
事件处理
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
tle>事件的基本使用</title>
<!--引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
事件的基本使用：
1.使用v-on:xxx或@xxx绑定事件，其中xxx是事件名；
2.事件的回调需要配置在methods对象中，最终会在vm上；
3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象
5.@click="demo”和 @click="demo($event)”效果一致，但后者可以传参；
-->
<!--准备好一个容器-->
<div id="root">
<h2>欢迎来到{{name}}学习</h2>
<!-- <button v-on:click="showInfo">点我提示信息</button> -->
<button@click="showInfo1">点我提示信息1（不传参）</button>
<button@click="showInfo2($event,66)">点我提示信息2（传参）</button><!--传参加小括号，同时showInfo失去了event -->
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false//阻止vue在启动时生成生产提示。
const vm = new Vue({
el: '#root',
data: {
name: '尚硅谷',
showInfo2(event, number) {
console.log(event, number)
// console.log(event.target.innerText)
// console.log(this)//此处的this是vm
alert('同学你好！！')
}
},
methods: {
showInfo1(event) {
// console.log(event.target.innerText)
// console.log(this)//此处的this是vm
alert('欢迎来到尚硅谷学习！')
},
showInfo2(event, number) {
console.log(event, number)
// console.log(event.target.innerText)
// console.log(this)//此处的this是vm
alert('同学你好！！')
}
}
})
</script>
</htm1>太多东西,自己看p14吧
事件修饰符
所以执行顺序是：触发行为->回调->默认行为?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
tle>事件的基本使用</title>
<!--引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
* {
margin-top: 20px;
}
.demo1 {
color: red;
height: 50px;
}
.box1 {
padding: 50px;
background-color: skyblue;
}
.box2 {
padding: 20px;
background-color: pink;
}
</style>
</head>
<body>
<!--
vue的事件修饰符
1. .prevent 阻止默认事件
2. .stop 阻止事件冒泡
3. .once 只触发一次
4. .capture 使用事件的捕获模式
5. .self 只有event.target是当前操作元素自身时触发事件
6. .passive 事件的默认行为立即执行，不会等待事件回调函数执行完毕。
-->
<!--准备好一个容器-->
<div id="root">
<!-- 阻止默认事件 -->
<h2>欢迎来到{{name}}学习</h2>
<a href="https://www.atguigu.com" @click="showInfo">点我提示信息</a>
<!-- 阻止事件冒泡 -->
<div class="demo1" @click.stop="showInfo">
<button @click.stop="showInfo">点我</button>
<!-- 事件冒泡：即多个组件嵌套，触发内层组件时，会一一触发外层事件 -->
</div>
<!-- 事件只触发一次 -->
<button @click.once="showInfo">点我</button>
<!-- 使用事件的捕获模式： 捕获是由外往内，冒泡相反-->
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click.capture="showMsg(2)">
div2
</div>
</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false//阻止vue在启动时生成生产提示。
new Vue({
el: '#root',
data: {
name: '尚硅谷'
},
methods: {
showInfo(e) {//这里写showInfo(e) e.preventDefault()阻止默认事件，可以防止页面跳转
alert('同学你好')
comsole.log(e.target)
},
showMsg(num) {
console.log('div' + num + '被点击了')
}
}
})
</script>
</htm1>键盘事件
016_尚硅谷Vue技术_键盘事件_哔哩哔哩_bilibili
总结
修饰符可以连续写，正常逻辑，先写的先运行
@keyup.ctrl.y就可以ctrl+y
姓名案例-差值语法实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>姓名案例_插值语法实现</title>
<!-- 引入Vue -->
<script type="text/javascript" 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>{{firstName.slice(0,3)}} - {{lastName}}</span><!-- firstname只要3位 -->
全名：<span>{{fullName()}}</span>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false//阻止vue在启动时生成生产提示。
new Vue({
el: '#root',
data: {
firstName: '张',
lastName: '三'
},
methods: {
fullName() {
return this.firstName.slice(0, 3) + '-' + this.lastName //这里的this是vue实例，所以可以直接调用data里面的属性和方法。
}//数据发生变化，模板重新解析
},
})
</script>
</html>计算属性
计算属性定义：拿着已经写好的属性，用这些属性计算出来一个属性，称为计算属性，data里面放的是属性 ，而计算属性需要放到一个单独的集合体中
019_尚硅谷Vue技术_计算属性_哔哩哔哩_bilibili很好的视频，清清楚楚明明白白
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>姓名案例_插值语法实现</title>
<!-- 引入Vue -->
<script type="text/javascript" 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>{{firstName.slice(0,3)}} - {{lastName}}</span><!-- firstname只要3位 -->
全名：<span>???</span>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false//阻止vue在启动时生成生产提示。
new Vue({
el: '#root',
data: {
firstName: '张',
lastName: '三'
x: 'hello'
},
//相当于computed中的每个对象默认提供getter和setter，我们只是重写了getter
computed: {
fullName: {
//get有什么作用？当有人读取fullname，get就会被调用，返回值是fullname的值
//get什么时候被调用？1.当fullname的值被读取时，get就会被调用2.依赖的数据发生变化时，get也会被调用
get() {//get的this指向vm
console.log('get调用了')
return this.firstname + '-' + this.lastName
},//在控制台查找vm._data的firstname，lastname都能找到，但是fullname是underfined，compute已经给了vm
set(value) {
console.log('set', value)
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
},
})
</script>
</html>计算属性：
1.定义：要用的属性不存在，要通过已有属性计算得来。
2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
3.get函数什么时候执行？
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
5.备注：
1.计算属性最终会出现在vm上，直接读取使用即可。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生
![[笔记] 某振动分析软件的可能侦测范围](https://i-blog.csdnimg.cn/direct/404de835301b482285ecd3be6cb16136.png)
