ajk：Vue基础2 2024-04-17 13:33:23 0 0 Vue基础2 文章目录Vue基础2前言一、事件处理事件的基本使用二、计算属性1.姓名案例的做法1.插入值法：2.methods法3.计算属性法2.读入数据二、监视属性总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、事件处理 事件的基本使用 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> </div> v-on:click=“showInfo”:指代鼠标点击按钮时会调用showInfo这个函数<script> Vue.config.productionTip = false new Vue({ el: '#root', data: { name: '魔法城堡' }, methods: { showInfo() { alert('朋友你好') } } }) Vue实例中用methods这个配置对象书写函数showInfo()事件修饰符 1.prevent:阻止默认事件（常用） 2.stop：阻止事件冒泡（常用） 3.once：事件只触发一次（常用） 4.capture:使用事件的捕获模式； 5.self：只有event.target是当前操作的元素时才触发的事件； 6.passive:事件的默认行为为立即执行，无需等待事件回调执行完毕；键盘事件<input type="text" placeholder="按下回车提示" @keyup.enter="showInfo">//@keyup按下键盘时会发生事件 1.vue常用的案件别名回车=>enter删除=>delete退出=>esc空格=>space换行=>tab(必须配合keydown去使用)上=>up 下=>down 左=>left 右=>right 2.系统修饰键：ctrl , alt , shift ,meta配合keyup使用：按下修饰键同时，再按下其他键，随后释放其他键，事件才被触发配合keydown使用：正常触发 3.自定义键名 Vue.config.keyCode.自定义键名 = 键码 二、计算属性 1.姓名案例的做法 1.插入值法：<div id="root"> 姓：<input type="text" v-model="firstName"><br> 名： <input type="text" v-model="lastName"><br> 全名：<span>{{ firstName}}+{{lastName}}</span> </div> <script> Vue.config.productionTip = false new Vue({ el: '#root', data: { firstName: '张', lastName: '三' } }) </script> 2.methods法<div id="root"> 姓：<input type="text" v-model="firstName"><br> 名：<input type="text" v-model="lastName"><br> 全名：<span>{{fullName()}}</span> //每一次都要调用一次 </div> <script> Vue.config.productionTip = false new Vue({ el: '#root', data: { firstName: '张', lastName: '三' }, methods: { fullName() { return this.firstName + '-' + this.lastName } } }) 3.计算属性法 配置对象 computed:{}<div id="root"> 姓：<input type="text" v-model="firstName"><br> 名：<input type="text" v-model="lastName"><br> 全名： <span>{{fullName}}</span> </div> <script> Vue.config.productionTip = false const vm = new Vue({ el: '#root', 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] } } } }) 计算属性：定义：要用的属性不存在，要通过已有的属性计算得来原理：底层借助Object.defineproperty方法提供getter和setterget函数什么时候执行？ (1).初次读取时会执行 (2).当依赖的数据发生改变时侯会被两次调用优势：与methods实现相比，内部有缓存机制（复用） ，效率高，调试方便 备注： (1)计算属性最终都会出现在vm上，直接读取即可 (2)如果计算属性要被修改，那必须写gei函数去响应修改，且set中要引起计算时依赖的数据计算属性简写 当确定不需要set方法去修改时，可以选择简写fullName() { return this.firstName + '-' + this.lastName } 2.读入数据 代码如下（示例）：data = pd.read_csv( 'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')print(data.head()) 二、监视属性当监视的属性变化时，回调函数自动调用，进行相关操作监视的属性必须存在，才能被监视监视的两种方法 （1）new Vue传入watch配置watch: { isHot: { immediate: true, //初始时就让 handler调用 handler(newValue, oldValue) { console.log('被修改了', newValue, oldValue); } } } （2）通过vm.&watch监视 vm.$watch('isHot', { immediate: true, //初始时就让 handler调用 handler(newValue, oldValue) { console.log('被修改了', newValue, oldValue); } }) isHot:是指待被监测的对象 newValue新改变的值，oldValue原先的值监视handler(newValue, oldValue) {} 深度监视：vue中的watch默认不监测对象内部值的改变（一层）配置deep：true可以检测对象内部值的改变（多层） 备注：Vue自身可以监测对象内部值的改变，但vue提供的watch默认不可以使用watch时可以根据自己的具体结构，决定是否采用深度监视 简写形式：当不要其他的配置对象时可以简写isHot(newValue, oldValue){console.log('被修改了', newValue, oldValue);} 总结computed和watch之间的区别computed能完成的功能，watch都可以完成 2.watch可以完成的功能，computed不一定能完成的。列如：watch可以做异步操作重要的原则 1.所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象 2.所有不被Vue所管理的函数（定时器的回调函数，ajax的回调函数），最好写成箭头函数，这样this的指向才是vm或组件实例对象（因为箭头函数没有自己this，这样就会寻找父级的） 收藏（0）