vue 的一些不常用指令和方法的总结

生命周期钩子

beforeCreate / created
beforeMount / mounted
beforeUpdate / updated
beforeDestroy / destroyed

文本

通过使用 v-once 指令，能够执行一次性地插值，当数据改变时，插值处的内容不会更新。但这会影响到该节点上的其它数据绑定：

<span v-once>这个将不会改变: {{ msg }}</span>

v-html

站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。只能对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

属性

属性、计算属性、过滤器

<div class="app">
    {{ a }} --- {{ addA }} --- {{ a | filterA }}
</div>
    <script>
        let vm = new Vue({
            el:'.app',
            data:{// 属性
                a:10
            },
            computed:{// 计算属性
             addA(){
                 return this.a + 10;
             }
            },
            filters:{// 过滤器
                filterA(data){
                    return data + 100;
                }
            }
        })
    </script>

watch监听属性

观察和响应 Vue 实例上的数据变动：侦听属性。

key

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。可以使用 v-bind 来绑定动态值key

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>