vue引入外链，vue删除外链样式

Vue引入外链和删除外链样式该怎么操作？

1. 为什么需要引入外链样式？

引入外链是为了实现对网页样式的修改，而不必改动网页HTML代码。外链样式可以快速的应用到相同结构的网页中，提高代码的复用率和可维护性。

2. 如何引入外链样式？

在Vue中，可以通过link标签来引用外链样式。具体步骤如下：

1. 在Vue组件中，找到head标签，并在其中添加link标签；
2. link标签中的href属性指向所要引入的外链文件；
3. type属性用来指定链接的资源的MIME类型；
4. rel属性和hreflang属性可选，用于定义链接的类型和语言；
5. 添加完link标签后，外链样式即可在Vue组件中生效。

3. 是否需要删除外链样式？

有时候，为了越过多余的样式，或者避免外链样式与已经存在的样式产生冲突，需要重新定义样式。这时，可以删除外链样式，或覆盖外链样式。

4. 如何删除外链样式？

通过JavaScript语言实现

1. 找到link标签，并将其存储为变量；
2. 利用DOM操作删除link标签。

具体代码：

  
      var link = document.querySelector('link[href=\"./external.css\"]);}
      link.parentNode.removeChild(link);
  

5. 怎样在Vue组件中删除外链样式？

在Vue组件中清除外链样式和删除网站中的link标签相同，具体步骤如下：

1. 写一个mounted钩子在Vue组件中，选中head标签；
2. 使用querySelectorAll()选中外链文件；
3. 用forEach()遍历所有相关items，删除外链文件的link标签。

代码如下：

  
     mounted() {
        const linkList = document.querySelectorAll('head link[href*=\"外链写法\"]');
        linkList.forEach(link => link.remove());
     }
  

总结

Vue引入外链样式可大大提高代码化的程度和可维护性，而删掉外链样式则有机会重新定义样式。通过方法学习可以在Vue组件中更好地处理这两个问题。