vue的一些特殊特性

時間  2019-11-16
標籤 vue 一些 特殊 特性 简体版
原文   原文鏈接

1、使用$ref特性獲取DOM元素

　　代碼示例以下所示：javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" src="./vue.js"></script>
    <script type="text/javascript">
        // 全域組件
        Vue.component('subComp',{
            template:`<div></div>`
        });

        var App={  // 局部組件建立
            template:`<div>
                    <subComp ref="subc"></subComp>
                    <button ref="btn">我是按鈕</button>
                    <p ref="sb">alex</p>
                </div>`,
            beforeCreate(){   // 在當前組件建立以前調用
                console.log(this.$refs.btn);   // 輸出:undefined
            },
            created(){        // 在當前組件建立以後調用
                console.log(this.$refs.btn);   // 輸出:undefined,此時this對象已經有refs屬性，可是DOM尚未渲染進App組件中
            },
            beforeMount(){   // 裝載數據到DOM以前會調用
                console.log(this.$refs.btn);   // 輸出:undefined
            },
            mounted(){   // 裝載數據到DOM以後會調用
                console.log(this);   // this是一個對象，包含refs屬性$refs: {btn: button, sb: p}
                console.log(this.$refs.btn);  // <button>我是按鈕</button>
                // 若是是給組件綁定的ref=""屬性那麼this.$refs.subc取到的是組件對象
                console.log(this.$refs.subc);

                var op = this.$refs.sb;
                this.$refs.btn.onclick = function () {
                    console.log(op.innerHTML);   // 點擊按鈕控制檯輸出：alex
                }
            },
        };

        new Vue({
            el:'#app',
            data(){
                return{

                }
            },
            template:`<App/>`,
            components:{
                App
            }
        })

    </script>
</body>
</html>

一、ref特性爲子組件賦予ID引用

　　儘管存在 prop 和事件，有的時候你仍可能須要在 JavaScript 裏直接訪問一個子組件。html

　　爲了達到這個目的，你能夠經過 ref 特性爲這個子組件賦予一個 ID 引用，以下所示：vue

<button ref="btn">我是按鈕</button>
<p ref="sb">alex</p>

二、經過this.$refs.btn訪問 <button> 實例

　　ref 被用來給元素或子組件註冊引用信息。引用信息將會註冊在父組件的 $refs 對象上。若是在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；若是用在子組件上，引用就指向組件實例。java

　　beforeCreate在當前組件建立以前調用，此時輸出確定爲undefined。可是後面created方法是在組件建立以後調用，此時打印this能夠發現裏面也已經有了refss屬性，可是這個時候DOM尚未渲染進App組件中，這裏涉及到了一個虛擬DOM的概念。直到mounted方法，裝載數據到DOM以後纔會正常顯示出this.$refs.btn內容。app

mounted(){   // 裝載數據到DOM以後會調用
    console.log(this);   // this是一個對象，包含refs屬性$refs: {btn: button, sb: p}
    console.log(this.$refs.btn);  // <button>我是按鈕</button>

三、給組件綁定的ref屬性

// 全域組件
Vue.component('subComp',{
    template:`<div></div>`
});

var App={  // 局部組件建立
    template:`<div>
            <subComp ref="subc"></subComp>
            <button ref="btn">我是按鈕</button>
            <p ref="sb">alex</p>
        </div>`,
    // 省略代碼
    mounted(){   // 裝載數據到DOM以後會調用
        console.log(this);   // this是一個對象，包含refs屬性$refs: {btn: button, sb: p}
        console.log(this.$refs.btn);  // <button>我是按鈕</button>

        // 若是是給組件綁定的ref屬性那麼this.$refs.subc取到的是組件對象
        console.log(this.$refs.subc);

        var op = this.$refs.sb;
        this.$refs.btn.onclick = function () {
            console.log(op.innerHTML);   // 點擊按鈕控制檯輸出：alex
        }
    },
};

　　若是是給組件綁定的ref屬性，那麼this.$refs.subc取到的是組件對象。函數

四、輸出效果　　

　　

2、經常使用$屬性

$refs：獲取組件內的元素this

$parent：獲取當前組件的父組件spa

$children：獲取當前組件的子組件code

$root：獲取New Vue的實例化對象component

$el：獲取組件對象的DOM元素

3、獲取更新以後的DOM添加事件的特殊狀況

一、DOM更新策略

　　vue實現響應式並非數據發生變化後DOM馬上發生變化，而是按照必定的策略進行DOM的更新。

（1）配置v-if數據屬性顯示focus（焦點）

　　在頁面上製做一個input輸入框，在頁面加載時就讓該輸入框獲取焦點。

<body>
    <div id="app"></div>
    <script type="text/javascript" src="./vue.js"></script>
    <script type="text/javascript">

        var App={  // 局部組件建立
            data(){
                return{
                    isShow:true
                }
            },
            template:`<div>
                        <input type="text" v-if="isShow" ref="fos"/>
                    </div>`,
            mounted(){   // 裝載數據到DOM以後會調用
                // focus()方法用於給予該元素焦點
                this.$refs.fos.focus();
            }
        };

        new Vue({
            el:'#app',
            data(){
                return{

                }
            },
            template:`<App/>`,
            components:{
                App
            }
        })
    </script>
</body>

　　頁面加載時就讓該輸入框獲取焦點，顯示效果以下：

　　

（2）修改v-if數據屬性看DOM是否發生變化

<body>
    <div id="app"></div>
    <script type="text/javascript" src="./vue.js"></script>
    <script type="text/javascript">

        var App={  // 局部組件建立
            data(){
                return{
                    isShow:false
                }
            },
            template:`<div>
                        <input type="text" v-if="isShow" ref="fos"/>
                    </div>`,
            mounted(){   // 裝載數據到DOM以後會調用
                // vue實現響應式並非數據發生變化後DOM馬上發生變化，而是按照必定的策略進行DOM的更新。

                // $nextTick是在下次DOM更新循環結束以後執行的延遲迴調，在修改數據以後使用這個方法則能夠在回調中獲取更新以後的DOM

                this.isShow = true;
                console.log(this.$refs.fos);   // 輸出undefined
                // focus()
                this.$refs.fos.focus();  // focus() 方法用於給予該元素焦點。

            }
        };

        new Vue({
            el:'#app',
            data(){
                return{

                }
            },
            template:`<App/>`,
            components:{
                App
            }
        })

    </script>
</body>

　　顯示效果以下：

　　

二、$nextTick方法

　　$nextTick是在下次DOM更新循環結束以後執行的延遲迴調，在修改數據以後使用這個方法則能夠在回調中獲取更新以後的DOM。

<body>
    <div id="app"></div>
    <script type="text/javascript" src="./vue.js"></script>
    <script type="text/javascript">

        var App={  // 局部組件建立
            data(){
                return{
                    isShow:false
                }
            },
            template:`<div>
                        <input type="text" v-if="isShow" ref="fos"/>
                    </div>`,
            mounted(){   // 裝載數據到DOM以後會調用
                // vue實現響應式並非數據發生變化後DOM馬上發生變化，而是按照必定的策略進行DOM的更新。

                // $nextTick：
                // 是在下次DOM更新循環結束以後執行的延遲迴調，在修改數據以後使用這個方法則能夠在回調中獲取更新以後的DOM

                this.isShow = true;
                console.log(this.$refs.fos);   // 輸出undefined
                // focus()
                // this.$refs.fos.focus();  // focus() 方法用於給予該元素焦點。
                this.$nextTick(function () {
                    // 回調函數中獲取更新以後真實的DOM
                    this.$refs.fos.focus();
                })
            }
        };

        new Vue({
            el:'#app',
            data(){
                return{

                }
            },
            template:`<App/>`,
            components:{
                App
            }
        })

    </script>
</body>

　　顯示效果以下所示：

　　

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程