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代码 

<div id="app">
	<p>
				<span :class="a">灰太狼</span>
				<br />
				<span :class="b">灰太狼</span>
			</p>
			
			<p>
				 <!--直接使用style样式单-->
				<span style="font-size: 40px;color: green;">原本样式</span>
				<br />
				<!-- 使用vue，样式名称为驼峰风格 。花括号，多个属性逗号分隔-->
				<span :style="{fontSize:fontSize+'px',color: color}">拼接样式</span>
			</p>
			
			<p>
				<span :style="clickStyle" >设置事件样式</span>
			</p>
</div>

2. 事件修饰符

几个常用的事件修饰符：

stop
prevent
self
once
capture
passive
native

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

<div @click="shout(2)">
  <button @click.stop="shout(1)">ok</button>
</div>

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

 

 

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

<!-- 表单阻止跳转提交事件 -->
<form action="test.action" method="post" @submit.prevent="Onsumit">
        <input type="text" name="name" />
        <input type="submit" value="提交" /    >
</form>

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

<div v-on:click.self="doThat">...</div>

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

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

 

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

<button @click.once="shout(1)">ok</button>

 

 

keyup

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

<!-- 键盘点击提交事件 -->
<input type="text" @keyup.13="doSubmit" v-model="name">

常用的表单修饰符

• lazy
• trim
• number

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

<input type="text" v-model.lazy="age">
<p>{{age}}</p>

 

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

<input type="text" v-model.trim="age" >

  

 

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

<div id="app">
    <div>
		  <button-counter title="测试"/>
	</div>
</div>

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

3.自定义组件

 定义一个button-counter组件

<div id="app">
	 <div>
		  <!--title是用来传值的自定义属性，在自定义组件的props中定义 -->
		  <button-counter title="测试"/>
	 </div>
</div>

属性如下

props

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

components

局部自定义组件名称

template: '<button @click="doClick">{{title}}：局部组件，点击计数器:

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

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