利用$refs怎么访问Vue项目中的DOM-创新互联
这篇文章主要为大家详细介绍了利用$refs怎么访问Vue项目中的DOM,文中示例代码介绍的非常详细,具有一定的参考价值,发现的小伙伴们可以参考一下:
创新互联一直秉承“诚信做人,踏实做事”的原则,不欺瞒客户,是我们最起码的底线! 以服务为基础,以质量求生存,以技术求发展,成交一个客户多一个朋友!为您提供网站制作、网站设计、成都网页设计、重庆小程序开发、成都网站开发、成都网站制作、成都软件开发、成都APP应用开发是成都本地专业的网站建设和网站设计公司,等你一起来见证!为什么要使用Vue
Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML、CSS、JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用vue。
{{ message }}
在Vue的模板中,我们可以在模板中的任何元素中添加ref
属性,这样就可以在Vue实例中引用这些元素。更具体地说,可以访问DOM元素。在上面的示例中的
注意,ref
属性不是一个标准的HTML属性,只是Vue中的一个属性。实际上,它甚至不会是DOM的一部分,所以在浏览器中你查看渲染的HTML,你是看不到有关于ref
的任何东西。因为在它前面没有添加:
,而且它也不是一个指令。
在Vue实例上使用$refs
属性可以通过myButton
来引用这个按钮。来看看在浏览器的控制台中打印出来,它将是什么样子。
let app = new Vue({ el: '#app', data () { return { message: 'Hi!大漠' } }, methods: { clickedButton: function () { console.log(this.$refs); } } })
如果你打开浏览器的控制台,我们可以看到这个属性是一个JavaScript的对象,它包含了ref
属性的所有元素的引用。
注意,这个对象中的键名(key
)与我们在ref
属性中指定的名称(name
)相匹配,而其值(value
)是DOM元素。在这种情况下,我们可以看到键名是myButton
,而其值是button
元素。而且这也和Vue没有任何关系。
所以在Vue中,可以通过在$refs
对象上访问ref
的名称来访问DOM元素。来看下面这个示例。我们点击按钮后,这个按钮的文本将会更改message
数据中的值。
let app = new Vue({ el: '#app', data () { return { message: 'Hi!大漠' } }, methods: { clickedButton: function () { console.log(this.$refs) this.$refs.myButton.innerText = this.message } } })
点击按钮之后,按钮的文本将更改变“Hi,!大漠
”:
当然,我们也可以通过使用查询选择器来访问DOM元素来实现这样的效果,但是使用ref
属性更简洁,而且这也是Vue中的方法。它也将更安全,因为你不会依赖于class
和id
。因此,几乎不会因为更改了HTML的标签或者CSS样式受到影响。
像Vue这样的JavaScript框架的主要目的之一就是让开发人员不必去处理DOM。所以你应该避免去做这样的事情,除非你真的需要去做。还应该要注意一个潜在的问题。
首先来看一个简单的示例,给h2
元素添加一个ref
属性。
{{ message }}
点击偶