Vue暴露的属性和方法

Vue暴露 一些属性和方法

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


Vue 操作DOM元素

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

操作DOM元素:

  1. 在需要操作的DOM元素中使用ref属性,
  2. ref属性的值是自己随便定义的名字
  3. 通过Vue实例的$refs属性获取操作dom元素


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

  1. 因为可以在多个DOM元素上使用ref.
  2. 所以$refs属性获取的是所有具有ref属性的DOM元素的集.
  3. 因此要想操作确定的DOM元素就需要在通过当初的ref值获取.

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

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

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

你可能感兴趣的:(vue,前端,vue,js,javascript,dom)