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: { |
现在再运行 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"
标识出不使用同一个。
列表渲染:
以上是 Vue--学习笔记一 的全部内容, 来源链接: utcz.com/z/375387.html