精华内容
下载资源
问答
  • 主要给大家介绍了关于vue操作dom元素的3种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue操作dom元素的三种方法介绍和分析

    万次阅读 多人点赞 2019-03-07 09:55:27
    肯定会遇到这样的问题:我点击新增按钮,需要弹出个弹框,然后我点击对应的关闭按钮,关闭弹框,但是新增按钮和关闭按钮操作的是另一个元素,所以需要获取dom元素进行操控,那么在vue中怎么操作dom呢? 以下是常用...

    相信大家在做项目的时候,肯定会遇到这样的问题:我点击新增按钮,需要弹出个弹框,然后我点击对应的关闭按钮,关闭弹框,但是新增按钮和关闭按钮操作的是另一个元素,所以需要获取dom元素进行操控,那么在vue中怎么操作dom呢?

    以下是常用的三种方法:

    1、jQuery操作dom(推荐指数:★☆☆☆☆):

    只要拿jQuery的选择器,选中相应的dom进行操作就可以了,但是大家都知道jQuery获取元素是查找页面所有,相当于“循环”所有元素直至找到需要的dom,但是vue是单页面的,jQuery获取dom并不只是获取vue当前页面,而是从根路由开始查找所有,当其他页面出现相同的元素,也会被获取到,而且jQuery操作的dom,如果是根据动态获取数据渲染的,那么写在mounted里的操作方法将会失效,必须放到updated里,这样会导致有些操作被执行多遍,所以还是不建议在vue中使用jQuery。

    2、原生js操作dom(推荐指数:★★★★☆):

    原生js获取dom就很简单了,例如:根据id、class、当前元素的上一个元素......

    3、vue官方方法:ref(推荐指数:★★★★★):

    vue中的ref是把当前dom元素 “ 抽离出来 ” ,只要通过 this.$refs就可以获取到(注意this指向),此方法尤其适用于父元素需要操作子组件的dom元素,这也是子传父传递数据的一种方法

    下面让我来看个案例:

    设置了一个button按钮,通过点击事件,然后弹出 新增的弹框 , 然后点击 “ × ”的button按钮,关闭弹框,此时需要操作弹框的dom元素,通过ref定义一个名字, 然后在方法中通过  this.$refs.名字  获取对应的dom

    <template>
        <div  class="index-box">
            <!--新增按钮-->
            <input type="button" id="DbManagement-addBtn" @click="showAddAlert" value="新增">
            <!--新增数据源弹框-->
            <div class="addDbSource-alert" ref="addAlert">
                <div class="addAlert-top">
                    添加数据源
                    <input type="button" value="×" class="addAlert-close" @click="closeAddAlert">
                </div>
                <div class="addAlert-content">
                    <div style="height: 1000px;"></div>
                </div>
            </div>
        </div>
    </template>
    
    <script>
        export default {
            name: "Index",
            data(){
                return {
    
                }
            },
            methods:{
                // 点击新增按钮,弹出新增数据源的弹框
                showAddAlert(){
                    this.$refs.addAlert.style.display = "block";
                },
                // 点击 × 关闭新增数据源的弹框
                closeAddAlert(){
                    this.$refs.addAlert.style.display = "none";
                },
            },
            created(){
    
            }
        }
    </script>
    
    <style scoped>
        /* 容器 */
        .index-box{
            width: 100%;
            height: 100%;
            background: #212224;
            display: flex;
        }
        /* 添加数据源按钮 */
        #DbManagement-addBtn {
            width: 100px;
            height: 45px;
            border: none;
            border-radius: 10px;
            background: rgba(29, 211, 211, 1);
            box-shadow: 2px 2px 1px #014378;
            margin-left: 20px;
            margin-top: 17px;
            cursor: pointer;
            font-size: 20px;
        }
        /*新增数据源弹框*/
        .addDbSource-alert{
            width: 500px;
            height: 600px;
            background: #2b2c2f;
            position: fixed;
            left: calc(50% - 250px);
            top: calc(50% - 300px);
            display: none;
        }
        /*新增弹框头部*/
        .addAlert-top{
            width: 100%;
            height: 50px;
            background: #1dd3d3;
            line-height: 50px;
            font-size: 20px;
            box-sizing: border-box;
            padding-left: 20px;
        }
        /*新增弹框关闭*/
        .addAlert-close{
            background: #1dd3d3;
            border: none;
            font-size: 30px;
            cursor: pointer;
            float: right;
            margin-right: 20px;
            margin-top: 5px;
        }
        /*新增弹框内容部分*/
        .addAlert-content{
            width: 100%;
            height: 550px;
            overflow-x: hidden;
            overflow-y: auto;
            box-sizing: border-box;
            padding: 0px 30px 20px;
        }
        /* 滚动条效果 */
        /* 设置滚动条的样式 */
        .addAlert-content::-webkit-scrollbar {
            width: 5px;
        }
        /* 滚动槽 */
        .addAlert-content::-webkit-scrollbar-track {
            /* -webkit-box-shadow: inset 0 0 6px  rgba(40, 42, 44, 1);
            border-radius: 10px; */
        }
        /* 滚动条滑块 */
        .addAlert-content::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background: rgba(29, 211, 211, 1);
            /* -webkit-box-shadow: inset 0 0 6px rgba(29, 211, 211, 1); */
        }
        .addAlert-content::-webkit-scrollbar-thumb:window-inactive {
            background: rgba(29, 211, 211, 1);
        }
    </style>

    效果图:

    以上就是vue中操作dom的方法

    如有问题,请指出,接受批评。

    个人微信公众号:

    展开全文
  • 仿写vue操作dom

    2018-08-13 13:53:15
    仿写vuevue用法一致 已实现 v-for v-click v-model v-bind功能 对于Object的使用
  • vue操作dom元素的三种方法

    千次阅读 多人点赞 2020-09-19 09:47:55
    1.原生js操作dom const dom = getElementById(‘box’) 2.vue官方方法:ref vue中的ref是把当前dom元素 “ 抽离出来 ” ,只要通过 this.$refs就可以获取到 < div class=“set” ref=“up”> .set是我们要...

    1.原生js操作dom

    const dom = getElementById(‘box’)

    2.vue官方方法:ref

    vue中的ref是把当前dom元素 “ 抽离出来 ” ,只要通过 this.$refs就可以获取到 < div class=“set” ref=“up”>

    .set是我们要操作的dom对象,它的ref是 up

    @click=“Alert”
    给父元素一个点击事件,

    接下来我们来编写这个方法
    methods:{
      this.$refs.addAlert.style.display = “block”;
    }

    <template>
    	<div id="app">
    		<div  class="index-box">
    			<!--新增按钮-->
    			<input type="button" id="DbManagement-addBtn" @click="showAddAlert" value="新增">
    			<!--新增数据源弹框-->
    			<div class="addDbSource-alert" ref="addAlert">
    				<div class="addAlert-top">
    					<!--添加数据源-->
    					<input type="button" value="×" class="addAlert-close" @click="closeAddAlert">
    				</div>
    				<div class="addAlert-content">
    					<div style="height: 1000px;"></div>
    				</div>
    			</div>
    		</div>
    	</div>
    </template>
    <script>
    	export default {
    		name: "Index",
    		data(){
    			return {
    			}
    		},
    		methods:{
    			// 点击新增按钮,弹出新增数据源的弹框
    			showAddAlert(){
    				this.$refs.addAlert.style.display = "block";
    			},
    			// 点击 × 关闭新增数据源的弹框
    			closeAddAlert(){
    				this.$refs.addAlert.style.display = "none";
    			},
    		},
    		created(){
    		}
    	}
    </script>
    <style scoped>
    	#app{
    		width:100%;
    		height:100%;
    		overflow-y:auto;
    	}
     	/* 容器 */
        .index-box{
            width: 100%;
            height: 100%;
            background: #212224;
            display: flex;
        }
        /* 添加数据源按钮 */
        #DbManagement-addBtn {
            width: 100px;
            height: 45px;
            border: none;
            border-radius: 10px;
            background: rgba(29, 211, 211, 1);
            box-shadow: 2px 2px 1px #014378;
            margin-left: 20px;
            margin-top: 17px;
            cursor: pointer;
            font-size: 20px;
        }
        /*新增数据源弹框*/
        .addDbSource-alert{
            position: fixed;
    		top:0;left:0;right:0;bottom:0;
    		margin:auto;
            width: 4rem;height: 4rem;
            background: #2b2c2f;
            display: none;
        }
        /*新增弹框头部*/
        .addAlert-top{
            width: 100%;
            height: 50px;
            background: #1dd3d3;
            line-height: 50px;
            font-size: 20px;
            box-sizing: border-box;
            padding-left: 20px;
        }
        /*新增弹框关闭*/
        .addAlert-close{
            background: #1dd3d3;
            border: none;
            font-size: 30px;
            cursor: pointer;
            float: right;
            margin-right: 20px;
            margin-top: 5px;
        }
        /*新增弹框内容部分*/
        .addAlert-content{
            width: 100%;
            box-sizing: border-box;
            padding: 0px 30px 20px;
        }
        /* 滚动条效果 */
        /* 设置滚动条的样式 */
        .addAlert-content::-webkit-scrollbar {
            width: 5px;
        }
        /* 滚动槽 */
        .addAlert-content::-webkit-scrollbar-track {
            /* -webkit-box-shadow: inset 0 0 6px  rgba(40, 42, 44, 1);
            border-radius: 10px; */
        }
        /* 滚动条滑块 */
        .addAlert-content::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background: rgba(29, 211, 211, 1);
            /* -webkit-box-shadow: inset 0 0 6px rgba(29, 211, 211, 1); */
        }
        .addAlert-content::-webkit-scrollbar-thumb:window-inactive {
            background: rgba(29, 211, 211, 1);
        }
    </style>
    


    3.jQuery操作dom

      只要拿jQuery的选择器,选中相应的dom进行操作就可以了,但是大家都知道jQuery获取元素是查找页面所有,相当于“循环”所有元素直至找到需要的dom,但是vue是单页面的,jQuery获取dom并不只是获取vue当前页面,而是从根路由开始查找所有,当其他页面出现相同的元素,也会被获取到,而且jQuery操作的dom,如果是根据动态获取数据渲染的,那么写在mounted里的操作方法将会失效,必须放到updated里,这样会导致有些操作被执行多遍,所以还是不建议在vue中使用jQuery。

      如果这篇文章对你有所帮助,请查看我的置顶文章,感谢!

    展开全文
  • Vue操作DOM 和 自定义指令的钩子

    千次阅读 2017-09-01 15:15:18
    Vue怎么操作DOM呢 1、 this.$refs.* 拿到虚拟Dom,可以进行真实dom的一切操作。 1)在标签中添加ref="*" 2)在方法中用this.$refs.*拿到这个元素,跟document.getElementById('*')一样。 2. 自定义指令中,el就是当前...

    
    

    1、 this.$refs.* 拿到虚拟Dom,可以进行真实dom的一切操作

    1)在标签中添加ref="*"
    2)在方法中用this.$refs.*拿到这个元素,跟document.getElementById('*')一样。

    2、自定义指令中,el就是当前环境下的Dom元素

      el.style.color = "yellow";
      console.log(el.tagName);//均可执行

    代码:

    <!DOCTYPE html>
    <html> 
    <head>
        <meta charset="utf-8">
        <title>自定义指令</title> 
        <script src="js/vue.js" type="text/javascript"></script> 
        <style type="text/css">
        	.app{
        		width:300px;
        		height: 300px;
        		border: 1px solid #00ff00;
        	}
        /*	.app .child{
        		position: relative;
        		top:320px;
        		width:330px;
        		height: 300px;
        		border: 2px solid red; 
        	}*/
        </style>
    </head>
    <body> 
    	<div class="app">
    		<div v-color="colors[1].color1" name="tc">oooooo</div>
    		<my-card v-bind:obj="colors" name="zy"> 
    		<!-- <div class="child" v-demo:foo.a.b="color2">lalala</div> -->
    		</my-card>
    	</div> 
    	<script>
    	/*钩子函数:
    		bind、inserted、update、componentUpdated、unbind
    	  钩子函数的参数:
    	    el、binding、vnode、oldVnode 
    	*/
    		Vue.directive('color', function (el, binding) {
    		  console.log("%%%%拿到当前域的真实dom%%%%");
    		  console.log(el);
    		  el.style.color = "yellow";
    		  console.log(el.tagName);
    		  
    		  console.log("%%%%查看自定义指令v-color本身的一些属性%%%%");
    		  el.style.backgroundColor = binding.value; 
    		  console.log(binding.name+","+binding.value+","+binding.expression+","+binding.arg);
    		})
    		Vue.component("my-card",{
    			template:'<div ref="card" v-on:click="toclick" v-color="obj[0].color0">12345678</div>',
    			props:['obj'],
    			methods:{
    				toclick: function(){
    					console.log("%%%%拿到props数据%%%%%");
    					console.log(this.obj[0].color0);
    					console.log("%%%%拿到虚拟dom%%%%");
    					console.log(this.$refs.card);
    					console.log("%%%%拿到非prop传入的name的属性值%%%%%");
    					console.log(this.$refs.card.getAttribute('name'));
    				}
    			} 
    		})
    		
    		// Vue.directive('demo',{ 
    		// 	bind: function(el,binding,vnode){ 
    		// 		el.innerHTML = 
    		// 		'name: ' + binding.name + '<br/>' +
    		// 		'value: ' + binding.value + '<br/>' +
    		// 		'expression: ' + binding.expression + '<br/>' +
    		// 		'arg: ' + binding.arg + '<br/>' +
    		// 		'modifiers: ' + binding.modifiers + '<br/>' +
    		// 		'vnode keys: ' + Object.keys(vnode).join(', ');
    		// 		console.log("原来的vnode");
    		// 		console.log(vnode);
    		// 	},
    		// 	update: function(el,binding,vnode){
    		// 		el.style.backgroundColor = binding.value;
    		// 		console.log("更新的vnode"+vnode);
    		// 		console.log("背景色:"+binding.value); 
    		// 	}
    		// }) 
    		new Vue({
    			el: ".app",
    			data: {
    				colors:[
    					{color0:'#0000ff'},
    					{color1:'#00ff00'}
    				]  
    			}
    		})
    	</script>
    </body>
    </html>
    


    展开全文
  • vue监听window.resize方法 < template > < div id = "app" > < div : style = "{width: `${screenWidth}px`}" > < router - view / > < / div > < / div > < / template > < script > ...

    vue监听window.resize方法

    <template>
      <div id="app">
        <div :style="{width: `${screenWidth}px`}">
          <router-view/>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App',
      data () {
        return {
          screenWidth: document.body.clientWidth
        }
      },
      mounted () {
        const that = this
        window.onresize = () => {
          return (() => {
            window.screenWidth = document.body.clientWidth
            that.screenWidth = window.screenWidth
          })()
        }
      },
      watch: {
        screenWidth (val) {
          this.screenWidth = val
        }
      }
    }
    </script>
    

    动态设置table表格的高度实例

        resetTableHeight() {
          this.$nextTick(() => {
            let dov = this.$refs["salary-scale-div"];
            let height = window.getComputedStyle(dov).height;
            if (height == "240px") {
              this.$refs["el-table-div"].style.height = "calc(100% - 270px)";
            } else if (height == "284px") {
              this.$refs["el-table-div"].style.height = "calc(100% - 314px)";
            } else if (height == "120px") {
              this.$refs["el-table-div"].style.height = "calc(100% - 150px)";
            }
          });
        },
    
    展开全文
  • //创建Vue对象 new Vue ( { el: '#app' , methods: { getCom ( ) { console.log ( this. $refs .mycom. $el ) ; } , removeClass ( el, className ) { // 删除样式 if ( ! this.hasClass ( ...
  • VueDOM操作+过渡效果

    2020-03-31 09:26:28
    一般来说vue是不支持DOM操作的,但是实际开发中难免会使用到如jQuery,zepto等进行DOM操作,vue属于虚拟DOM,不支持真实的DOM操作,只有在mouted里才能进行DOM操作。 使用computed实现对指定的数组[1,4,6,7,-9,4,0,...
  • 下面小编就为大家分享一篇解决vue页面DOM操作不生效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue学习dom操作

    千次阅读 2018-08-18 20:58:53
    vue中要操作dom , 首先需要在template组件中设置 ref="dom的名称"; 再在script中使用 this.$refs.dom的名称 就可以用dom的操作方式进行操作了。这种方式也可以直接获取组件对象,如果ref是放在组件上的...
  • vuedom操作

    千次阅读 2018-12-12 23:28:04
    一些需要等到dom渲染结束后才执行的操作(如获取元素宽,高),就用到 this.$nextTick() < div class = " box " ref = " box " > < div v-for = " (item,index) in list " :key = " index " class = ...
  • 判断页面dom元素是否加载完成 var _this = this var timer = setInterval(function () { // 判断文档和所有子资源(图片、音视频等)已完成加载 if (document.readyState === 'complete') { //执行方法 _this.fn()...
  • vue操作dom

    2018-10-18 06:19:39
    **vue中如何操作底层DOM** 前言: 其实在没有学习前端框架之前使用dom操作非常的普遍,但是前端框架的一个好处就是避免使用dom底层操作,安全并且高效,但是有时候我们又不可避免的使用它,所以vuedom操作留了一...
  • vue虚拟DOM是什么?vue的虚拟DOM的用法 1、为什么需要虚拟DOM ...而我们知道操作DOM的代价是昂贵的,所以vue2.0采用了虚拟DOM来代替对真实DOM的操作,最后通过某种机制来完成对真实DOM的更新,渲染视图。 所
  • vue页面DOM操作不生效

    千次阅读 2018-01-03 10:17:32
    现象:使用Element UI渲染了一个树形结构,设计在鼠标移入每个节点是显示其中的操作按钮,效果如下: 下面是出错部分: ...原因分析:猜测是vue使用的虚拟DOM,使得页面虽然已经渲染出来,但在Vue实例中让处
  • vue添加dom ,删除dom操作

    千次阅读 2020-07-08 10:06:44
    vue添加dom ,删除dom操作
  • vue.js 是数据绑定的框架,大部分情况下我们都不需要直接操作 DOM Element,但在某些时候,我们还是有获取DOM Element的需求的;记得曾经公司只想使用vue数据双向绑定部分,事件等部分单列出来由后台驱动就用到了...
  • vue 虚拟DOM的原理

    2021-01-21 10:58:35
     运行js的速度是很快的,大量的操作DOM就会很慢,时常在更新数据后会重新渲染页面,这样造成在没有改变数据的地方也重新渲染了DOM 节点,这样就造成了很大程度上的资源浪费。  在jQuery出现以前,我们直接操作DOM...
  • vueDOM更新

    2020-11-24 16:35:42
    vueDOM更新是一个异步操作:可以提高编译效率,避免性能浪费。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <...
  • Vue渲染DOM节点

    千次阅读 2019-05-17 09:07:33
    在渲染真实DOM的过程中,Vue引进了虚拟DOM的概念,虚拟DOM作为JS对象和真实DOM中间的一个缓冲存,极大的优化了JS频繁操作DOM的性能问题 浏览器的渲染流程 当浏览器接收到一个Html文件时,JS引擎和浏览器的渲染引擎...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 61,373
精华内容 24,549
关键字:

vue操作dom

vue 订阅