jquery vue.js 'document.getElementById'简写

lkaoscv7  于 5个月前  发布在  jQuery
关注(0)|答案(6)|浏览(60)

vue.js是否有document.getElementById('#id')的简写,就像jQuery的$('#id')一样?
如果是这样的话,在文档中的引用在哪里,这样我就可以找到其他信息?

nwo49xxi

nwo49xxi1#

在vue 2中没有捷径。
Jeff的方法似乎已经在vue 2中被弃用了。
这里有另一种方法你可以实现你的目标。

var app = new Vue({
    el:'#app',
    methods: {    
        showMyDiv() {
           console.log(this.$refs.myDiv);
        }
    }
    
   });

个字符

cnwbcb6i

cnwbcb6i2#

您可以使用指令v-el来保存元素,然后在以后使用它。
https://vuejs.org/api/#vm-els

<div v-el:my-div></div>
<!-- this.$els.myDiv --->

字符串

编辑:在Vue 2中不推荐使用,请参见西亚松回答

cbwuti44

cbwuti443#

尽量不要通过直接引用DOM来进行DOM操作,这会带来很多性能问题,而且当我们试图直接访问DOM时,事件处理变得更加棘手,而是使用数据和指令来操作DOM。
这将给予您对操作的更多控制,您也将能够以模块化格式管理功能。

wqnecbli

wqnecbli4#

您可以在API中的这两个页面的组合中找到答案:

*参考号

ref用于注册对元素或子组件的引用。引用将在父组件的$refs对象下注册。如果在普通DOM元素上使用,则引用将是该元素

*vm.$refs

一个对象,它保存已注册ref的子组件。

ckx4rj1h

ckx4rj1h5#

如果你试图获取一个元素,你可以使用Vue.util.query,它实际上只是document.querySelector的一个 Package 器,但在14个字符对22个字符(分别),它在技术上更短。它也有一些错误处理,以防你正在搜索的元素不存在。
没有任何关于Vue.util的官方文档,但这是该函数的全部源代码:

function query(el) {
  if (typeof el === 'string') {
    var selector = el;
    el = document.querySelector(el);
    if (!el) {
      ({}).NODE_ENV !== 'production' && warn('Cannot find element: ' + selector);
    }
  }
  return el;
}

字符串
Repo链接:Vue.util.query

ctehm74n

ctehm74n6#

更新Vue v3。现在有一个称为Template Ref(文档链接)的功能。在脚本部分创建ref后,将ref属性添加到您想要访问的元素将连接两者。

<script setup>
  import { ref, onMounted } from 'vue'

  // declare a ref to hold the element reference
  // the name must match template ref value
  const input = ref(null)

  onMounted(() => {
    input.value.focus()
  })
</script>

<template>
  <input ref="input" />
</template>

字符串

相关问题