vue操作dom元素的三種方法

1.原生js操作dom

const dom = getElementById(‘box’)

2.vue官方方法：ref

vue中的ref是把當前dom元素 “ 抽離出來 ” ，只要通過 this.$refs就可以獲取到

< div class=“set” ref=“up”>
.set是我們要操作的dom物件，它的ref是 up

@click=“Alert”
給父元素一個點擊事件，

接下來我們來撰寫這個方法
methods:{
? this.$refs.addAlert.style.display = “block”;
}

CSS還要嗎？
那我把代碼全粘過來你們自己看吧

<template>
	<div id="app">
		<div  class="index-box">
			<!--新增按鈕-->
			<input type="button" id="DbManagement-addBtn" @click="showAddAlert" value="新增">
			<!--新增資料源彈框-->
			<div class="addDbSource-alert" ref="addAlert">
				<div class="addAlert-top">
					<!--添加資料源-->
					<input type="button" value="×" class="addAlert-close" @click="closeAddAlert">
				</div>
				<div class="addAlert-content">
					<div style="height: 1000px;"></div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: "Index",
		data(){
			return {
			}
		},
		methods:{
			// 點擊新增按鈕，彈出新增資料源的彈框
			showAddAlert(){
				this.$refs.addAlert.style.display = "block";
			},
			// 點擊 × 關閉新增資料源的彈框
			closeAddAlert(){
				this.$refs.addAlert.style.display = "none";
			},
		},
		created(){
		}
	}
</script>
<style scoped>
	#app{
		width:100%;
		height:100%;
		overflow-y:auto;
	}
 	/* 容器 */
    .index-box{
        width: 100%;
        height: 100%;
        background: #212224;
        display: flex;
    }
    /* 添加資料源按鈕 */
    #DbManagement-addBtn {
        width: 100px;
        height: 45px;
        border: none;
        border-radius: 10px;
        background: rgba(29, 211, 211, 1);
        box-shadow: 2px 2px 1px #014378;
        margin-left: 20px;
        margin-top: 17px;
        cursor: pointer;
        font-size: 20px;
    }
    /*新增資料源彈框*/
    .addDbSource-alert{
        position: fixed;
		top:0;left:0;right:0;bottom:0;
		margin:auto;
        width: 4rem;height: 4rem;
        background: #2b2c2f;
        display: none;
    }
    /*新增彈框頭部*/
    .addAlert-top{
        width: 100%;
        height: 50px;
        background: #1dd3d3;
        line-height: 50px;
        font-size: 20px;
        box-sizing: border-box;
        padding-left: 20px;
    }
    /*新增彈框關閉*/
    .addAlert-close{
        background: #1dd3d3;
        border: none;
        font-size: 30px;
        cursor: pointer;
        float: right;
        margin-right: 20px;
        margin-top: 5px;
    }
    /*新增彈框內容部分*/
    .addAlert-content{
        width: 100%;
        box-sizing: border-box;
        padding: 0px 30px 20px;
    }
    /* 滾動條效果 */
    /* 設定滾動條的樣式 */
    .addAlert-content::-webkit-scrollbar {
        width: 5px;
    }
    /* 滾動槽 */
    .addAlert-content::-webkit-scrollbar-track {
        /* -webkit-box-shadow: inset 0 0 6px  rgba(40, 42, 44, 1);
        border-radius: 10px; */
    }
    /* 滾動潭訓塊 */
    .addAlert-content::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgba(29, 211, 211, 1);
        /* -webkit-box-shadow: inset 0 0 6px rgba(29, 211, 211, 1); */
    }
    .addAlert-content::-webkit-scrollbar-thumb:window-inactive {
        background: rgba(29, 211, 211, 1);
    }
</style>

CSS比正文和腳本加起來都多，如果你能看懂CSS，沒理由學不會 ref

還有第三種方法，jQuery 操作dom，看完以后直呼不敢用

3.jQuery操作dom

? 只要拿jQuery的選擇器，選中相應的dom進行操作就可以了，但是大家都知道jQuery獲取元素是查找頁面所有，相當于“回圈”所有元素直至找到需要的dom，但是vue是單頁面的，jQuery獲取dom并不只是獲取vue當前頁面，而是從根路由開始查找所有，當其他頁面出現相同的元素，也會被獲取到，而且jQuery操作的dom，如果是根據動態獲取資料渲染的，那么寫在mounted里的操作方法將會失效，必須放到updated里，這樣會導致有些操作被執行多遍，所以還是不建議在vue中使用jQuery，

文中部分代碼摘錄自微信公眾平臺作者 “ 一只前端小菜鳥 ”，喜歡請支持原作者，感謝！