Vue监听器，计算属性，过滤器

day03监听器，计算属性，过滤器

watch

watch:{
	//浅监听
	name(newV,oldV){
		console.log(newV,oldV)
	}
	//深度监听
	obj:{
		handler(){
			console.log('我变化了')
		},
		deep:true
	}
}

不建议使用深度监听，容易造成页面卡顿

JSONP和ajax

1、jsonp原理：动态创建script
2、实现步骤

①创建script标签      var os = document.createElement('script')
②设置src属性         os.src="路径?cb=bbb"
③将script插入页面    document.body.appendChild(os)
④设置回调函数        function bbb(res){ console.log(res) }

3、区别
jsonp：只支持get，不支持post。使用前提：跨域、接口一定有回调函数
ajax：既get又支持post，但是不支持跨域

过滤器

| 管道符

//全局过滤器定义
Vue.filter('filterTel',(aaa)=>{
	return aaa.slice(0, 3) + '****' + aaa.slice(7)
})
//局部过滤器
filters: {
  filterPrice: function (str) {
    return str.toFixed(2)
  }
}
//过滤器调用
{{tel | filterTel}}

全局过滤器在任何一个Vue实例中都可以使用，而局部过滤器只有在当前Vue实例中才能使用，推荐定义全局过滤器

computed计算属性

//定义方式
new Vue({
	el:'#app',
	computed: {
	   a(){
	     return '哈哈哈，我是computed里面的a'
	   }
	}
})
//使用方式
{{a}}

animate.css

1、安装

npm i animate.css --save

2、引入

<link rel="stylesheet" href="./node_modules/animate.css/animate.css">

3、使用

<transition 
enter-active-class="animate__animated animate__bounceInDown" 
leave-active-class="animate__animated animate__bounceOutRight">
  <span v-if="isShow"></span>
</transition>

一般我们只设置进来的动画，不设置离开的动画

面试题

1、watch擅长处理的场景：一个数据影响多个数据； computed擅长处理的场景：一个数据受多个数据影响。
2、说明watch和methods的作用与区别：watch是观察的动作，自动执行。methods是存放方法，主动调用
3、Vue中过滤器如何定义和使用？
4、使用过滤器实现实现日期的格式化，只显示年月日。
5、vue中遇到bug？
①、如果使用{{}}，首屏会出现闪屏，用v­text解决
②、使用深度监听，可能会造成页面卡顿。解决：转成简单类型，进行监听
6、常用的事件修饰符都有哪些？分别说明它们的作用。
7、什么是Vue的生命周期？ Vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM 渲染两大重要功能。

复习一下js方法

indexOf(‘值’) 用来检索字符串中是否包含某个字符。如果包含返回索引，如果不包含返回-1
includes(‘要检索的字符’) 用来检索字符串中是否包含某个字符，是true 否false
slice(num1,num2) 第一个参数表示开始索引，第二个参数表示结束索引。注意包括开始不包括结束
toFixed(2) 最后一位会四舍五入，并保留小数点后两位
padStart(参数1,参数2) 这是字符串的方法，参数一表示规定的位数，参数2表示如果位数不够的话用什么什么来补上。在开头的位置补
padEnd(参数1,参数2) 这是字符串的方法，参数一表示规定的位数，参数2表示如果位数不够的话用什么什么来补上。在结束的位置补
Math.max() 选取数字序列中最大的那个数
Math.min() 选取数字序列中最小的那个数