VUE基础3-过滤器与生命周期

filter（过滤器）

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

局部过滤器

　　过滤通过管道符 | 接收变量，将管道符前的参数传递给管道符后的方法，当有多个参数时，在方法名后加括号，填入参数即可

　　用途：一般用来对接口返回字段进行处理，如返回status状态码，需要前端转换为 ‘成功’或者‘失败’等

 1 <div id="app">
 2     {{count |change('———百分比')}}
 3 </div>
 4 
 5 new Vue({
 6         el:'#app',
 7         data:{
 8             count:19
 9         },
10         //局部过滤器
11         filters:{
12             change:function (value,f){
13                 return value +'%' +f
14             }
15         }

全局过滤器

　　全局过滤器是对于所有的vue实例都生效，需要事前引用

 1 <div id="app">
 2     <div>全局过滤器{{count | allNumber}}</div>
 3 </div>
 4 
 5 <script>
 6     //全局过滤器
 7     Vue.filter('allNumber',function (value) {
 8         return value + '%'
 9     });
10 
11     new Vue({
12         el:'#app',
13         data:{
14             count:19,
15         },
16       
17     })
18 </script>

过滤器支持参数传递，第一参数是管道符左侧参数，第二个参数是括号中的参数

1 <span>{{num|percentage('&')}}</span>
2 filters: {
3     percentage: function (num,other) {
4         if (num) {
5             return num + '%' + other
6  
7         }
8     }
9 }

Vue生命周期

　　其中常用的为created和mounted，一般都是将axios接口请求放在mounted中，用于将接口返回数据初始化到data上

new Vue({
        el: '#app',
        data: {
            msg: ''

        },
        //实例化后，数据还没有初始化
        beforeCreate: function () {
            console.log('beforeCreate')
        },
        // 数据初始化之后
        created: function () {
            this.msg = 'aaa';
            console.log(this.msg)
            console.log('created')
        },
        // 未和标签进行关联之前
        beforeMount: function () {
            console.log('beforeMount')
        },
        // 实例和标签进行关联后
        mounted: function () {
            // 获取后台的列表数据
            this.msg = '获取后台的列表数据';
            console.log('mounted')
        },
        // 数据更新前
        beforeUpdate: function () {
            console.log('beforeUpdate')
        },
        // 数据更新后
        updated: function () {
            console.log('updated')
        },}