Vue 前端问题 - 学习记录

ゞ浴缸里的玫瑰 2024-03-22 19:41 50阅读 0赞

#### 目录 ####

*  问题1 Vue 关于如何使用 background-image 属性
 *   *  参考链接
 *  问题 2 文字内容溢出自动换行或不换行方法
 *   *  参考链接
 *  问题 3 动态修改 dom 元素的方法
 *   *  参考链接
 *  问题 4 前端样式 \`::\` 和 \`:\` 伪元素的理解
 *   *  参考链接
 *  问题5 理解 :before 和 :after 伪元素
 *   *  参考链接
 *  问题6 Vue 如何实现获取 dom 元素（父组件获取子组件的dom / ref）
 *   *  参考链接

## 问题1 Vue 关于如何使用 background-image 属性 ##

### 参考链接 ###

[1. Vue使用:内联style动态绑定backgroundImage/background][1. Vue_style_backgroundImage_background]

--------------------

## 问题 2 文字内容溢出自动换行或不换行方法 ##

### 参考链接 ###

[1. white-space 参数的使用方法][1. white-space]

--------------------

## 问题 3 动态修改 dom 元素的方法 ##

### 参考链接 ###

[1. Vue 动态修改dom样式][1. Vue _dom]

[2. vue使用v-for渲染dom结构后获取单个dom元素改变其样式][2. vue_v-for_dom_dom]

[3. vue如何动态改变样式(vue动态修改css)][3. vue_vue_css]

--------------------

## 问题 4 前端样式 `::` 和 `:` 伪元素的理解 ##

### 参考链接 ###

[1. CSS问题 ：before和：：before的区别][1. CSS_ _before_before]

[2. ：before和：：before的区别][2. _before_before]

--------------------

## 问题5 理解 :before 和 :after 伪元素 ##

一个元素会有一个在它内容前面的元素（`:befor`e）或在它内容后面的一个元素（`:after`）

### 参考链接 ###

[1. ::before和::after是什么?][1. _before_after]

## 问题6 Vue 如何实现获取 dom 元素（父组件获取子组件的dom / ref） ##

下面需要对 Vue 有一个大致的使用经验：（比如在父组件内怎么引用子组件的方法，和在父组件的 `<template></template>` 标签内内怎么使用子组件的方法）

有时候，我们是使用单文件模式来开发 Vue 项目，那么如果此时的项目的 头部导航组件和主要内容组件是分开的，那么父组件又该如何获取 子组件的 ref 属性，这里的关键在于 父组件必须配置一个 ref ，而且必须是要包括了 子组件的标签内，否则无法获取子组件的 ref 属性，也就无法获取子组件的 dom 元素，当然如果是在父组件使用子组件时，配置 ref 属性，那就最好了。

具体方法：

this.$ref.父组件ref属性名.$ref.子组件ref属性名

### 参考链接 ###

[1. Vue父组件如何获取子组件的ref][1. Vue_ref]

[2. javaScript与vue获取元素的方法][2. javaScript_vue]

[1. Vue_style_backgroundImage_background]: https://blog.csdn.net/weixin_51747462/article/details/129045533
[1. white-space]: https://baike.baidu.com/item/white-space/8529710
[1. Vue _dom]: https://blog.csdn.net/u013243347/article/details/81169515
[2. vue_v-for_dom_dom]: https://blog.csdn.net/w3097196171/article/details/105709932
[3. vue_vue_css]: https://www.shouxicto.com/article/132258.html
[1. CSS_ _before_before]: https://blog.csdn.net/qq_39400014/article/details/106048385?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-1-106048385-blog-122348427.235%5Ev36%5Epc_relevant_default_base3&spm=1001.2101.3001.4242.2&utm_relevant_index=4
[2. _before_before]: https://blog.csdn.net/m0_60823684/article/details/122348427
[1. _before_after]: https://blog.csdn.net/lb6514052/article/details/123171332
[1. Vue_ref]: https://blog.csdn.net/Yokeiz/article/details/125730701
[2. javaScript_vue]: https://blog.csdn.net/wanjun_007/article/details/129103715