Vue 实例上的属性

最新推荐文章于 2023-03-07 20:33:44 发布

原创最新推荐文章于 2023-03-07 20:33:44 发布 · 98 阅读

0 ·

CC 4.0 BY-SA版权

在这里插入图片描述
组件树

$parent：用来访问组件实例的父实例
$root: 用来访问当前组件树的根实例
$children:用来访问当前组件实例的直接子组件实例
$refs:用来访问ref指令的子组件

DOM访问（vue2.0已弃用）

$el：用来挂载当前组件实例的dom元素
$e l s ：用来访问$ el元素中使用了v-el指令的DOM元素

数据访问

$data：用来访问组件实例观察的数据对象
$options：用来访问组件实例化时的初始化选项对象

DOM方法的使用

$appendTo(elementOrSelector, callback)：将el所指的DOM元素插入目标元素
$before(elementOrSelector, callback)：将el所指的DOM元素或片段插入目标元素之前
$after(elementOrSelector, callback)：将el所指的DOM元素或片段插入目标元素之后
$remove(callback)：将el所指的DOM元素或片段从DOM中删除
$nextTick(callback)：用来在下一次DOM更新循环后执行指定的回调函数

// vue 的 渲染过程是异步的
<template>
  <div id="app">
      <p>{{text}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      text: 0
    };
  }
  mounted(){
    setInterval(()=> {
      this.text +=1;
      this.text +=1;
      this.text +=1;
      this.text +=1;
      this.text +=1;
    },1000)
  }
}
</script>

可以看到text值的变化是0 5 10 15 … 而并没有出现 0 1 2 3 … 这样连续的变化