zoukankan      html  css  js  c++  java
  • vue API 知识点(3) --- 实例 总结

    一、实例 property

    1.vm.$data

      Vue 实例观察的数据对象,Vue 实例代理了对其 data 对象 property 的的访问

    2.vm.$props

      当前组件接收到的 props 对象。Vue实例代理了对其 props 对象 property 的访问

    3.vm.$el

      Vue 实例使用的根 DOM 元素

    4.vm.$options

      用于当前 Vue 实例的初始化选项。需要在选项中包含自定义 property 时会有用处

      示例:通过这种方式我们可以自定义一些属性,通过 $options 获取自定义属性

      export default {
        name: 'testComponent',
        // demo 是自定义属性 可以 通过 vm.$options.demo 获取到属性值
        demo: '自定义属性',
        //------
        data () {
          return {}
        },
        mounted () {
          //使用 vm.$options 可以获取 实例上自定义的  属性
          console.log( this.$options.demo, '$options');  //自定义属性
          console.log( this.aaa);  //111
        }
      }

    5.vm.$parent

      获取父实例(如果有父实例)

    6.vm.$root

      获取当前组件树的根 Vue 实例,如果当前实例没有父实例,此实例将会是自己

    7.vm.$children

      获取当前实例的直接子组件。获取到的值,并不能保证顺序,也不是响应式的。如果你发现自己正在尝试使用 $children 来进行数据绑定,考虑使用一个数组配合 v-for 来生成子组件,并且使用 Array 作为真正的来源。

    8.vm.$slots

      用来访问被插槽分发的内容。每个具名插槽有其相应的 property (例如:v-slot: foo 中的内容将会在vm.$slots.foo中被找到)。default property 包括了所有没有被包含在具名插槽中的节点。或 v-slot: default 的内容

      请注意插槽不是响应式的。如果需要一个组件可以在被传入的数据发生变化时重新渲染,我们建议改变策略,依赖诸如 props 或 data 等响应性实例选项

      示例:

      创建一个 lv-spa 组件

    <template>
      <div>
        <slot name='header'></slot>
        <h1>一级标题</h1>
      </div>
    </template>

      使用组件

      <div id='a'>
        <!-- 老版本具名插槽 -->
        <lv-spa>
          <p slot='header'>
         我是header
        </p>
        </lv-spa>
        <!-- 新版本具名插槽 -->
        <lv-spa>
          <!-- 注意:这里的 v-slot 指令只能写在 template 标签上面,而不能放置到 p 标签上 -->
          <template v-slot:header>
            <p>我是header</p>
          </template>
        </lv-spa>
      </div>

      具名插槽的缩写

        v-slot:  可以替换成 # 号

      <div id='a'>
        <lv-spa>
          <template #header>
            <p>我是header</p>
          </template>
        </lv-spa>
        <lv-spa>
          <!-- # 后面必须有参数,否则会报错。即便是默认插槽,也需要写成 #default -->
          <template #default>
            <p>我是header</p>
          </template>
        </lv-spa>
      </div>

      作用域插槽:就是让插槽的内容能够访问子组件中才有的数据。

      声明一个组件 zn-div

    <template>
      <div>
        <slot name='znnnn' :name='name' :age='age'></slot>
        <h1>一级标题</h1>
      </div>
    </template>

      使用

      <div id='a'>
        <!-- 老版本使用具名插槽 -->
        <zn-div>
          <div slot='znnnn' slot-scope='people'>
            <h3>我的名字:{{ people.name }}</h3>
            <h3>我的年龄:{{ people.age }}</h3>
          </div>
        </zn-div>
        <!-- 新版本具名插槽 -->
        <zn-div>
          <template #znnnn='people'>
            <h3>我的名字:{{ people.name }}</h3>
            <h3>我的年龄:{{ people.age }}</h3>
          </template>
        </zn-div>
      </div>

    9.vm.$scopedSlots

      用来访问作用域插槽。对于包括默认 slot 在内的每一个插槽,该对象都包含一个返回相应 VNode 的函数。

      vm.$scopedSlots 在使用渲染函数开发一个组件时特别有用。平时开发过程中用到的比较少。

    10.vm.$refs

      一个对象,持有注册过 ref attribute 的所有 DOM 元素的组件实例

    11.vm.$isServer

      当前 Vue 实例是否运行于服务器

    12.vm.$attrs

      包含父作用域中不作为 prop 被识别(且获取的)的 attribute 绑定(class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定(class 和 style 除外),并且可以通过 v-bind='$attrs' 传入内部组件--在创建高级别的组件时非常有用,平时开发基本用不到

    13.vm.$listeners

      包含了父作用域中的(不含 .native 修饰器的)v-on 事件监听器。它可以通过 v-on='$listeners' 传入内部组件--在创建更高层次的组件时非常有用,平时开发基本用不到

    二、实例方法/数据

    1.vm.$watch

      计算属性。这篇文章有详细的介绍

    2.vm.$set 和 vm.$delete

       vm.$set 向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。他必须用于向响应式对象上添加新 property,因为 Vue 无法探测普通新增 property 

       这篇文章有详细的介绍

    三、实例方法/事件

     1.vm.$on

       监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数

    2.vm.$once

      监听一个自定义事件,但是只触发一次,一旦触发之后监听器就会被移除

    3.vm.$off

      移除自定义事件监听器

      如果没有提供参数,则移除所有的事件监听器

      如果只提供了事件,则移除该事件所有的监听器

      如果同时提供了事件与回调,则只移除这个回调的监听器

    4.vm.$emit

      触发当前实例上的事件,附加参数都会传给监听器回调。(通常在子组件传递给父组件的时候使用)

      

    四、实例方法/生命周期

    1.vm.$mount

      如果 Vue 实例在实例化时没有收到 el 选项,则它处于 未挂载 状态,没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例

      如果没有提供 elementOrSelector 参数,模板将被渲染为文档之外的元素,并且你必须使用原生 DOM API 把它插入文档中

      这个方法返回实例自身,因而可以链式调用其他实例方法

    2.vm.$forceUpdate()

      迫使 Vue 实例重新渲染,注意它仅仅影响实例本身和插槽内容的子组件,而不是所有子组件

    3.vm.$nextTick()

      将回调延迟到下次 DOM  更新循环之后执行,在修改数据之后立即使用它,然后等待 DOM 更新,它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上

    4.vm.$destroy()

      完全销毁一个实例。清理它与其他实例的连接,解绑它的全部指令及事件监听器。

      触发 beforeDestroy 和 destroyed 的钩子

      在大多数场景中不应该调用这个方法,通常使用 v-if v-for 指令以数据驱动的方式控制子组件的生命周期

  • 相关阅读:
    C# EPPlus 导出Excel
    NetCore +EF+Mysql 从数据库生成实体类到项目
    VBA链接SQL server数据库
    sqlserver中的 binary varbinary image
    sql server DateTime与DateTime2的区别
    Sql Server增删改查字段的语法
    c#中queue的用法
    Sql Server中不相关的两个数据表的全部显示
    IActionResult的返回值类型
    linux内存映射
  • 原文地址:https://www.cnblogs.com/zhangning187/p/vueslzjzn.html
Copyright © 2011-2022 走看看