vue基础实践：refs

refs vue框架开发的时候，我们尽可能减少直接操作dom 基于元素给当前元素设置refs，可以把当前元素放到this.$refs对象中，从而实现对DOM的直接操作（只有在mounted及之后才可以获取到这些元素）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><!-- refsvue框架开发的时候，我们尽可能减少直接操作dom基于元素给当前元素设置refs，可以把当前元素放到this.$refs对象中，从而实现对DOM的直接操作（只有在mounted及之后才可以获取到这些元素）--><!-- 渲染模板 --><div id="app"><h3 v-html='msg' ref='titleBOx'></h3><p ref='pBox'></p></div>
</body>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>let vm = new Vue({el:'#app',data:{//=>destroy 销毁msg : '你好世界'},mounted(){//={titleBox:H3}console.log(this.$refs);//this.$refs.titleBox;}});</script>
</html>

运行效果如下：

vue基础实践：refs相关推荐

vue基础实践1-胡子语法展现到页面
vue基础实践1-胡子语法展现到页面 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
（vue基础试炼_03）使用vue.js实现TodoList
接上一篇:(vue基础试炼_02)使用vue.js实现隔2秒显示不同内容https://gblfy.blog.csdn.net/article/details/103841818 指令作用 v-fo ...
基于vue技术栈制作自己的简历网站问题总结篇(入门vue基础项目)
前言目前在学习vue技术栈的同时接触到了很多以前没用过的各种工具(如webpack,npm,git等等),配合着vue全家桶里的一些东西做了一个基于vue的个人简历网站(虽然用vue框架搭简历网站优 ...
2022前端知识整理：十、vue基础
十.vue基础 2022前端知识整理:第十部分.vue基础,仅包含vue2.0相关知识,建议先完成html5.css3和JavaScript ES6之后再学习.部分图片未上传成功,稍后完善,请见谅. ...
第一期vue项目实践问题与收获总结
第一期vue项目实践问题与收获总结文章目录第一期vue项目实践问题与收获总结 1. 存在问题 1.1 本地静态存储信息 1.2 用户权限的区分 2. 收获 2.1 路由导航守卫拦截未登录的访问 2 ...
Vue全家桶（一）：Vue基础+Vue-Cli+Vue组件化+过渡动画
目录 1.Vue概述 1.1 认识Vue 1.2 Vue的两核心 1.3 Vue的初体验 1.4 Vue的生命周期 2. Vue-CLI (Command Line Interface) 3. Vue ...
Vue 系列一之 Vue 基础
Create by jsliang on 2018-11-8 13:34:30 Recently revised in 2019-1-12 19:23:17 Hello 小伙伴们,如果觉得本文还不错, ...
vue基础（主要为vue3）
VUE基础入门 vue 简介 Vue 是一套用于构建用户界面的前端框架. 1.1构建用户界面前端开发者最主要的工作,就是为网站的使用者(又称为:网站的用户)构建出美观.舒适.好用的网页. 1.1构建 ...
Vue基础+vue2+vue3 大合集笔记
系列文章目录之前没跟对up主,vue基础没打好:跟着尚硅谷从头第二次学Vue,收获了很多并且记下来万字笔记,平常开发用的多的都在这了如果有出错的地方请多多指教! 文章目录系列文章目录 vue概 ...

vue基础实践：refs

vue基础实践：refs

vue基础实践：refs相关推荐

最新文章

热门文章