前端-Vue基礎2

阿新 • • 發佈：2020-07-19

1.過濾器

前臺通過後臺傳值，要對後臺傳過來的變數進行特殊處理，比如根據id轉成中文等；

1.1 區域性過濾器

區域性過濾器只針對一個Vue例項

預設將|左側count傳遞給右側方法

可以傳多個引數
{{count|filterFunc("test")}}

func:function(value,test){

}

<body>
<div id="app">
    {{count|change('百分比')}}
    {{status|changeStatus}}
</div>

<script src="js/vue.js" 
></script>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:'test',
            count:19,
            status:1
        },
        filters:{
            change:function (value,flag) {
                console.log('value:',value)
                console.log('flag:' 
,flag)
                return value+'%'
            },
            changeStatus:function (status) {
                if(status==1){
                    return '成功'
                }else if(status==2){
                    return '失敗'
                }
            }
        }
    })
</script>
</ 
body>

顯示結果如圖所示：

19% 成功

1.2 全域性過濾器

全域性過濾器可以針對所有的vue，只要引用都可以使用

Vue.filter('allNumber',function (value) {
        return value + '&'
    })
    
new Vue({
        el:'#app',
        data:{
            msg:'test',
            count:19,
            status:1
        }
    })

<div id="app">
    <div>{{count|allNumber}}</div>
</div>

2.vue的生命週期

vue的生命週期：是指vue例項化到頁面經歷了哪些步驟

鉤子函式：預留了幾個特殊的方法

<body>
<!--vue的生命週期：是指vue例項化到頁面經歷了哪些步驟-->
<!--鉤子函式：預留了幾個特殊的方法-->
 <div id="app">
        {{msg}}
 </div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:''
        },
        beforeCreate:function () {
            //例項化後，資料還沒有初始化
            console.log('beforeCreate')
        },
        created:function () {
            //資料初始化後
            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')
        }
    })
</script>
</body>

3.$refs

this.$refs.test // 獲取到標籤可以理解為 document.getElementbyID 獲取的是標籤物件

<body>
<div id="app">
<!--    需求：點選子元件的數字，自增1,點選test按鈕，父元件的值等於子元件的值相加-->
    <test ref="a"></test>
    <test ref="b"></test>
    <div>父元件--<span>{{count}}</span></div>
    <input type="button" value="test" @click="change">
</div>
<script src="js/vue.js"></script>
<script>
    Vue.component('test',{
        template:'<div>子元件--<span @click="add">{{number}}</span></div>',
        data:function () {
            return{
                number:0
            }
        },
        methods:{
            add:function () {
                this.number++
            }
        }
    })

    new Vue({
        el:'#app',
        data:{
            count:0
        },
        methods:{
            change:function () {
                //this.$refs.a = document.getElementById('a')
                this.count = this.$refs.a.number+this.$refs.b.number
            }
        }
    })
</script>
</body>

4.元件（複用程式碼，抽象公用程式碼）

元件：將公用的功能抽離出來，形成元件

目的：複用程式碼

4.1 全域性元件

<body>
<div id="app">
<!--    引用元件-->
    <demo></demo>
    <demo></demo>
    <demo></demo>
</div>
<script src="js/vue.js"></script>
<script>
    Vue.component('demo',{
        template:'<h1 @click="change">{{msg}}</h1>',
        data:function () {
            //元件中的data，必須是個方法
            //如果引用了demo這個元件，就可以使用它的變數，如果是map形式的，改變了變數msg的值，其他元件的msg的值也會跟著該筆愛
            //如果是data是一個方法，msg只作用域data這個方法，如果改變msg的值，其他元件的msg變數不會跟著改變
            return {
                msg:'msg'
            }
        },
        methods:{
            change:function () {
                this.msg = 'test'
            }
        }
    })

    new Vue({
        el:'#app'
    })
</script>
</body>

4.2 區域性元件

<body>
<div id="app">
<!--    引用元件-->
    <demo></demo>
    <demo-key></demo-key>
</div>
<script src="js/vue.js"></script>
<script>
    Vue.component('demo',{
        template:'<h1 @click="change">{{msg}}</h1>',
        data:function () {
            //元件中的data，必須是個方法
            //如果引用了demo這個元件，就可以使用它的變數，如果是map形式的，改變了變數msg的值，其他元件的msg的值也會跟著該筆愛
            //如果是data是一個方法，msg只作用域data這個方法，如果改變msg的值，其他元件的msg變數不會跟著改變
            return {
                msg:'msg'
            }
        },
        methods:{
            change:function () {
                this.msg = 'test'
            }
        }
    })

    new Vue({
        el:'#app',
        components:{
            "demo-key":{
                template:'<h1 @click="change">{{count}}</h1>',
                    data:function () {
                        return{
                            count:0
                        }
                    },
                methods:{
                    change:function () {
                        this.count++
                    }
                }
            }
    }
    })
</script>
</body>

4.3 is規避錯誤

多層標籤封裝為元件時，不能直接使用，要用is來規避元件渲染的錯誤

<body>
<div id="app">
    <table border="1px">
        <thead>
            <th>id</th>
        </thead>
        <tbody>
        <!--    多層標籤封裝為元件時，不能直接使用，要用is來規避元件渲染的錯誤-->
            <tr is="tr-demo"></tr>
<!--            <tr-demo></tr-demo>-->
        </tbody>
    </table>
</div>
<script src="js/vue.js"></script>
<script>
    Vue.component('tr-demo',{
        template:'<tr><td>1111</td></tr>'
    })

    new Vue({
        el:'#app'
    })
</script>
</body>