vue 怎么获取元素

在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误，

这时候可以在 mounted 里用 $refs 来获取样式，并进行更改：

<template>

<div style="display: block;" ref="abc">

<!-- -->

</div>

</template>

<script>

export default {

mounted () {

consolelog(this$refsabcstylecssText)

}

}

</script>

结果是 display: block;

如果我们给一个div设定全屏背景图，就需要获取屏幕高度进行赋值:

<template>

<div ref="nana">

<!-- -->

</div>

</template>

<script>export default {

mounted () {

let w = windowinnerWidth || documentdocumentElementclientWidth || documentbodyclientWidth;

let h = windowinnerHeight || documentdocumentElementclientHeight || documentbodyclientHeight;

this$refsnanastyleheight = h +'px';

}

}

1创建一个Vue实例

通过vue函数创建一个新的vue实例

一个 Vue 应用由一个通过new Vue创建的 根 Vue 实例 ，以及可嵌套的、可复用的组件树组成的。

我们先看看Vue基本的使用,至于组件我们后面详细的在来探讨

<divid="app"><!-- {{ 插值表达式,可以赋值 取值 三元 }} -->{{ msg }}</div><scriptsrc="/node_modules\vue\dist\vuejs"></script><script>// 引入vue后 会白给你一个Vue构造函数letvm=newVue({// 配置对象el:'#app',// 告诉vue能管理那个部分,使用的是querySelectordata:{// data中的数据会被vm所代理msg:'hello world',// 可以通过vmmsg取到对应的内容 ,也可以赋值      }})</script>

2声明式渲染

Vuejs 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

21 关于{{}} 插值表达式

插值表达式,表达式,赋值运算,计算,三元表达式,但是尽量少在这里写逻辑计算

插值：

<!-- HTML ---><divid="app">{{ message }}</div><!-- JS ---><script>newVue({el:'#app',data:{messgae:'hello Vue!'}})</script>

我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？

如果需要确定现在的数据是否已经和DOM建立了关联,形成响应式

可以将js中的new Vue复制给一个全局变量vm此时vm就是Vue实例化对象,未来可能会用它来搞很多事情,但是最常用到它的时候,是通过this关键字来使用它

varvm=newVue({el:'#app',data:{messgae:'hello Vue!'}})

然后在浏览器的js控制台中修改vmmessage值，同时页面也会发生改变

在控制台中输入

vmmessge="你好,Vue"

22使用 JavaScript 表达式

迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vuejs 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}{{ ok 'YES' : 'NO' }}{{ messagesplit('')reverse()join('') }}<divv-bind:id="'list-' + id"></div>

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。

示例:

<divid="app"><!-- 数字 *** 作 --><p>{{ number + 2 }}</p><!-- 三目运算 --><p>{{ ok 'YES' : 'NO' }}</p><!-- 字符串翻转 --><p>{{ messagesplit('')reverse()join('')  }}</p></div><script>constvm=newVue({el:"#app",data:{message:'Hello World',number:10,ok:true,}})</script>

显示结果:

1png

但是有个限制就是，每个绑定双大括号(Mustache语法)里面都只能包含 单个表达式

23 关于data数据

vue关注的是数据变化,不需要在像以前一样关注DOM的变化

比如我想在2秒之后让页面发生变化,我们只需要在2秒后更改数据就可以了

varvm=newVue({el:'#app',data:{msg:'hello world'}})setTimeout(function(){vm$datamsg="bye world"},2000)

关于实例介绍:

示例中vm是Vue的实例对象,

实例对象上有$data属性,其值就是选项对象中data属性值

选项对象就是在实例化Vue时传入的对象

data属性值是一个对象,因此$data也就是这个对象

当通过$data修改msg的值时,也就等于改data中的值, 对应是引用类型

因此示例的结果就是:

2秒后data数据中msg的值改变了, 又因为Vue是始终在关注着msg这个数据,一旦数据发生变化,就会触发Vue的响应式, 继而改变视图显示

24 再次理解MVVM模式

在上一节讲Vue的mvvm模式的时候就有提到,

Vue实例对象就是vm,data数据就是model,  页面显示的结果就是view

再来看一下mvvm的图

mvvmjpg

这张图在配合刚才的示例, 我们就能很好的理解,当数据Model发生变化以后, Vue就可以通过Data Bindings了解到,然后使用新的数据去改变页面显示

至于Vue如何通过DOM Listeners监听页面的改变,来改变数据,这个我们之后讲到在说

3实例上的方法

除了数据属性，Vue 选项对象中还暴露了一些有用的属性与方法。在通过实例对象使用选项对象的属性时,属性前面都需要带上前缀$，以便与用户定义的属性区分开来。例如：

vardata={a:1}varvm=newVue({el:'#example',data:data})vm$data===data// => truevm$el===documentgetElementById('example')// => true

31 实例上常用的属性和方法

vm$attrs// 用户获取父组件传递给子组件的属性,(除props,class,style外)vm$data// vm 上的数据vm$watch// 监听vm$el// 当前el元素vm$set// 后加的属性实现响应式vm$options// vm 配置 上的 所有属性vm$nextTick(()=>{})// 异步方法,等待渲染dom完成后来获取vmvm$refs// 获取dom元素或者组件实例的引用

其实我们可以创建一个Vue实例,然后在控制台上打印这个实例对象,你会看到很多的属性和方法

constvm=newVue({el:"#app",})

在控制台输入vm

显示结果:

实例属性png

这里面很多属性,我们暂时不用去关心他,因为随着学习的深入,慢慢都会学习到的

4实例化多个vue

我们可以在页面上同时实例化多个Vue, 不同的实例接管页面上不同的区域

看下如下的示例:

##  <h1>实例化多个Vue对象</h1><divid="app-one"><h2>{{ title }}</h2><p>{{ greet }}</p></div><divid="app-two"><h2>{{ title }}</h2><p>{{ greet }}</p><buttonv-on:click="changeTitle">点击改变app-one的h2的内容</button></div><script>//  Vue实例varone=newVue({el:'#app-one',data:{title:" vue-app-one的内容"},computed:{greet:function(){return"Hello App One"}}})//  Vue实例vartwo=newVue({el:'#app-two',data:{title:" vue-app-two的内容"},methods:{changeTitle:function(){onetitle="app-one的内容发生改变了"}},computed:{greet:function(){return"Hello App two"}}})</script>

Vue事件和方法还没有讲到, 先做一个了解即可:

示例分析:

两个实例one和two接管了不同的DOM元素,

点击按钮是在two实例接管的DOM元素中,

所以,当你点击时,只会触发two实例中的方法, 也只会改变two实例中的数据

那么问题来了

能否在two实例中修改one实例中的数据呢,

答案当然是可以的啦, 因为变量one是全局变量,

在two实例化中,就可以通过one变量得到第一个Vue实例化对象,

然后就可以通过实例化对象修改数据,这个可以自己尝试写写

5 Vue *** 作DOM元素

虽然Vue是数据驱动的,但是有的时候我们就需要自己手动的获取到DOM元素,对DOM元素进行 *** 作,那么该如何处理呢,

*** 作DOM元素:

在需要 *** 作的DOM元素中使用ref属性,

ref属性的值是自己随便定义的名字

通过Vue实例的$refs属性获取 *** 作dom元素

<divid="app"><divref="wuwei">无为</div></div><script>varvm=newVue({// 根实例el:'#app',data:{},mounted(){//dom元素中有多个一样的ref,dom如果不是通过v-for循环出来的,只能获取一个// 如果是循环出来的,可以获取多个,获取的是一个数组consolelog(this$refswuwei)}});</script>

关于示例中$refs属性的解释:

因为可以在多个DOM元素上使用ref

所以$refs属性获取的是所有具有ref属性的DOM元素的集

因此要想 *** 作确定的DOM元素就需要在通过当初的ref值获取

简而言之: 就是ref在dom元素上通过this$refs自定义名字是获取dom元素

当获取到DOM元素后,然后就可以采用原生的JavaScript对DOM进行 *** 作

注意:

Vue 接管的DOM元素之外的元素使用ref是获取不了的,值是undefined

在组件上定义ref="名字",可以通过this$refs名字，，，获取dom元素。。例如下面：

<div id="out">

    <h2>组件 *** 作</h2>

    <hr/>

    <p ref="tit">组件 *** 作组件 *** 作v组件 *** 作组件 *** 作组件 *** 作</p>

    <button @click="tap">点击</button>

</div>

</body>

<script type="text/javascript">

var vm = new Vue({

        el:'#out',

        data:{

        },

methods:{

        tap(){

             consolelog(this$refstitinnerHTML)//获取dom元素把dom元素的内容拿了出来

        }

    }

})

v-model,,,在输入框，单选框，多选框等等，添加v-model=“tit”的时候v-model的值必须在data里面声明；

v-model的值是他们的value值

看Vuejs文档中的ref部分，自己总结了下ref的使用方法以便后面查阅。

HTML 部分

js部分

HTML部分

JS部分

HTML部分

JS部分

HTML部分

JS部分

1、如果通过v-for 遍历想加不同的ref时记得加 : 号，即 :ref =某变量 ;

这点和其他属性一样，如果是固定值就不需要加 : 号，如果是变量记得加 : 号

2、通过 :ref =某变量 添加ref（即加了 : 号） ,如果想获取该ref时需要加 [0] ，如 this$refs[refsArrayItem] [0] ；如果不是 :ref =某变量 的方式而是 ref =某字符串 时则不需要加，如 this$refs[refsArrayItem]

3、想在element ui 对话框打开后取dom时，应该使用 $nextTick ，而不是直接使用 this$refs imgLocal2 ：

ref 目前使用过的三种方式：

1、在html的元素中使用rel，可在js中直接调用该元素，用this$refs（ref值） 获取到的是dom元素

2、在vue的组件上加rel，可在js中直接使用该组件包括该组件的方法，用this$refs（ref值）方法名()

3、在v-for的循环列中使用rel

避坑：

v-for中使用rel需要绑定 变量 ，即v-bind:rel='变量名'

ref 需要在dom渲染完成后才会有 ，在使用的时候确保dom已经渲染完成。比如在生命周期  mounted(){} 钩子中调用 ，或者 在 this$nextTick(()=>{}) 中调用 。

如果rel循环未绑定变量，那就$refs获取获取数组再循环得到使用即可

例子1：在html元素上使用

<div id="app">

    <h1 ref="h1ele">这是h1</h1>

    <hello ref="ho"></hello>

    <button @click="getref">获取h1元素</button>

</div>

获取注册过 ref 的所有组件或元素

methods: {

        getref() {

          // 表示从 $refs对象 中, 获取 ref 属性值为: h1ele DOM元素

          consolelog(this$refsh1eleinnerText);

          this$refsh1elestylecolor = 'red';// 修改html样式

          consolelog(this$refshomsg);// 获取组件数据

          consolelog(this$refshotest);// 获取组件的方法

        }

      }

例子2：

<html部分

<view class="example-body">

<button class="button" type="primary" @click="togglePopup('top', 'popup')">顶部d出 popup</button>

<button class="button" type="primary" @click="togglePopup('center', 'popup')">中间d出 popup</button>

<button class="button" type="primary" @click="togglePopup('bottom', 'popup')">底部d出 popup</button>

</view>

<uni-popup ref="showpopup" :type="type" @change="change"><text class="popup-content">{{ content }}</text></uni-popup>

<uni-popup ref="showtip" :type="type" :mask-click="false" @change="change">

<view class="uni-tip">

<text class="uni-tip-title">警告</text>

<text class="uni-tip-content">这是一个通过自定义 popup，自由扩展的 警告d窗。点击遮罩不会关闭d窗。</text>

<view class="uni-tip-group-button">

<text class="uni-tip-button" @click="cancel('tip')">取消</text>

<text class="uni-tip-button" @click="cancel('tip')">确定</text>

</view>

</view>

</uni-popup>

<js部分

methods: {

togglePopup(type, open) {

switch (type) {

case 'top':

thiscontent = '顶部d出 popup'

break

case 'bottom':

thiscontent = '底部d出 popup'

break

case 'center':

thiscontent = '居中d出 popup'

break

}

thistype = type

this$nextTick(() => {

this$refs['show' + open]open()

})

},

cancel(type) {

this$refs['show' + type]close()

},

change(e) {

consolelog('是否打开:' + eshow)

}

},

一般来讲获取DOM元素，需documentquerySelector（"class"）获取这个dom节点，然后在获取元素的值。

但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的元素上绑定rel，然后$refs里面调用就行。

然后在javascript里面这样调用：this$refs元素绑定rel  这样就可以减少获取dom节点的消耗了

1、ref 加在普通元素上，用this$refsname 获取到的是dom元素

2、ref 加在子组件上，用this$refsname  获取到的是 组件实例，可以使用组件的所有方法 。

3、如何利用 v-for 和 ref 获取一组数组或者dom 节点

注意：

1、 ref 需要在dom渲染完成后才会有 ，在使用的时候确保dom已经渲染完成。比如在生命周期  mounted(){} 钩子中调用 ，或者 在 this$nextTick(()=>{}) 中调用 。

2、如果ref 是通过v-for 循环出来的， 有多个重名，那么ref的值会是一个数组  ，此时要拿到单个的ref 只需要循环就可以了。

<div id="ref-outside-component" v-on:click="consoleRef">

    <component-father ref="outsideComponentRef" ></component-father>

    <p>ref在外面的组件上</p>

</div>

    var refoutsidecomponentTem={

        template:"<div class='childComp'><h5>我是子组件</h5></div>"

    };

    var refoutsidecomponent=new Vue({

        el:"#ref-outside-component",

        components:{

            "component-father":refoutsidecomponentTem

        },

        methods:{

            consoleRef:function () {

                consolelog(this); // #ref-outside-component    vue实例

                consolelog(this$refsoutsideComponentRef);  // divchildComp vue实例，组件实例

            }

        }

    });

<div id="ref-outside-dom" v-on:click="consoleRef" >

  <component-father> </component-father>

  <p ref="outsideDomRef" >ref在外面的元素上</p>

</div>

    var refoutsidedomTem={

        template:"<div class='childComp'><h5>我是子组件</h5></div>"

    };

    var refoutsidedom=new Vue({

        el:"#ref-outside-dom",

        components:{

            "component-father":refoutsidedomTem

        },

        methods:{

            consoleRef:function () {

                consolelog(this); // #ref-outside-dom    vue实例

                consolelog(this$refsoutsideDomRef);  //  <p>标签dom元素 ref在外面的元素上</p>

            }

        }

    });

<div id="ref-inside-dom">

    <component-father></component-father>

    <p>ref在里面的元素上</p>

</div>

    var refinsidedomTem={

        template:"<div class='childComp' v-on:click='consoleRef'>" +

                      "<h5 ref='insideDomRef' >我是子组件</h5>" +

                  "</div>",

        methods:{

            consoleRef:function () {

                consolelog(this);  // divchildComp  vue实例

                consolelog(this$refsinsideDomRef);  // <h5 >我是子组件</h5>

            }

        }

    };

    var refinsidedom=new Vue({

        el:"#ref-inside-dom",

        components :{

            "component-father":refinsidedomTem

        }

    });

<div id="ref-inside-dom-all">

    <ref-inside-dom-quanjv></ref-inside-dom-quanjv>

</div>

    Vuecomponent ("ref-inside-dom-quanjv",{

        template:"<div class='insideFather'> " +

                    "<input type='text' ref='insideDomRefAll' v-on:input='showinsideDomRef'>" +

                    "  <p>ref在里面的元素上--全局注册 </p> " +

                  "</div>",

        methods:{

            showinsideDomRef:function () {

                consolelog(this); //这里的this其实还是divinsideFather

                consolelog(this$refsinsideDomRefAll); // <input  type="text">

            }

        }

    });

    var refinsidedomall=new Vue({

        el:"#ref-inside-dom-all"

    });

转自:>

以上就是关于vue 怎么获取元素全部的内容，包括:vue 怎么获取元素、第二节:Vue实例化、vue组件 *** 作 ---ref --v-model 2018-11-05等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！