vue模板语法下

样式绑定

class绑定
使用方式：v-bind:class=“expression”
expression的类型：字符串、数组、对象
style绑定
v-bind:style=“expression”
expression的类型：字符串、数组、对象

事件处理器

事件监听可以使用v-on 指令
事件修饰符
Vue通过由点(.)表示的指令后缀来调用修饰符，
.stop：阻止事件冒泡的发生
.prevent：阻止默认事件的发生
.capture：触发捕获事件()先执行大盒子的事件，起执行小盒子的事件
.self：只有点击他本身时才去执行，点击他的子元素不去执行（只有自身触发才会执行回调，不执行冒泡过来的事件
）
.once：事件只能点击一次

...

...

什么是事件冒泡

样式绑定与事件处理器代码演示
class绑定、style绑定、 事件修饰符（once\once的使用）

	
		
		
		
	
	
	
	
		
		

			

				

					
样式绑定与事件处理器
					笑一笑十年少
					拼一拼是青春


					
					
				
				

					
事件冒泡
					

						

							

								

									
								
							
						
					
				
				

					
模拟QQ消息发送
					{{info}}
					发送多次
					只能发送一次
				
				
			
		
	
	

结果

事件修饰符（Stop\prevent\capture\self的使用）

    
    
    



    
    
        
    
 
    
    
 
    
    
 
    
    

        百度链接
    
 

结果
stop的使用

prevent的使用

self的使用

capture的使用

vue表单

类似网上注册页

	
		
		
		
	
	
		

			
标题
			

				

					
vue表单
					姓名：

					密码：

					
					年龄：

					性别：
					男
					女

					爱好：
					

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

					备注：
					

					确认
					
				
			
		
	
	

参考：vue模板语法上
结果

vue组件（全局和局部组件）

组件简介
组件(Component)是Vue最强大的功能之一
组件可以扩展HTML元素，封装可重用的代码
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树
全局和局部组件
全局组件：Vue.component(tagName, options)，tagName为组件名，options为配置选项。局部组件: new Vue({el:’#d1’,components:{…}})
注册后，我们可以使用以下方式来调用组件：
代码演示

	
		
		
		
	
	
	
		
		

			

				

					
局部组件的注册
					
				
				

					
父子组件的传参（父传子）
					
					
				
				

					
父子组件的传参（子传父）
					
					接受自定义组队中内部的变量值:{{inmm}}
					作者：{{au}}
					

					
					接受自定义组队中内部的变量值:{{inmm}}
					作者：{{au}}
				
				

					
全部组件的注册
					
				
			
		
	
	

结果