Vue事件

最新推荐文章于 2022-04-13 10:43:28 发布

原创最新推荐文章于 2022-04-13 10:43:28 发布 · 263 阅读

本内容遵循CC 4.0 BY-SA版权协议

mounted

页面元素挂载完毕之后就会去调用，可以在这里做一些原始数据的拷贝

	new Vue({
					el:'#box',
					data:{
						content:''
					},
					methods:{
						sortArray(type){
							if(type==1){
								this.jsonArray.sort(function(a,b){
									return a.age-b.age;
								});
							}else if(type==2){
								this.jsonArray.sort(function(a,b){
									return b.age-a.age;
								});
							}else if(type==3){
								//再把备份的数组中的元素再拷回原数组
								this.jsonArray=this.copyArry.slice(0);
							}
							
						}
					},
					mounted() {
						//页面元素挂载完毕之后就会调用
						//alert("调用了")
						//把原数组拷贝一份
						this.copyArry=this.jsonArray.slice(0);
					}
				});

Vue事件绑定

<h1 :class="{aClass:a,bClass:b}" v-on:mouseenter="change()"  @mouseleave="change2()">这是一行标题</h1>

防止事件的冒泡和默认行为

preventDefault() 通知浏览器不要执行与事件关联的默认动作。
stopPropagation() 不再派发事件。
简写就是stop和prevent，绑定点击事件如下：

<div id="" style="width: 200px;height: 200px;background: #42B983;" @click.stop="show1()">

键盘事件

你要监听哪个键就把键码写上，特殊的键可以写单词

<input type="text" id="" value="" @keypress.97="show2()"/>
<input type="text" id="" value="" @keypress.enter="show2()"/>

表单中的数据收集

<form action="#" method="get" @submit.prevent="mySubmit()">
				用户名：<input type="text" name="username" v-model="username" required="required"/><br>
				密码：<input type="password" name="password" v-model="password" required="required"/><br>
				性别：<input type="radio" name="sex" value="1" v-model="sex"/> 男 ：<input type="radio" name="sex" value="0" v-model="sex"/> 女
				<br>
				爱好：<input type="checkbox"  name="hobby" value="run" v-model="hobby"/> 跑步
				<input type="checkbox"  name="hobby" value="game" v-model="hobby"/> 玩游戏
				<input type="checkbox"  name="hobby" value="sing" v-model="hobby"/> 唱歌
				<br>
				学历：
			<!-- 	<select name="xl" v-model="xl">
					<option :value="obj.id" v-for="obj in selectData">{{obj.name}}</option>

				</select> -->
				<select name="xl" v-model="xl">
					<option value="1">小学</option>
					<option value="2">中学</option>
					<option value="3">大学</option>
				</select>
				
				<textarea rows="" cols="" v-model="desc">
					
				</textarea>
				<input type="submit" value="提交"/>
			</form>

看代码就可以看出它跟JS差不多，几个不一样的我写一下：
required 这是表单上自带的属性，以前没写过，表明该输入框必须填写，不能空

Vue对象的生命周期

在这里插入图片描述
这是Vue文档里的生命周期图，从被创造到毁灭，毁灭需要调用方法this.$destroy();

ref和v-cloak

ref

var v=this.$refs.content;
	alert(v.innerText);
	<h1 id="myh1" ref="content">一行文本</h1>

痛过給标签设置ref属性也可以访问到绑定的元素对象

v-cloak

它设计的用途是为了在网络不好或加载数据过大时避免出现闪烁，提高用户体验，一般与display配合，让其在实例准备完毕后v-cloak标签自动消失后再显示出来。

过渡动画

<style type="text/css">
			.myclass {
				height: 200px;
				width: 200px;
				background: blue;
			}

			/* 动画进入的途中 */
			.guodu-enter-active {
				transition: opacity, background 2s;
			}

			/*动画离开的途中*/
			.guodu-leave-active {
				transition: opacity 2s;

			}

			/*动画开始进入-----默认样式*/
			.guodu-enter {


				/* 进入从看不见到看见（默认） */

			}

			/*默认样式------动画离开完成*/
			.guodu-leave-to {
	
			}
		</style>

相互搭配

<style type="text/css">
			.myclass {
				height: 200px;
				width: 200px;
				background: blue;
			}

			/* 动画进入的途中 */
			.guodu-enter-active {
				transition: opacity, background 2s;
			}

			/*动画离开的途中*/
			.guodu-leave-active {
				transition: opacity 2s;
				animation: bounce-in .5s;
			}

			/*动画开始进入-----默认样式*/
			.guodu-enter {
				opacity: 0;
				/* 进入从看不见到看见（默认） */
				background: red;
				animation: bounce-in .5s;
			}

			/*默认样式------动画离开完成*/
			.guodu-leave-to { /* 从看的见（默认）---到不见 */
				background: yellow;
				opacity: 0;
			}

			@keyframes bounce-in {
				0% {
					transform: translateX(100px);
				}

				50% {
					
					transform: translateX(100px);
				}

				100% {
					
					transform: translateX(100px);
				}
			}
		</style>

定义局部组件

components:{
						son:{
							data:function(){ //组件的数据data 必须是一个函数 通过return返回一个对象,对象里面写子组件的数据
								return {
									ziMsg:'我是子组件的数据'
								}
							},
							/* 子组件的模板 里面放html标签 */
							template:'<h1 @click=show()>{{ziMsg}}</h1>',
							methods:{
								show(){
									alert("abc");
								}
							}
						}
					}



<body>
		<div id="box">
			<!-- 子组件 -->
			<!--使用组件 -->
			<son></son>
		</div>
	</body>

像上面一样，当定义好后，页面就会将son标签的位置渲染好。

过滤器

时间过滤器

首先可以引入一个时间的包装类moment.js，然后再定义一个局部过滤器

<script src="js/moment.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload=function(){
				new Vue({
					el:'#box',
					data:{
						mydate:new Date()
					},
					//定义局部过滤器
					filters:{ //对原来的展示数据,进行过滤器的处理后,会展示新结果
						formatDate:function(value,format="YYYY年MM月DD日 HH:mm:ss"){
							// alert(value);
							//return moment(value).format('YYYY年MM月DD日 HH:mm:ss');
							return moment(value).format(format);
							return 
						}
					}
				})
			}
		</script>

然后在写入主程序中

<body>
		<div id="box">
		//第一种方法
			<!-- 年月日时分秒 -->
			<h1>{{mydate|formatDate}}</h1>
			<!-- 年月日 -->
			//第二种方法
			<h1>{{mydate|formatDate('YYYY年MM月DD日')}}</h1>
			<!-- 时分秒 -->
			<h1>{{mydate|formatDate('HH:mm:ss')}}</h1>
		</div>

如上所示，过滤器有两种写法，第一种是将格式直接跟在后面，第二种则是写到过滤的函数中直接调用

全局过滤器

	<script type="text/javascript">
			window.onload=function(){

				//全局过滤器:多个vue实例都可以使用
				Vue.filter('daxie',function(value){
					return value.toUpperCase();
				})
				
					//定义局部过滤器:只有自己的vue实例能用
					filters:{ //对原来的展示数据,进行过滤器的处理后,会展示新结果
						formatDate:function(value,format="YYYY年MM月DD日 HH:mm:ss"){
							// alert(value);
							//return moment(value).format('YYYY年MM月DD日 HH:mm:ss');
							return moment(value).format(format);
							
						}`在这里插入代码片`
					}
				});
				//再创建一个Vue实例
				new Vue({
					el:'#box2',
					data:{
						msg2:'aaaaaa',
						dateTime:new Date()
					}
				})
			}
		</script>

全局过滤器就是将过滤器写在Vue函数外面

自定义指令

看代码一目了然

	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload = function() {
				//自定义全局指令 ,多个Vue对象,可以公用
				Vue.directive('text-toupercase2',function (el,mydata) {
							el.innerText=mydata.value.toUpperCase();
						})
				
				new Vue({
					el: '#box',
					data: {
						'msg': 'Hello'
					},		
					directives:{ //局部自定义指令,只能该vue对象使用
						//自定义指令的名称要用单引号引起来
						//el 自定义指令所在的标签的对象
						//mydata  包含指令相关数据的容器对象
						'text-toupercase':function (el,mydata) {
							el.innerText=mydata.value.toUpperCase();
							
						}
					}
				})
			}
		</script>
		<script type="text/javascript">
			"".
		</script>
	</head>
	<body>
		<div id="box">
			<h1 v-text="msg"></h1>
			<!-- 必须以 v- 开头 -->
			<h1 v-text-toupercase="msg"></h1>
			<h1 v-text-toupercase2="msg"></h1>
		</div>
	</body>