监听--过滤--计算属性

一、watch监听器

1. 浅监听：只监听基本数据类型。

2. 深监听：监听对象类型，设置deep: true; handler: function() { }。

// 浅监听

                msg(newVal,oldVal) {

                    console.log(newVal, oldVal);

                },

// 深监听

                obj:{

                    handler(a){

                        console.log(a);

                    },

                    deep: true

                }

3. jsonp原理：

　　由于浏览器对于同源策略的限制，不同域名，不同协议，不同端口之间不能相互访问，即跨域问题。

　　在页面上直接发起一个跨域的AJAX请求是不可以的，但是，在页面上引入不同域上的js脚本是可以的。

　　因此jsonp解决跨域问题的原理即：动态创建script标签。

　　步骤： 1. 动态创建script标签；

　　　　　 2. 通过src赋值；

　　　　　 3. 得到数据渲染页面；

　　　　　 4. 回调函数（请求回来的数据）。

 

二、过滤器

1. 全局过滤：在全局中调用 Vue.filter( '过滤器名称', 回调函数）；页面中任何位置都可以使用。

2. 局部过滤：在Vue实例中配置属性 filters；只能在当前实例中使用。

filters:{
　　filterTel(tel){
　　　　return tel.slice(0,3)+'****'+tel.slice(7)
　　}
}

3. 管道符：第一个参数为实参，第二个参数为过滤器名。

        {{tel | filterTel}}

4. 字符串的补齐方法： str.padStart( 位数，'字符')； 可用于补零操作。

5. 小数点后面保留几位小数的方法： number.toFixed(位数);

 

三、computed计算属性

计算属性和watch类似，也能监听数据的变化，但watch只能监听变量且必须定义在data中，computed不需要在data中定义即没有初始值，通过return返回值。

例：

<tr v-if='list.length!=0'>
　　<td>平均分</td>
　　<td colspan="3">{{ave}}</td>
</tr>

let vm = new Vue({

el: '#app',

computed: {
　　ave(){
　　　　var sum = 0;
　　　　this.list.forEach(item=>{
　　　　　　sum+=item.score
　　　　})
　　　　return sum/this.list.length
　　}
}

})