Vue语法模板（样式绑定，事件处理器，表单，自定义组件，组件通信）

目录

一.样式绑定

1，将字体变为红色

2，调节字体大小

 二，事件处理器

事件修饰符

1，阻止单击事件冒泡

 2，click 事件只能点击一次

案件修饰符

三，表单

 四，自定义组件

五，组件通信

---

一.样式绑定

class绑定
      v-bind:class="expression" 
      expression的类型：字符串、数组、对象

style绑定

      v-bind:style="expression"
      expression的类型：字符串、数组、对象

1，将字体变为红色

原始写法

{{msg}}

 绑定写法

{{msg}}

colorred:'color:red;'

注意：变量定义不能使用中划线，参照案例样式绑定命名错误color-red

2，调节字体大小

{{msg}}

f200: 'f200'

 二，事件处理器

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

事件修饰符

Vue通过由点(.)表示的指令后缀来调用修饰符，
      .stop
      .prevent
      .capture
      .self
      .once 

     
     
     
     

     
     
     
     

     
     

...

     
     

...

     
     
 

1，阻止单击事件冒泡

冒泡事件会连续触发事件

 冒泡事件代码如下：

	
		
		
		
		
	
	
		
		

			
冒泡事件
			

				

					

						

					
				
			
		
	
	

页面效果

 点击最小的黑色正方形，会依次触发黑，蓝，橙，红四个弹框

当我们不需要连续触发事件时，可以通过如下代码阻止事件冒泡

.stop="red">
                

.stop="orange">
                    

.stop="blue">
                        

.stop="black">

 2，click 事件只能点击一次

 

提交答案

            提交答案

 sub(){
                    alert("已提交");
                }

 以上代码效果为能重复点击提交并提交表单

阻止二次提交

            提交答案

案件修饰符

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

     
     

      全部的按键别名：
      .enter
      .tab
      .delete (捕获 "删除" 和 "退格" 键)
      .esc
      .space
      .up
      .down
      .left
      .right
      .ctrl
      .alt
      .shift
      .meta 

三，表单

用v-model指令在表单控件元素上创建双向数据绑定

常用控件
       文本框/密码框/文本域/隐藏域
   
       单选复选框/多选复选框

       单选按钮

       下拉框

	
		
		
		
	
	
		

			
标题
			

				

					
vue表单
					姓名：

					密码：

					
					年龄：

					性别：
					男
					女

					爱好：
					

						{{h.name}}
					
					类别：
					
						===请选择===
						{{t.name}}
					

					备注：
					

					确认
					
				
			
		
	
	

 四，自定义组件

组件(Component)是Vue最强大的功能之一
组件可以扩展HTML元素，封装可重用的代码（控件将大量的js代码封装了起来）
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

全局组件：Vue.component(tagName, options)，tagName为组件名，options为配置选项。
局部组件: new Vue({el:'#d1',components:{...}})

注册后，我们可以使用以下方式来调用组件： 

props
      props是父组件用来传递数据的一个自定义属性。
      父组件的数据需要通过props把数据传给子组件，子组件需要显式地用props选项声明 "prop"

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

定义组件名的方式有两种
         短横线分隔命名(建议使用) 
         Vue.component('my-component-name', { /* ... */ })，引用方式：

         首字母大写命名
         Vue.component('MyComponentName', { /* ... */ })，引用方式： 和都是可接受的   

HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，
camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：
props: ['postTitle'],
 

需求：当引用一个mybutton，页面上要显示一个独特标记按钮

 按钮会显示被点击的次数

五，组件通信

监听事件：$on(eventName) 
触发事件：$emit(eventName) 

Vue自定义事件是为组件间通信设计   
vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定
     
        父Vue实例->Vue实例，通过prop传递数据
        子Vue实例->父Vue实例，通过事件传递数据 

	
		
		
		
	
	
		

			

				

					
{{ts}}
					
vue组件
					
					
				
			
		
	
	

template是自定义组件在页面上显示的内容
在button里绑定一个点击事件，当n增加到能被3整除时触发事件xx-click，在body定义的自定义按钮中绑定该事件
由于body界面本身与new vue（）发生数据交互，所以xx-click事件的方法写到new vue里，于是该组件本身与new vue形成组件通信
 

div*4+Tab键，得到4个div

.red>.orange>.blue>.black+Tab键，得到