1. Event handling
1. `.stop`: prevent events from bubbling. Use this modifier to prevent events from propagating to parent elements
2. `.prevent`: Prevent the default event. Use this modifier to prevent the event's default behavior.
3. `.capture`: Use event capture mode. By default, events are handled in the bubbling phase. Use this modifier to handle them in the capturing phase instead.
4. `.self`: The event handler is only triggered on the element itself where the event is triggered. If the event is triggered by a child element, use the `.self` modifier to prevent the event handler from executing.
5. `.once`: trigger the event handler only once. Use this modifier to ensure that the event handler is executed only once.
6. `.passive`: Improve scrolling performance. If preventDefault() is not called in the event handler to prevent the default event, you can use the `.passive` modifier to tell the browser that the event handler will not prevent the default event, thereby improving scrolling performance.
event modifier
Vue calls modifiers via the directive suffix represented by a dot (.),
① .stop
When we nest multiple divs and set click events, multiple prompt statements will pop up, just use .stop
Cases without using .stop :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>事件处理</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <style> .one{ background-color: aqua; height: 400px; width: 400px; } .two{ background-color: red; height: 300px; width: 300px; } .three{ background-color:yellow; height: 200px; width: 200px; } .four{ background-color: darkgray; height: 100px; width: 100px; } </style> </head> <body> <div id="B"> <div class="one" @click="click1" > <div class="two" @click="click2"> <div class="three" @click="click3"> <div class="four" @click="click4"></div> </div> </div> </div> </div> <script> new Vue({ el:'#B', data(){ return{ msg:'Hello Bing! ! !' }; }, methods:{ click1(){ alert("click1"); }, click2(){ alert("click2"); }, click3(){ alert("click3"); }, click4(){ alert("click4"); } } }); </script> </body> </html>
You will find that the more divs are nested inside, the more prompt statements will pop up. Just use .stop.
like:
<div class="one" @click.stop="click1" > <div class="two" @click.stop="click2"> <div class="three" @click.stop="click3"> <div class="four" @click.stop="click4"></div> </div> </div>After adding it, try again!
② .once
In our daily life, when we click the submit button to upload relevant information or when we click on the app to query. Sometimes I think it is stuck, and then I keep clicking the relevant button. In fact, when I keep clicking, the information and data you want to submit will be repeatedly submitted to the background.
like:
.once means that repeated data can only be submitted once , then click .once on the event and try again
<button @click.once="clickME">点我</button>
2. Form Comprehensive Case
Express the role of comprehensive cases :
In Vue, integrating all syntax means combining various syntax features of Vue to achieve more complex and flexible functions. By integrating various grammatical features, you can better utilize the powerful functions of Vue and improve development efficiency and code quality.
Case code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>事件处理</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <style> </style> </head> <body> <div id="B"> 姓名：<input name="name" v-model="name"/><br /> 密码：<input name="pwd" v-model="pwd"/><br /> 性别<span v-for="s in sexlist"> <input type="radio" name="sex" id="" v-model="sex" :value="s.id">{ {s.name}} </span><br /> 籍贯：<select name="Myaddress" v-model="Myaddress"> <option v-for="a in address" :value="a.id">{ {a.name}}</option> </select><br /> 爱好：<span v-for="h in hobby"> <input type="checkbox" name="Myhobby" v-model="Myhobby" :value="h.id"/>{ {h.name}} </span><br /> 个人简介：<textarea v-model="sign" cols="12" rows="8"></textarea><br /> 同意：<input type="checkbox" v-model="ok"/><br /> <button v-show="ok" @click="tijiao">提交</button> </div> <script> new Vue({ el:'#B', data(){ return{ name:'ZB', pwd:'666666', sexlist:[{ name:'男',id:1, },{ name:'女',id:2, },{ name:'未知',id:0, }], sex:1, hobby:[{ name:'敲代码',id:1 },{ name:'还是敲代码',id:2 },{ name:'动画片',id:3 },{ name:'还是看动画片',id:4 }], Myhobby:[], address:[{ name:'缅北',id:1 },{ name:'泰国',id:2 },{ name:'m78',id:3 },{ name:'重庆 ',id:4 }], Myaddress:null, sign:null, ok:false }; }, methods:{ tijiao(){ var obj={}; obj.name=this.name; obj.pwd=this.pwd; obj.sex=this.sex; obj.address=this.Myaddress; obj.love=this.Myhobby; obj.sign=this.sign; console.log(obj); } } }); </script> </body> </html>
3. Custom components
In front-end development, custom components typically consist of HTML, CSS, and JavaScript code that implement specific user interface elements and behaviors. For example, a custom button component might have specific styles, click effects, and interaction behaviors. By creating custom components, developers can reduce repetitive code writing and improve code reusability and maintainability.
In short, custom components are components with specific functions created by developers according to their own needs and specific scenarios to enhance the functionality and customizability of software.
Common components:
Parent-child component communication: The parent component can pass data to the child component through property binding, and the child component can send messages to the parent component through events. The parent component passes data to the child component through property binding, and the child component can receive and use this data through the props attribute. Child components can trigger events through the $emit method and pass parameters to the parent component. This communication method conforms to the principle of one-way data flow. The parent component passes data to the child component through properties, and the child component passes the message to the parent component through events.
Create a custom component button<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>组件父传子</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> </head> <body> <div id="B"> <h3>自定义组件的使用</h3> <my-button>xx</my-button> </div> <script> new Vue({ el:'#B', components:{ 'my-button':{ template:'<button>按钮</button>' } }, data(){ return{ msg:'Hello Bing! ! !' }; }, methods:{ } }); </script> </body> </html>
Component passed from parent to child
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>组件父传子</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> </head> <body> <div id="B"> <h3>自定义组件的使用</h3> <my-button></my-button> <h3>组件通信---父传子</h3> <my-button btn="bulbu"></my-button> <h3>组件通信---父传子2</h3> <my-button btn="我没k"></my-button> </div> <script> new Vue({ el:'#B', components:{ 'my-button':{ props:['btn'], template:'<button @click="clickME">我被{ {btn}}点击了{ {n}}次</button>', data:function(){ return{ n:1 } }, methods:{ clickME(){ this.n++; } } } }, data(){ return{ msg:'Hello Bing! ! !' }; }, methods:{ } }); </script> </body> </html>
Component passed from child to parent
Child-to-parent communication in component communication is one of the commonly used component communication methods in Vue. It can realize functions such as transferring data from child components to parent components, decoupling and reusing components, and transferring and sharing data. Through the reasonable use of child-to-father, the code of the Vue project can be better organized and managed, and development efficiency and code quality can be improved.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>组件父传子</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> </head> <body> <div id="B"> <h3>自定义组件的使用</h3> <h3>组件通信---子传父</h3> <my-button btn="我没k" @xxx='getParam'></my-button> </div> <script> new Vue({ el:'#B', components:{ 'my-button':{ props:['btn'], template:'<button @click="clickME">我被{ {btn}}点击了</button>', methods:{ clickME(){ let name ="帅哥"; let bname ="我没k的故事"; let price ="借的"; this.$emit('xxx',name,bname,price) } } } }, data(){ return{ msg:'Hello Bing! ! !' }; }, methods:{ getParam(a,b,c ){ console.log(a,b,c) } } }); </script> </body> </html>
