今天整理之前做vue項目時遇到的一些問題，發現了當時遇到的一個很小但是又會引出很多問題的一個問題（總之就是很有意思，聽我慢慢給你到來），這個問題就是當時處理后端數據時，如何將后端返回來的字符串轉換成html標簽，其實根據vue官網的一個v-html方法是不是覺得很簡單，當時我也是這樣想的，可是我發現了幾個問題(官網給出的動態渲染任意 HTML 容易導致 XSS 攻擊的問題我就不說了，在這里我只是用它來渲染數據)：
第一，當我用v-html將后端字符串轉換成了html標簽后，發現我在那個字符串中解析出來的html里面設置的樣式沒有加上；
第二，當我們使用v-html的時候，是會自動生成一個div標簽的，有時候這個小小的div標簽可能會影響到我們的布局，這個時候你會想到用template來替代div不就完事了，可是很不幸，給出我試驗后的結果讓你看看吧：
<div v-html="'<p>渴望成為大牛的男人</p>'"></div> //頁面上成功渲染出了我們想要的p標簽，但同時它的外圍也被一個div標簽包裹着<template v-html="'<p>渴望成為大牛的男人</p>'"></template> //頁面上並沒有出現我們想要的這個p標簽
有沒有發現一個小小的需求就會帶來很多意想不到的問題，讓我不禁感嘆，代碼的世界真的是神奇啊，廢話不多說，接下來我給出這兩個問題的解法
我們先來解決第一個問題：
解決這個問題的開始，我們要先了解一下scoped，在vue中，當你在一個style標簽上加了scoped屬性時，這個style標簽內的樣式將會被鎖死在當前這個組件內，為的就是避免我們的樣式出現混亂，假如說你的項目中如果每個style標簽上都加了scroped這個屬性，從某種意義上說就相當於實現了樣式的模塊化。
為什么我要說scoped這個屬性，因為在你加了scroped之后，當你引用一些第三方組件，比如swiper，當你想要去覆蓋它的樣式的時候，你會發現覆蓋不了，那么我們后來通過v-html引入的html元素肯定也逃不掉，這個時候我們可以通過一種特殊的方式，穿透scoped，比如這樣：
<style scoped> >>>需要穿透的類名 { 樣式 } </style>嗯對，就是這個姿勢，我們使用>>>就可以實現一個穿透效果，讓我們在使用scoped的情況下，去修改其他組件的樣式，還有另外一種方法就是你可以把需要穿透的樣式寫到另一個style標簽中，不加scoped，這樣也可以，看你個人需求。
接下來我們解決第二個問題，同時我們把這個問題轉化為如何將一個html字符串轉換為html元素：
在這里我們可以想將一個html字符串轉換為html元素的話，我想到的辦法就只能進行DOM操作了，在vue中，要進行DOM操作的話，我們可以使用自定義指令，如果有小伙伴對自定義指令不了解的話，可以去vue的官方文檔先看下自定義指令是什么，官網鏈接：https://cn.vuejs.org/v2/guide/custom-directive.html
解決這個問題的大致思路是這樣的：我們可以在要加入這個html字符串的元素綁定一個自定義指令，我們在data中定義一個htmlStr變量用來存儲字符串，綁定到我們的自定義指令上，然后在我們這個自定義指令中我們可以獲取到這個當前這個元素的dom節點還有我們需要解析的字符串，我們通過原生js的innerHtml方法將字符串渲染到頁面上即可：
data(){ return { htmlStr:'<p>渴望成為大牛的男人</p>' //你可以把后端html字符串數據來賦值給htmlStr } }, <main v-exchangeHtml:foo='htmlStr'> //定義自定義指令 //全局注冊自定義指令 Vue.directive('exchangeHtml',{ bind: function(el,foo){ console.log(el,foo) el.innerHTML += foo.value } })
我把el和foo打印出來，以便大家理解，這是打印出來的結果
自此，我們就完成了直接將html字符串轉換成我們需要的html元素並且添加了進來
最近天氣降溫，大家多穿點衣服多喝點熱水，別感冒了:)