wordpress首页添加站点统计显示,临沂的各类网站建设,网站建设和维护试卷,唐山做企业网站Vue 组件系列文章#xff1a; 《Vue组件#xff1a;创建组件、注册组件、使用组件》 《Vue组件#xff1a;使用Prop实现父组件向子组件传递数据》 《Vue组件#xff1a;使用$emit()方法监听子组件事件》 《Vue组件#xff1a;插槽》 《Vue组件#xff1a;混入》 《Vue组件… Vue 组件系列文章 《Vue组件创建组件、注册组件、使用组件》 《Vue组件使用Prop实现父组件向子组件传递数据》 《Vue组件使用$emit()方法监听子组件事件》 《Vue组件插槽》 《Vue组件混入》 《Vue组件动态组件、缓存组件、异步组件》 《Vue组件依赖注入provide和inject的使用》 《Vue组件模板引用ref属性的使用》 虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作但在某些情况下我们仍然需要直接访问底层 DOM 元素。要实现这一点我们可以使用特殊的 ref 属性。
template!-- 第一步给 DOM 元素添加 ref 属性 --搜索input refsearch typetext /
/template
挂载结束后引用都会被加载在 this.$refs 之上。
template!-- 第一步给 DOM 元素添加 ref 属性 --搜索input refsearch typetext /
/templatescript
export default {mounted() {//第二步使用 this.$refs 获取 DOM 元素输入框并让输入框自动获取焦点this.$refs.search.focus();}
}
/script
【实例】使用 ref 获取 DOM 元素并赋值。
templatefieldsetlegend组件/legend!-- 第一步给 DOM 元素添加 ref 属性 --h3 reftitle标题名称/h3p博客信息input refblogName typetext //pp博客地址input refblogUrl typetext //p/fieldset
/templatescript
export default {//说明mounted()生命周期钩子在 DOM 文档渲染完毕之后进行调用。mounted() {//第二步使用 this.$refs 获取 DOM 元素并赋值内容this.$refs.title.innerHTML 使用 ref 获取 DOM 元素;this.$refs.blogName.value 您好欢迎访问 pan_junbiao的博客;this.$refs.blogUrl.value https://blog.csdn.net/pan_junbiao;}
}
/scriptstyle scoped
input {width: 300px;padding: 3px;font-size: 16px;
}
/style
执行结果
