Vue.js(二)

解构赋值

         var a=1;
		 var b=2;
		 var c=3;

		 var a=1,b=2,c=3;

		//数组的解构赋值
		//基础语法
		let[a,b,c]=[1,2,3];

		//当一个值没有初始化时
		 let[a,b,c]=[,2,3];

		//重新赋值的情况
		let[a=1,b,c]=[22,2,3];
		console.log(a);
		console.log(b);
		console.log(c);
       

对象的解构赋值

		let{obj1,obj2}={obj2:'hello',obj1:'hi'};
		console.log('obj1'+obj1);
		console.log('obj2'+obj2);

对象的属性别名 注意：起了别名之后，原来的名字就无效了

		let{obj1:john,obj2}={obj1:'snow',obj2:'Stark'};
		console.log('obj1'+john);
		console.log('obj2'+obj2);

对象的解构赋值中 也可以制定默认值

		let{obj1:john='snow',obj2}={obj2:'Ned'};
		console.log('obj1'+john);
		console.log('obj2'+obj2);

Math是内置对象 不需要实例化

        console.log(Math);
		let{obj1,obj2}={obj2:'hello',obj1:'hi'};
		let{random,sin,cos}=Math;
		//{random:function(){},cos:function(){}}
		console.log(random);
		console.log(cos);
		console.log(sin);

字符串的解构赋值

		let[a,b,c,d,f,g]='hello';
		console.log(a);
		console.log(b);
		console.log(c);
		console.log(d);
		console.log(f);
		console.log(g);
		console.log('hello'.length);

       //复杂(引用)数据类型  对象 有属性和方法

		/*基本数据类型没有属性和方法！！！*/

		//解构赋值时，如果等号前面是一个对象时找到对应的属性
		let{a,length}='hihihi';
		console.log(length);
		console.log(a);

字符串扩展

• includes() 判断字符串中是否包含指定的字符串 有的话返回true，没有的话返回false 第一个参数：匹配的字符，第二个参数：从第几个开始匹配
• startsWith() 判断字符串是否以指定的字符串开始
• endsWith() 判断字符串是否以指定的字符串结束

		var str="zhangsan,lisi,wangwu,zhaoliu";
		console.log(str.includes('lisi',5));
		
		console.log(str.startsWith('wangwu'));
		console.log(str.endsWith('zhaoliu'));

模板字符串

波浪线表示模板 数据用${}填充

		let obj={name:"seven",address:"M78",height:"300m"};
		let temp=`
			<div>
				<span>${obj.name}</span>
				<span>${obj.address}</span>
				<span>${obj.height}</span>
			</div>
		 `
		 console.log(temp);

过滤器

概念：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。

私有过滤器：

例：

<div id="box1">
		当前时间为：{{time|dateFliter}}
</div>
<script>
var v2=new Vue({
			el:'#box1',
			data:{
				time:new Date()
			},
			methods:{},
			filters:{
				//定义一个私有过滤器
				//语法规则  过滤器名称：function(){}
				dateFliter:function(msg){
					var date=new Date(msg);
					var y= date.getFullYear();
					var m= date.getMonth()+1;
					var d= date.getDate();
					return`${y}-${m}-${d}`;
				}
			}
		})
</script>
			

全局过滤器：

例：

	<div id="app">
		{{msg | fmsg}}
	</div>
	<script>
		//Vue.filter('过滤器名称',function(){})
		//function的第一个参数是需要过滤的数据
		Vue.filter("fmsg",function(msg){
			return msg.replace(/shit/g,'****');
		})
		var vm=new Vue({
			el:'#app',
			data:{
				msg:'bullshit shit undefinde null'
			}
		})
	</script>