Vue.js模板语法[下](事件处理,表单综合案例,自定义组件)---详细讲解

简介: Vue.js模板语法[下](事件处理,表单综合案例,自定义组件)---详细讲解

一,事件处理

1. `.stop`:阻止事件冒泡。使用该修饰符可以阻止事件向父元素传播

2. `.prevent`:阻止默认事件。使用该修饰符可以阻止事件的默认行为。

3. `.capture`:使用事件捕获模式。默认情况下,事件是在冒泡阶段处理的,使用该修饰符可以改为在捕获阶段处理。

4. `.self`:只在事件触发的元素自身上触发事件处理器。如果事件是由子元素触发的,使用`.self`修饰符可以阻止事件处理器执行。

5. `.once`:只触发一次事件处理器。使用该修饰符可以确保事件处理器只执行一次。

6. `.passive`:提升滚动性能。如果事件处理器中没有调用preventDefault()阻止默认事件,可以使用`.passive`修饰符来告诉浏览器该事件处理器不会阻止默认事件,从而提升滚动的性能。

 

事件修饰符

 Vue通过由点(.)表示的指令后缀来调用修饰符,

① .stop

当我们嵌套多个div并设置点击事件的时候,会弹出多个提示语句,使用.stop即可

没有使用.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>

会发现,越在里面嵌套的div,越会弹出多个提示语句,再使用.stop即可

如:

<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>

加上之后,再试试!

.once

在我们日常生活中,在点击提交按钮上传相关的资料或app点击查询的时候。有些时候觉得是卡了,然后就一直点击相关的按钮,其实一直点的时候会将你想提交的资料数据等等,重复将数据提交到后台。

如:

.once就是将重复的数据只能提交一遍,然后在事件上点击.once,再试试

<button @click.once="clickME">点我</button>

二,表单综合案例

表达综合案例作用:

    在Vue中,整合所有语法是指将Vue的各种语法特性结合起来使用,以实现更复杂、更灵活的功能。通过整合各种语法特性,可以更好地利用Vue的强大功能,提高开发效率和代码质量

案例代码:

<!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>

三,自定义组件

      在前端开发中,自定义组件通常由 HTML、CSS 和 JavaScript 代码组成,用于实现特定的用户界面元素和行为。例如,一个自定义的按钮组件可能具有特定的样式、点击效果和交互行为。通过创建自定义组件,开发者可以减少重复的代码编写,提高代码的可复用性和维护性。

总之,自定义组件是开发者按照自己的需求和特定场景创建的、具有特定功能的组件,用于增强软件的功能和可定制性

常见的组件:

父子组件通信:父组件可以通过属性绑定向子组件传递数据,子组件可以通过事件来向父组件发送消息。父组件通过属性绑定将数据传递给子组件,子组件可以通过props属性接收并使用这些数据。子组件可以通过$emit方法触发事件,并传递参数给父组件。这种通信方式符合单向数据流的原则,父组件通过属性传递数据给子组件,而子组件通过事件将消息传递给父组件。

创建一个自定义组件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>

组件父传子

<!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>

组件子传父

组件通信中子传父是Vue中常用的组件通信方式之一,它可以实现子组件向父组件传递数据、实现组件的解耦和复用、实现数据的传递和共享等功能。通过合理使用子传父,可以更好地组织和管理Vue项目的代码,提高开发效率和代码质量

<!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>

相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
24天前
|
JavaScript
在 Vue 中处理组件选项与 Mixin 选项冲突的详细解决方案
【10月更文挑战第18天】通过以上的分析和探讨,相信你对在 Vue 中使用 Mixin 时遇到组件选项与 Mixin 选项冲突的解决方法有了更深入的理解。在实际开发中,要根据具体情况灵活选择合适的解决方案,以确保代码的质量和可维护性。
80 7
|
17天前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
|
6天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法,包括 props、事件、Vuex 状态管理等,帮助开发者选择最适合项目需求的通信方式,提高开发效率和代码可维护性。
|
6天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中,不同组件之间传递数据和事件的方法。常用的方式有:props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
|
8天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
19 3
|
23天前
|
缓存 JavaScript UED
Vue 的动态组件与 keep-alive
【10月更文挑战第19天】总的来说,动态组件和 `keep-alive` 是 Vue.js 中非常实用的特性,它们为我们提供了更灵活和高效的组件管理方式,使我们能够更好地构建复杂的应用界面。深入理解和掌握它们,以便在实际开发中能够充分发挥它们的优势,提升我们的开发效率和应用性能。
43 18
|
17天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式,可以实现组件的按需加载,减少资源浪费,提高应用的响应速度和用户体验。在实际应用中,需要根据具体情况选择合适的懒加载方式,并结合性能优化的其他措施,以打造更高效、更优质的 Vue 应用。
|
22天前
|
前端开发 UED
vue3知识点:Suspense组件
vue3知识点:Suspense组件
29 4
|
21天前
|
JavaScript 前端开发 测试技术
组件化开发:创建可重用的Vue组件
【10月更文挑战第21天】组件化开发:创建可重用的Vue组件
24 1
|
22天前
|
JavaScript 前端开发 Java
《vue3第五章》新的组件,包含:Fragment、Teleport、Suspense
《vue3第五章》新的组件,包含:Fragment、Teleport、Suspense
32 2