网站开发 模块,网站优化一般怎么做,网站建设 部署与发布视频教程,可以做招商的网站一.事件处理
1.内联事件处理器
button v-on:clickcountcount1/button
直接将事件以表达式的方式书写~ 每次单击可以完成自增1的操作~
2.方法事件处理器
button clickaddcount(啦啦啦~)count2/button 如上…一.事件处理
1.内联事件处理器
button v-on:clickcountcount1/button
直接将事件以表达式的方式书写~ 每次单击可以完成自增1的操作~
2.方法事件处理器
button clickaddcount(啦啦啦~)count2/button 如上一方面v-on可以简写为“”另一方面“啦啦啦”作为参数传入了方法中。
// 所有的方法都写在methods里面methods:{// data里面的对象通过this.得出addcount(msg){this.count2;console.log(msg);}}
msg即形参将啦啦啦作为参数值传入。 每次单击完成自增2. 后台点击一次即输出一次传入的“啦啦啦”。
二.事件参数
事件参数可以获取event对象和通过事件传递数据。
button clickboot成长值/button boot(e){ e.target.innerHTML成长值:this.count this.count1;} 如上单击按钮即可修改当前元素并完成自增1。 添加$event可以继续传输event对象~
p click.preventprintName(item,$event) v-for(item,index) of club:keyindex {{ item }}/p printName(name2,e){console.log(name2);console.log(e);} event对象可以被正常打印~ 三.事件修饰符
v-on提供了诸多事件修饰符可以阻止默认事件等。 div clickdivcp click.stoppc事件冒泡测试~/p/div
divc(){console.log(divC~);},pc(){console.log(pC~);},
如下由于stop属性的存在点击子元素阻止了父元素事件的响应。 四.数组变化侦听
1.变更方法
Vue能够侦听响应式数组的变更方法并且在他们被调用的时候触发相关的更新。 ulli v-for(item,index) in club:keyindex{{ item }}/li/ulbutton clickaddclub1添加元素/buttonbutton clickaddclub2无显示的添加/button addclub1(){this.club.push(勒沃库森);}, 2.替换数组
变更方法顾名思义就是会对调用它们的原数组进行变更相对的有一些不可变的方法他们不会改变原数组而总是返回一个新数组。 addclub2(){console.log(this.club.concat([霍芬海姆]));this.clubthis.club.concat([法兰克福]);// 反向赋值回去}
如上使用concat只会拼接出来一个新的数组而不会替换原来的数组但是可以用this反向赋值回去实现和变更方法一样的效果。 五.计算属性
把模版语法里面可能出现的复杂逻辑放入到独立的计算属性之中。
div{{ testNum }}/div computed:{testNum(){return this.club.length0?德甲存在球队 : 德甲解散了;}} computed和method、data同级。 重点区别 计算属性计算属性值会基于其响应式依赖被缓存~方法方法调用总是会在渲染发生时再执行函数 概括地说就是计算属性效率更高~
