Vue2之实例方法

若梦plus

于 2024-07-12 20:25:10 发布

阅读量287

点赞数 6

分类专栏： Vue.js 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_40588441/article/details/140387984

版权

Vue.js 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

vm._uid (每个实例的唯一标识)
vm.$data === vm._data (实例的数据源)
vm.$options (用户传入的属性)
vm.$el (当前组件的真实dom)
vm.$nextTick (等待同步代码执行完毕)
vm.$mount (手动挂载实例)
vm.$watch (监控数据变化)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div id="app">
    {{name}}
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.8/vue.js"></script>
  <script>
    let vm = new Vue({
      // el: "#app",
      data() {
        return {
          name: "hs"
        }
      }
    })

    // 自定义挂载点（弹框组件适用）
    vm.$mount("#app")

    // 用户传入的所有属性
    console.log(vm.$options)
    // 大Vue
    console.log(vm.$options._base)

    // 响应式数据
    console.log(vm.$data)

    // 保证页面渲染完毕后，获取最新的dom元素
    console.log(vm.$nextTick)

    // 当前渲染的元素
    console.log(vm.$el)

    // 自定义watcher
    vm.$watch('name',(newVal,oldVal)=>{
      console.log(`name 发生了变化：${oldVal} -> ${newVal}`)
    })
    vm.name = '2'
  </script>

</body>

</html>