目录

一、事件处理器

1.事件修饰符

 2.发送一次

3.按键修饰符 

 二、自定义组件

  1 组件简介

  2 全局和局部组件

  3 props

三、 组件通信

  自定义事件

1.子传父 

2.组件总结

定义&＃xff1a;template

父传子&＃xff1a;props

子传父&＃xff1a;通过$emit注册事件名

this.$emit(&＃39;事件名&＃39;&＃xff0c;....)    这里一般是json对象 

四、 表单综合案例

 五、总结

1.事件处理器

2.简单组件

3.父传子

4.子传父

5.综合案例表单 

一、事件处理器

事件监听可以使用v-on 指令  

1.事件修饰符

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

  .stop

  .prevent

  .capture

  .self

  .once

  

  

  

  

  

  

  

  

  

  

...

  

  

...

  

  

  注1&＃xff1a;什么是事件冒泡?

也就是可以这样理解为&＃xff1a;当我点击div就会弹出div&＃xff0c;传播到body&＃xff0c;在到document

解决方法&＃xff1a;阻止冒泡

 

  




{{msg}}





 就不会传播了

 2.发送一次

为了防止有些人&＃xff0c;一直点击发送按钮&＃xff0c;有可能是因为它的网络慢&＃xff0c;或者其他&＃xff0c;它就一直在哪里点&＃xff0c;每点击一次就会像后台发送一次请求

演示&＃xff1a;

 解决方法&＃xff1a;

 

  




发送一次

点我试试





运行结果&＃xff1a;

3.按键修饰符 

 Vue允许为v-on在监听键盘事件时添加按键修饰符&＃xff1a;

  

  

  Vue为最常用的按键提供了别名

  

  

enter &＃61; 13  它们两是同一个意思   回车键

  全部的按键别名&＃xff1a;

  .enter

  .tab

  .delete (捕获 "删除" 和 "退格" 键)

  .esc

  .space

  .up

  .down

  .left

  .right

  .ctrl

  .alt

  .shift

  .meta  

运行结果如图所示&＃xff1a; 

 二、自定义组件

如果是前端框架&＃xff0c;这个自定义组件是要深入的去了解

 vue组件

  1 组件简介

      组件(Component)是Vue最强大的功能之一

      组件可以扩展HTML元素&＃xff0c;封装可重用的代码

      组件系统让我们可以用独立可复用的小组件来构建大型应用&＃xff0c;几乎任意类型的应用的界面都可以抽象为一个组件树

  2 全局和局部组件

      全局组件&＃xff1a;Vue.component(tagName, options)&＃xff0c;tagName为组件名&＃xff0c;options为配置选项。

      局部组件: new Vue({el:&＃39;#d1&＃39;,components:{...}})

      注册后&＃xff0c;我们可以使用以下方式来调用组件&＃xff1a;

      

  3 props

      props是父组件用来传递数据的一个自定义属性。

      父组件的数据需要通过props把数据传给子组件&＃xff0c;子组件需要显式地用props选项声明 "prop"

   注1&＃xff1a;因为组件是可复用的 Vue 实例&＃xff0c;所以它们与 new Vue 接收相同的选项&＃xff0c;例如 data、computed、watch、methods

        以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。

   注2&＃xff1a;当我们定义这个 组件时&＃xff0c;你可能会发现它的data并不是像这样直接提供一个对象

        data: {

          count: 0

        }

        取而代之的是&＃xff0c;一个组件的data选项必须是一个函数&＃xff0c;因此每个实例可以维护一份被返回对象的独立的拷贝&＃xff1a;

        data: function () {

          return {

            count: 0

          }

        }

  

    注3&＃xff1a;定义组件名的方式有两种

         短横线分隔命名(建议使用)

         Vue.component(&＃39;my-component-name&＃39;, { /* ... */ })&＃xff0c;引用方式&＃xff1a;

         首字母大写命名

         Vue.component(&＃39;MyComponentName&＃39;, { /* ... */ })&＃xff0c;引用方式&＃xff1a; 和都是可接受的   

    注4&＃xff1a;HTML 中的特性名是大小写不敏感的&＃xff0c;所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时&＃xff0c;

         camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名&＃xff1a;

         props: [&＃39;postTitle&＃39;],

    注5&＃xff1a;props: [&＃39;title&＃39;, &＃39;likes&＃39;, &＃39;isPublished&＃39;, &＃39;commentIds&＃39;, &＃39;author&＃39;]

         希望每个 prop 都有指定的值类型

         props: {

           title: String,

           likes: Number,

           isPublished: Boolean,

           commentIds: Array,

           author: Object,

           callback: Function,

           contactsPromise: Promise // or any other constructor

 运行结果如图所示&＃xff1a;

三、 组件通信

  自定义事件

   监听事件&＃xff1a;$on(eventName)

   触发事件&＃xff1a;$emit(eventName)

   注1&＃xff1a;Vue自定义事件是为组件间通信设计   

        vue中父组件通过prop传递数据给子组件&＃xff0c;而想要将子组件的数据传递给父组件&＃xff0c;则可以通过自定义事件的绑定

     

        父Vue实例->Vue实例&＃xff0c;通过prop传递数据

        子Vue实例->父Vue实例&＃xff0c;通过事件传递数据

   注2&＃xff1a;事件名

        不同于组件和prop&＃xff0c;事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称

        建议使用“短横线分隔命名”&＃xff0c;例如&＃xff1a;three-click

1.子传父 

子组件 将参数 传递给  父组件 的关键在于下面这两个&＃xff0c;要满足下面的两个条件
        1.$emit    2.自定义事件 

this.$emit(&＃39;事件名&＃39;&＃xff0c;{})

代码块&＃xff1a; 

2.组件总结

定义&＃xff1a;template

父传子&＃xff1a;props

子传父&＃xff1a;通过$emit注册事件名

this.$emit(&＃39;事件名&＃39;&＃xff0c;....)    这里一般是json对象 

四、 表单综合案例

 运行结果如图所示&＃xff1a;

 五、总结

1.事件处理器

阻止冒泡和只能发送一次还有按键的修饰符等等

阻止冒泡就是为了传播&＃xff0c;当点击最外面一层&＃xff0c;就不会传播&＃xff0c;点击最里面的就会传播到最外面停止&＃xff0c;

就好像河里的水&＃xff0c;当你去点击水面的时候&＃xff0c;它就会从内传播到外&＃xff0c;直到停止。

发送一次指的的就是&＃xff0c;只能向服务发送一次请求&＃xff0c;这样就可以减少服务的压力&＃xff0c;为了防止某人手不安分&＃xff0c;它没反应就一直在哪里狂点。

按键修饰符指的就是键盘的按键事件&＃xff0c;就是不需要鼠标点击&＃xff0c;直接用键盘回应&＃xff0c;就好比如我们登陆&＃xff0c;我们每登陆一个账号都会有一个确定或者注册等等&＃xff0c;我们就可以用按键的修饰符来完成&＃xff0c;我们就用回车键就可以直接进去登陆&＃xff0c;不需要用鼠标移到来点击那个按钮。

2.简单组件

通过component里面有两个参数&＃xff0c;一定组件名字&＃xff0c;二是模板

Vue.component(&＃39;定义的组件名称&＃39;&＃xff0c;{

模板&＃xff1a;template&＃xff1a;[标签]

})

3.父传子

是要通过在模板里面写 props&＃xff1a;[&＃39;&＃39;,&＃39;&＃39;,...] 这里面就是你父标签里面的参数&＃xff0c;有多少放多少

4.子传父

子组件 将参数 传递给父组件要满足两个条件&＃xff0c;一是$emit &＃xff0c;二是自定义事件

this.$emit(&＃39;自定义事件&＃39;&＃xff0c;参数)

5.综合案例表单