ihtml2document能不能根据id获取dom_Vue入门指南08Vue中的标签/如何获取DOM元素

vue.js

Vue中提供了一些固定的标签来方便我们在开发过程中使用&＃xff0c;并且在开发过程中&＃xff0c;我们很有可能因为要使用某些第三方库而不得已要操作DOM元素&＃xff0c;因此如何获取并操作DOM元素的使用呢。

Vue中提供的标签

• component

这个标签是用来展示组件的

• template

这个标签用来定义组件的HTML结构

• transition

这个标签是用来把需要被动画控制的元素包裹起来&＃xff0c;展示自定义的动画效果

• transition-group

通过v-for渲染出来的标签不能使用transition包裹&＃xff0c; 需要使用transition-group包裹添加动画。

• keep-alive

当前标签包裹组件时&＃xff0c;会缓存不活动的组件实例&＃xff0c;而不是销毁它们&＃xff0c;keep-alive是一个抽象组件&＃xff1a;它自身不会渲染一个DOM元素&＃xff0c;也不会出现在父组件中。

当组件在内被切换&＃xff0c;它的 activated 和 deactivated 这个两个生命周期钩子函数将会被对应执行。

// 主要用于保留组件状态或避免重新渲染。

注意&＃xff0c;keep-alive 是用在其一个直属的子组件被开关的情形。如果你在其中有 v-for 则不会工作。如果有上述的多个条件性的子元素&＃xff0c;keep-alive 要求同时只有一个子元素被渲染。

• solt

slot 元素作为组件模板之中的内容分发插槽。slot 元素自身将被替换。

// 和HTML元素一样&＃xff0c;我们经常需要向组件传递内容&＃xff0c;例如&＃xff1a;// custom 是自定义的组件

但是我们渲染出来的却是这样&＃xff1a;

幸好&＃xff0c;Vue 自定义的 元素让这变得非常简单&＃xff1a;

Vue.component(&＃39;custom&＃39;, { template: &＃96;

Vue中获取DOM元素

在我们的vue项目中&＃xff0c;难免会因为引用第三方库而需要操作DOM标签&＃xff0c;vue为我们提供了ref属性。 ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用&＃xff0c;引用指向的就是 DOM 元素&＃xff1b;如果用在子组件上&＃xff0c;引用就指向组件实例&＃xff1a;

vue不提倡我们操作DOM元素&＃xff0c;因此在引用第三方插件或者项目中&＃xff0c;尽量少的不要出现操作DOM元素。

请关注我&＃xff0c;定时更新前端相关知识及项目案例