Vue--学习笔记一

数组的变异（能改变原数组）

(pop push unshitf shift splice reverse sort )

indexOf lastIndexof concat slice

## forEach filter map some every reduce (includes find ES6)

1.当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的。也就是说如果你添加一个新的属性。

那么对 b 的改动将不会触发任何视图的更新。如果你知道你会在晚些时候需要一个属性，但是一开始它为空或不存在，那么你仅需要设置一些初始值。

这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。

**************************************************************************************************************************************

vue实例里面的this 都指向 vue实例本身，注意vue里面使用() = > ES6的箭头函数 this很可能与你预期的结果不一样

箭头函数的this 是指向父级的上下文在fun:() = > 的情况下变成fun函数同级，this很可能变成了window

***********************************************************************************************************************************

生命周期钩子：https://segmentfault.com/a/1190000008010666

计算属性：模板内之内放一条表达式，如果要对数据进行较复杂的逻辑，建议使用计算属性（computed）;

如果计算属性是依赖于this.data,那么但第一次运算完就会缓存起这个值，而不会每次都要运算，并且这个值是依赖于data，但data改变时，也会改变。

监听（watch）: 监听某个属性，但值发生改变时，调用。

计算属性默认只有get方法：也可以自己添加set方法；例：

computed: {
  fullName: {
    get: function () {
    },
    set: function (newValue) {
    }
  }
}
// ...

现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，fullName会相应地被更新。

条件渲染：v-if v-else-if v-show

v-show是把元素渲染到页面只是使用了隐藏，而v-if是真正的没有渲染进来。

v-for和v-if在同一元素上， v-for优先级更高。

用条件渲染在多个标签之间切换。Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

这样 input框的内容会被保留下来。

如果你不想复用的话，在不同地方使用

key="username-input"

标识出不使用同一个。

列表渲染：

生命周期钩子：https://segmentfault.com/a/1190000008010666

猜你喜欢