Vue修改Dom不生效的解決

更新時間：2023年06月02日 14:35:41 作者：messi0913

這篇文章主要介紹了Vue修改Dom不生效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue修改Dom不生效

場景

data中定義一個空數(shù)組，在mouted中用請求到大數(shù)據(jù)對其進(jìn)行賦值，進(jìn)入主頁面不生效

注釋掉的內(nèi)容沒有效果是因?yàn)閷τ谝呀?jīng)創(chuàng)建的實(shí)例，Vue 不允許動態(tài)添加根級別的響應(yīng)式屬性。

vue的基本原理是通過Object.defineProperty重寫變量的get和set方法來實(shí)現(xiàn)監(jiān)聽變量的改變和通知頁面重新渲染的。

解決數(shù)據(jù)沒有被雙向綁定我們可以使用 vm.$set 實(shí)例方法，該方法是全局方法 Vue.set 的一個別名。

vue如何操作Dom

最近有些自閉，life is a shit，但是學(xué)習(xí)不能停，也開始繼續(xù)健身了，試圖讓自己好一點(diǎn).

我們需要在谷歌商店安裝vue-devtools插件，打不開的話，點(diǎn)擊這里，按照步驟操作后，就可以在谷歌商店下載插件了，下載插件的步驟：點(diǎn)擊谷歌瀏覽器的更多工具 -> 擴(kuò)展程序 -> 打開chrome網(wǎng)上應(yīng)用商店 -> 搜索vue devtools -> 添加至chrome，之后打開嗶哩嗶哩的官網(wǎng)，右上角出現(xiàn)這個圖標(biāo)，則表示已經(jīng)生效了

VUE是通過傳遞一些配置給Vue對象和頁面中引用插值表達(dá)式來操作DOM的，我們就從其安裝開始說明

1.VUE的使用

點(diǎn)擊這里進(jìn)入VUE中文官網(wǎng)，點(diǎn)擊起步-->點(diǎn)擊安裝-->下載開發(fā)版本，然后在頁面中直接引入就好了。

引入vue.js文件后，給我們提供了一個構(gòu)造函數(shù)Vue，在js中，new Vue()會返回一個vue實(shí)例對象，我們用變量接收它，傳遞一個配置對象，代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue文件 -->
    <script src="./vue.js"></script>    
</head>
<body>
    <script>
        const vm = new Vue({
            //配置對象config
        });
    </script>
</body>
</html>

2.配置對象

上面說到new Vue()中可以傳遞一個配置對象，下面就來康康配置中有些什么屬性吧

1.el

屬性el的數(shù)據(jù)類型是字符串，表示element(元素)，其作用是：配置控制的元素，表示Vue要控制的區(qū)域，其值支持css選擇器的篩選方式，舉個栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue文件 -->
    <script src="./vue.js"></script>    
</head>
<body>
    <div id="app"></div>
    <script>
        const vm = new Vue({
            //配置對象config
            el: "#app"      //找到dom中id為app的元素
        });
        console.log("el:",vm.$el);    //$el是vm內(nèi)置的對象
        console.log("vm:",vm);
    </script>
</body>
</html>

【結(jié)果】可以看到，能夠選取到id為app的div元素

圖1

2.$mount

這里要首先說明的是，$mount是vue的一個方法，并不是需要配置的對象，它的作用和el相同，例

const vm = new Vue({});
console.log("el",vm.$mount("#app").$el);    //$el是vm內(nèi)置的對象
console.log("vm:",vm);

【結(jié)果】同圖1相同

3.data

屬性data的數(shù)據(jù)類型是對象，其作用是存放要用到的數(shù)據(jù)，且數(shù)據(jù)是響應(yīng)式的，例子如下

【例2】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue文件 -->
    <script src="./vue.js"></script>    
</head>
<body>
    <div id="app">
        <!-- 將data中msg對應(yīng)的數(shù)據(jù)渲染到頁面 -->
        {{ msg }}
    </div>
    <script>
        const vm = new Vue({
            //配置對象config
            el: "#app" ,     //找到dom中id為app的元素
            data: {
                msg: "你不用裝冷淡，我沒想糾纏"
            }
        });
    </script>
</body>
</html>

【結(jié)果】頁面中出現(xiàn)msg中的字符串

3.插值表達(dá)式

插值表達(dá)式的使用方法是用兩個花括號將需要渲染到頁面的數(shù)據(jù)括起來，如 {{ msg }}（例2所示），插值表達(dá)式中可以填寫Vue中的data，數(shù)據(jù)值，表達(dá)式

1）填寫data

<body>
    <div id="app">
        <!-- 將data中msg對應(yīng)的數(shù)據(jù)渲染到頁面 -->
        {{ name }}
        {{ msg }}
    </div>
    <script>
        const vm = new Vue({
            //配置對象config
            el: "#app",     //找到dom中id為app的元素
            data: {
                msg: "你不用裝冷淡，我沒想糾纏",
                name: '離岸'
            }
        });
    </script>
</body>

2）填寫數(shù)據(jù)值

包括數(shù)字、字符串、布爾值、undefined、null、數(shù)組、對象等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <p>Number:{{ 123 }}</p>
        <p>String：{{ '寄給你全宇宙的愛和自太古至永劫的思念'}}</p>
        <p>Boolean：{{ true }}</p>
        <p>Array：{{ [1,2,3] }}</p>
        <p>Object:{{ {name:'離岸', word:'你不用裝冷淡，我沒想糾纏'} }}</p>
    </div>
    <script>
        const vm = new Vue({
            //配置對象config
            el: "#app"     //找到dom中id為app的元素
        });
    </script>
</body>
</html>

【結(jié)果】

3）表達(dá)式

A.運(yùn)算表達(dá)式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <p>加法：{{ 'you' + 'me' }}</p>
        <p>減法：{{ 10 - 5 }}</p>
        <p>乘法：{{ 100 * 7 }}</p>
        <p>除法：{{ 1000 / 12 }}</p>
    </div>
    <script>
        const vm = new Vue({
            //配置對象config
            el: "#app"     //找到dom中id為app的元素
        });
    </script>
</body>
</html>

【結(jié)果】

B.邏輯表達(dá)式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 邏輯表達(dá)式 -->
        <p>或:{{ 0 || 1 }}</p>
        <p>與:{{ 1 && 0 }}</p>
        <p>非:{{ !0 }}</p>
    </div>
    <script>
        const vm = new Vue({
            //配置對象config
            el: "#app"     //找到dom中id為app的元素
        });
    </script>
</body>
</html>

【結(jié)果】

C.三元表達(dá)式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 三元表達(dá)式 -->
        {{ 1 + 1 === 2 ? '小明勝利' : '小紅勝利' }}
    </div>
    <script>
        const vm = new Vue({
            //配置對象config
            el: "#app"     //找到dom中id為app的元素
        });
    </script>
</body>
</html>

【結(jié)果】

D.函數(shù)表達(dá)式

【注意】

1）插值表達(dá)式不能填的內(nèi)容：語句、流程控制
2）若在插值表達(dá)式中填入未在data中聲明的數(shù)據(jù)，則會報(bào)錯
3）若填入的數(shù)據(jù)在原型鏈上找不到，則值為undefined，例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        {{ edu.highSchool }}
    </div>
    <script>
        const vm = new Vue({
            //配置對象config
            el: "#app" ,    //找到dom中id為app的元素
            data: {
                name: 'jwh',
                edu: {
                    college: 'Xupt',
                    undergraduate: 'Xupt'
                }
            }
        });
    </script>
</body>
</html>

【結(jié)果】