-
对于任何复杂逻辑,你都应当使用计算属性
-
html中的双花之内的值不一定来自data:{},还有可能来自computed:{}
-
原数据改变,被绑定的计算属性也会改变
-
可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。
-
v-bind:class 指令也可以与普通的 class 属性共存
绑定的数据对象class不必内联定义在模板里 -
Vue 为你提供了一种方式来表达“这两个元素是完全独立的,不要复用它们”。只需添加一个具有唯一值的 key 属性即可:复用!复用!
-
一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
-
当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级。
-
在 v-for 块中,我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。
-
可以用 v-for 通过一个对象的属性来迭代,得到每个属性的值。第二个的参数做为键名,第三个参数为索引。
-
建议尽可能在使用 v-for 时提供 key。
-
当在组件中使用 v-for 时,key 现在是必须的。
-
vue不能检测到的数组变化:
- 直接利用索引修改某项;
- 修改数组长度
如何能让vue检测到这种变化呢?
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
vm.$set(vm.items, indexOfItem, newValue)
vm.items.splice(newLength)
- 使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性:
vm.$set(vm.userProfile, 'age', 27)
Vue.set(vm.userProfile, 'age', 27)
- 当它们处于同一节点,v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中。
- 有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法。
- v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
- 在文本区域插值 () 并不会生效,应用 v-model 来代替。
- v-model配select,第一个option要设为disabled value=""
- 使用自定义组件前,先new Vue一下根标签作为根实例。
- 一个组件的 data 选项必须是一个函数而不是对象
- 全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例,也包括其组件树中的所有子组件的模板中。