vue2 part2
数据代理
通过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是vmalert('同学你好！！')}},methods: {showInfo1(event) {// console.log(event.target.innerText)// console.log(this)//此处的this是vmalert('欢迎来到尚硅谷学习！')},showInfo2(event, number) {console.log(event, number)// console.log(event.target.innerText) // console.log(this)//此处的this是vmalert('同学你好！！')}}})
</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，我们只是重写了gettercomputed: {fullName: {//get有什么作用？当有人读取fullname，get就会被调用，返回值是fullname的值//get什么时候被调用？1.当fullname的值被读取时，get就会被调用2.依赖的数据发生变化时，get也会被调用get() {//get的this指向vmconsole.log('get调用了')return this.firstname + '-' + this.lastName},//在控制台查找vm._data的firstname，lastname都能找到，但是fullname是underfined，compute已经给了vmset(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中要引起计算时依赖的数据发生
计算属性-简写
get() {//get的this指向vmconsole.log('get调用了')return this.firstname + '-' + this.lastName},//在控制台查找vm._data的firstname，lastname都能找到，但是fullname是underfined，compute已经给了vmfullName:function(){console.log('get调用')return this.firstName+'-'+this.lastname}