vue自定义组件 事件修饰符 表单修饰符

今天给大家分享自定义组件、表单修饰符和事件修饰符的基本使用方法

1.设置style样式的三种方式

1.直接使用原来的style样式单

2.通过data属性控制样式，进行拼接

3.通过事件设置样式

效果展示

 

vue代码

	new Vue({
			    el: "#app",
			
			    data(){
					return{
						a: 'fontClass',
						b: ['fontClass', 'colorClass'],
									
						fontSize: 40,
						color: 'red',
									
						//样式对象，注意：样式名使用驼峰命名，如：fontSize
						clickStyle: {
						    fontSize: '50px',
						    color:'blue'
						}
					}
			    }
			});

HTML代码 

	

				灰太狼
				

				灰太狼
			
			
			

				 
				原本样式
				

				
				拼接样式
			
			
			

				设置事件样式
			

2. 事件修饰符

几个常用的事件修饰符：

stop
prevent
self
once
capture
passive
native

stop
阻止了事件冒泡，相当于调用了event.stopPropagation方法

  ok

//点击shout只输出1，不会触发shout(2)

 

 

prevent
阻止了事件的默认行为，提交事件不再重载页面

self
只当在 event.target 是当前元素自身时触发处理函数

...

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。

因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击

 

once
绑定了事件以后只能触发一次，第二次就不会触发，打个比方，用户支付只能触发一次

ok

 

 

keyup

当用户点击回车时，提交事件

常用的表单修饰符

• lazy
• trim
• number

lazy
在我们填完信息，光标离开标签的时候，才会将值赋予给value，也就是在change事件之后再进行信息同步

{{age}}

 

trim
自动过滤用户输入的首空格字符，而中间的空格不会过滤

  

 

number
自动将用户的输入值转为数值类型，但如果这个值无法被parseFloat解析，则会返回原来的值

注意事项：如果没有加number，转为数值类型，表单输入的是字符串，就会拼接上去，不能实现增加。

3.自定义组件

 定义一个button-counter组件

属性如下

props

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

components

局部自定义组件名称

template: '{{title}}：局部组件，点击计数器:

模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素

var vm = new Vue({
		    el: '#app',
		    data: {
		        ts: new Date().getTime()
		    },
		
		    //局部自定义组件
		    components: {
		    
		        //组件名: {配置项}
		        'button-counter':  {
		            
		            //用来传值的自定义属性
		            props:['title'],
		
		            //模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素
		            template: '{{title}}：局部组件，点击计数器:{{count}}',
		
		            //注意：在自定义的组件中需要使用函数来定义data
		            data: function() {
		                return {
		                    count: 0
		                }
		            },
		            
		            //定义响应事件函数
		            methods: {
		                doClick: function() {
		                    //注意此处this的作用返回是自定义组件,而不是上面声明
		                    //的vue实例.
		                    this.count++;
		                }
		            }
		        }
		    }