Vue事件

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事件绑定

这是一行标题

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

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

键盘事件

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

表单中的数据收集

				用户名：

				密码：

				性别： 男 ： 女
				

				爱好： 跑步
				 玩游戏
				 唱歌
				

				学历：
			
				
					小学
					中学
					大学
				
				
									
				
				
			

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

Vue对象的生命周期

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

ref和v-cloak

ref

var v=this.$refs.content;
	alert(v.innerText);
	
一行文本

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

v-cloak

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

过渡动画

相互搭配

定义局部组件

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




		

			
			
			
		
	

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

过滤器

时间过滤器

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

然后在写入主程序中

		

		//第一种方法
			
			
{{mydate|formatDate}}
			
			//第二种方法
			
{{mydate|formatDate('YYYY年MM月DD日')}}
			
			
{{mydate|formatDate('HH:mm:ss')}}
		

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

全局过滤器

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

自定义指令

看代码一目了然