Vue的详细教程--基础语法【下】

Welcome Huihui's Code World ! !

接下来看看由辉辉所写的关于Vue的相关操作吧

目录

Welcome Huihui's Code World ! !

一.事件处理器

①.stop

②.prevent

③.once

加了once

没加once

④按键修饰符

⑤表单案例

二.自定义组件

案例

三.组件通信

父传子

子传父

---

一.事件处理器

①.stop

处理事件冒泡的问题（）

这四个div是属于嵌套关系，当我点击包裹在最里面的div时，居然触发了外面的那些div的事件

	
		
		
		
	
	
	
		
			

				
事件处理器
				

					

						

							

						
					
				
				
			
		
		
	

但是当我们加以处理之后，便可以完美的解决这个问题

②.prevent

用于阻止事件的默认行为

可能这样说会有些笼统，那么举一个例子，当我们点击提交按钮进行提交的时候，就不会在重新加载此界面，而只是进行提交的操作

③.once

加了once

没加once

④按键修饰符

顺便提一嘴，vue允许为v-on在监听键盘事件时添加按键修饰符

全部的按键别名：

  .enter

  .tab

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

  .esc

  .space

  .up

  .down

  .left

  .right

  .ctrl

  .alt

  .shift

  .meta      

⑤表单案例

	
		
		
		
	
	
		

			
注册界面
			

				

					姓名：

					密码：

					性别：
					男
					女

					爱好：
					

						{{h.name}}
					
					地址：
					
						===请选择===
						{{a.name}}
					

					个人描述：
					

					确认
					
				
			
		
	
	

二.自定义组件

⭐组件简介

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

      组件可以扩展HTML元素，封装可重用的代码

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

⭐全局和局部组件

     全局组件：Vue.component(tagName, options)，tagName为组件名，options为配置选           项。

     局部组件: new Vue({el:'#d1',components:{...}})

⭐props

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

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

❗注意

   ①：因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、              computed、watch、methods 以及生命周期钩子等。仅有的例外是像el这样根实例特              有的选项。

  ②：当我们定义这个 组件时，你可能会发现它的data并不是像这样直接              提供一个对象 （❌）       

data: {

 count: 0

 }

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

 data: function () {

          return {

            count: 0

          }

        }

    ③：定义组件名的方式有两种

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

 Vue.component('my-component-name', { /* ... */ })，引用方式：

         首字母大写命名

 Vue.component('MyComponentName', { /* ... */ })，
引用方式： 和都是可接受的 

    ④：HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字                 符。这意味着当你使用 DOM 中的模板时，

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

 props: ['postTitle'],

    ⑤：

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

案例

三.组件通信

   注1：Vue自定义事件是为组件间通信设计   

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

            

父Vue实例->Vue实例，通过prop传递数据

子Vue实例->父Vue实例，通过事件传递数据

   注2：事件名

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

        建议使用“短横线分隔命名”，例如：three-click

父传子

子传父

好啦，今天的分享就到这了，希望能够帮到你呢！