vue基础组件及知识

VUE
vue的实例属性
$data

Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问。

console.log(this.text === this.$data.text); //true
1$props

当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问,在子组件上使用

$el

Vue 实例使用的根 DOM 元素。在子组件上就是子组件的根DOM元素

$options

用于当前 Vue 实例的初始化选项。需要在选项中包含自定义属性时会有用处,直接修改$options.data的值不会更改数据，也不会触发视图渲染

$parent

父实例，如果当前实例有的话。

$root

当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。

const app = new Vue({})
this.$root === this.$root.$children[0].$root  // true
this.$root === app  //true
1
2
3
$children

当前实例的直接子组件。**需要注意 children并不保证顺序，也不是响应式的。∗∗如果你发现自己正在尝试使用‘children 并不保证顺序，也不是响应式的。**如果你发现自己正在尝试使用 `children并不保证顺序，也不是响应式的。∗∗如果你发现自己正在尝试使用‘children来进行数据绑定，考虑使用一个数组配合v-for` 来生成子组件，并且使用 Array 作为真正的来源。

$slots

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

在使用渲染函数书写一个组件时，访问 vm.$slots 最有帮助。

$scopedSlots

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

vm.$scopedSlots 在使用渲染函数开发一个组件时特别有用。

$refs

一个对象，持有注册过 ref特性的所有 DOM 元素和组件实例。

$isServer

当前 Vue 实例是否运行于服务器。用于服务端渲染

$attrs

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

$listeners

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

Vue实例方法
$watch( expOrFn, callback, [options] )

观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值

$on( event, callback )

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

$emit( eventName, […args] )

触发当前实例上的事件。附加参数都会传给监听器回调。

$once( event, callback )

监听一个自定义事件，但是只触发一次，在第一次触发之后移除监听器。

$forceUpdate()

不建议使用，频度控制不好容易造成内存溢出

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

如果更改在data中未声明的值，则不会触发视图更新，可以通过这个方法强制渲染，也可以通过$set避免这种情况

$off( [event, callback] )

移除自定义事件监听器。

如果没有提供参数，则移除所有的事件监听器；
如果只提供了事件，则移除该事件所有的监听器；
如果同时提供了事件与回调，则只移除这个回调的监听器。
$set( target, key, value )

Vue.set的别名

向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')

注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。

$delete( target, key, value)

Vue.delete的别名

删除对象的属性。如果对象是响应式的，确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到属性被删除的限制，但是你应该很少会使用它。

$nextTick([callback])

Vue的渲染是异步的

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 
Vue数据绑定
vue可以访问绑定在this上的变量，无法访问定义在实例外的全局变量

computed

计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是不会被更新的。

如果不指定set，那么默认提供的函数将被用作属性的getter函数

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // 仅读取
    aDouble: function () {
      return this.a * 2
    },
    // 读取和设置
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
vm.aPlus   // => 2
vm.aPlus = 3
vm.a       // => 2
vm.aDouble // => 4

watch

观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式，用一个函数取代。

 watch: {
    a: function (val, oldVal) {
      console.log( val, oldVal)
    }
 }

选项：deep

为了发现对象内部值的变化，可以在选项参数中指定 deep: true 。注意监听数组的变动不需要这么做。

当更改对象内部值时，vue的watch如果设置在整个对象上，那么将不会监听到变化，这时可以指定deep:true，但是这么做性能开销较大，因为每次对象中的任意一个值变化都会触发监听，可以在watch中直接监听内部值而不是整个对象

watch:{
    'obj.a':{
        get:function(){
     		//do something       
        }
    }
}

选项：immediate

在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调

只有在vue第一次触发数据更新后，监听函数才会执行，制定了immediate为true后，会在页面mouted后直接触发监听函数

Vue原生指令
v-show

根据表达式之真假值，切换元素的 display CSS 属性。

v-if

根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template> ，将提出它的内容作为条件块。

v-else v-else-if

限制：前一兄弟元素必须有 v-if 或 v-else-if。

v-for

基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression ，为当前遍历的元素提供别名

v-for="(item, index) in items" //item：元素，index：索引
如果遍历Object
v-for="(value, key, index) in object" //value：键值，key：键名，index：索引

key

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

<li v-for="(item,index)in items" :key="item.id">
</li>
1
2
v-on

修饰符：

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。