vue再读40-ref操作dom

简介: vue再读40-ref操作dom
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
</style>
<body>
    <!-- 数据渲染界面 -->
    <!-- 绑定表单元素 双向数据绑定 -->
    <div id="abc">
        <!-- 给操作的元素设置ref属性 -->
        <!-- 操作dom -->
        <input type="text" ref="txt">
    </div>
    <script src="./js/vue.js"></script>
    <script>
        //全局过滤器
        /* 过滤器A处理的数据是count 过滤器B返回的是A的过滤 */
        var vm = new Vue({
            el: '#abc',
            //模板ajax返回的数据
            data: {
                count: "geyao"
            },
            methods: {
            },
            //获取要操作的dom元素
            //页面加载完会启动触发
            mounted() {
                console.log(this.$refs.txt)
                this.$refs.txt.focus()
            },
        })
    </script>
    <!-- 列表渲染 -->
    <!-- 1渲染数组 -->
    <!-- 2c处理无数据的时候 -->
</body>
</html>

image.png

目录
打赏
0
0
0
0
64
分享
相关文章
Vue 中如何手动更新虚拟 DOM?
Vue 中如何手动更新虚拟 DOM?
85 57
Vue 中的虚拟 DOM 是什么,以及它是如何工作的。
Vue 中的虚拟 DOM 是什么,以及它是如何工作的。
|
5月前
|
在Vue中获取DOM元素的实际宽高
【10月更文挑战第2天】
582 1
react字符串转为dom标签,类似于Vue中的v-html
本文介绍了在React中将字符串转换为DOM标签的方法,类似于Vue中的`v-html`指令,通过使用`dangerouslySetInnerHTML`属性实现。
192 0
react字符串转为dom标签,类似于Vue中的v-html
|
6月前
|
Vue3基础(十wu)___ref获取原生dom元素
本文介绍了Vue3中使用`ref`来获取和操作原生DOM元素的方法,通过示例展示了如何通过`.value`改变元素的样式。
99 0
Vue3基础(十wu)___ref获取原生dom元素
【Vue面试题二十二】、什么是虚拟DOM?如何实现一个虚拟DOM?说说你的思路
这篇文章深入探讨了虚拟DOM的概念、必要性以及在Vue中的实现方式,解释了虚拟DOM如何作为真实DOM的轻量级抽象,通过优化DOM操作提高性能,并实现跨平台渲染的能力。
【Vue面试题二十二】、什么是虚拟DOM?如何实现一个虚拟DOM?说说你的思路
DOM操作有哪些方法可以改变元素的样式?
【6月更文挑战第30天】DOM操作有哪些方法可以改变元素的样式?
63 2
DOM操作
【6月更文挑战第30天】DOM操作
67 1
前端框架与库 - jQuery基础与DOM操作
【7月更文挑战第18天】jQuery 是一个简化JavaScript任务的库,以其“write less, do more”理念著称。核心功能包括DOM操作、事件处理和Ajax。DOM操作如选择元素(`$(&quot;p&quot;)`、`$(&quot;#myDiv&quot;)`、`$(&quot;.myClass&quot;)`)、创建及添加元素、修改属性和内容。事件处理如绑定(`click`)和触发(`trigger`)。常见问题涉及`$`符号冲突(使用`jQuery`代替)、异步加载管理和选择器性能优化。了解并规避这些问题能提升jQuery使用效率。
63 0
|
8月前
|
react18【系列实用教程】useRef —— 创建 ref 对象,获取 DOM (2024最新版)
react18【系列实用教程】useRef —— 创建 ref 对象,获取 DOM (2024最新版)
103 0

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等