• 看了vue文档之后。。。。


    • 对于任何复杂逻辑,你都应当使用计算属性

    • 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不能检测到的数组变化:

    1. 直接利用索引修改某项;
    2. 修改数组长度

    如何能让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 根实例,也包括其组件树中的所有子组件的模板中。
  • 相关阅读:
    461. Hamming Distance
    342. Power of Four
    326. Power of Three
    368. Largest Divisible Subset java solutions
    95. Unique Binary Search Trees II java solutions
    303. Range Sum Query
    160. Intersection of Two Linked Lists java solutions
    88. Merge Sorted Array java solutions
    67. Add Binary java solutions
    14. Longest Common Prefix java solutions
  • 原文地址:https://www.cnblogs.com/endymion/p/9627679.html
Copyright © 2020-2023  润新知