.vue组件中获取DOM元素问题

一、问题引入

原项目把一块内容直接写在了模块中（浏览器显示的一整个页面），现在想把它提成一个单独组件，而且把其中使用 documentgetElementById('id') 改为 ref 获取元素的形式。

单独创建一个 vue 组件，通过绑定传值，触发页面变化从而触发 beforeUpdate 。

然后发现 beforeUpdate() 中根本获取不到此元素，用原生js获取也不行。

三、解决

1、 beforeUpdate() 生命周期函数中，在获取元素语句外套用 this$nextTick(function(){}) 。（ mounted 无效，原因待查明）

官方解释：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。即DOM真正加载完成。

诉求：在做后台系统用户组权限这块，后台要求点击多选框时把当前ID传过去

但ivew Checkbox组件文档写的不全，于是研究了一番

CheckboxGroup v-model绑定所有勾选项，格式为数组、on-change事件可以获取当前所有勾选项，格式为数组

Checkbox用@clicknative绑定点击事件(直接用@click无反应)，然后在事件里进行相应的 *** 作，把id传给后台

但是写的过程中发现了iview的bug,就是CheckboxGroup v-model绑定的数组渲染时后出现错误，会勾选错误，于是只能放弃iview用原始的checkbox

用原生checkbox就灵活多了，加@click,@change都可以，而且可以把数组直接传入方法里，也不需要$event获取

然后渲染勾选项直接v-model绑定就好，不用再处理为数组

写到这里请让我说一声iview垃圾！！！

对了说一句项目里用的iview2x by the way

网络的问题。vue其他页面登录后当前页获取不到store中用户信息多数是网络连接异常导致。

1、首先打开电脑检查网络。

2、其次打开网络检测进行测试网络连接是否异常。

3、最后点击vue重新获取store中用户信息即可。

1css只在当前组件起作用

答：在style标签中写入 scoped 即可 例如：

2v-if 和 v-show 区别

答：v-if按照条件是否渲染，v-show是display的block或none；

3$route和$router的区别

答：$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

4vuejs的两个核心是什么？

答：数据驱动、组件系统

5vue几种常用的指令

答：v-for 、 v-if 、v-bind、v-on、v-show、v-else

6vue常用的修饰符？

答：prevent: 提交事件不再重载页面；stop: 阻止单击事件冒泡；self: 当事件发生在该元素本身而不是子元素的时候会触发；capture: 事件侦听，事件发生的时候会调用

7v-on 可以绑定多个方法吗？

答：可以

8vue中 key 值的作用？

答：当 Vuejs 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。

9什么是vue的计算属性？

答：在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式。好处：①使得数据处理结构清晰；②依赖于数据，数据更新，处理结果自动更新；③计算属性内部this指向vm实例；④在template调用时，直接写计算属性名即可；⑤常用的是getter方法，获取数据，也可以使用set方法改变数据；⑥相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computed从缓存中获取，不会重新计算。

10vue等单页面应用及其优缺点

答：优点：Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。

缺点：不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。

11怎么定义 vue-router 的动态路由 怎么获取传过来的值

答：在 router 目录下的 indexjs 文件中，对 path 属性加上 /:id，使用 router 对象的 paramsid 获取。

12vue插槽的理解

答：vue插槽有三种，具名插槽，匿名插槽，作用域插槽

通过插槽可以动态指定某一组件模块部分的渲染，我们在调用组件的时候，在组件的标签中传递了什么样的标签结构，就会在插槽中渲染什么样的标签结构

例子：点击项目列表页，跳转到项目详情

列表页

点击列表页li元素跳转到详情页，并把项目id传给详情页，以便于详情页查询

路由:

项目详情页：

通过路由属性中的name确定匹配的路由，通过params传递参数

路由：

这里的“:/id”可有可无，如果有，添加数据则会在url后显示，不添加则不显示

项目详情页：

通过path匹配路由，通过query传参，这种情况url地址中会有id=

路由配置

详情页获取id

在一些情况下，一个页面的path路径可能是不确定的，比如我们进入到用户界面时，希望是如下的路径：

- /user/aaa 或者 user/bbb 。

3、在 appvue 中的使用

4、 uservue 组件中获取到 userId ，这里的 userId 对应的就是路由映射中的参数

以上就是关于.vue组件中获取DOM元素问题全部的内容，包括:.vue组件中获取DOM元素问题、vue iview checkbox点击事件、vue其他页面登录后当前页获取不到store中用户信息等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！