vue内置指令

Yunjinismine

于 2024-05-05 22:48:52 发布

阅读量287

点赞数 5

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Yunjinismine/article/details/138476156

版权

内置指令：

v-text指令:

1.作用:向其所在的节点中渲染文本内容。

2.与插值语法的区别:v-text会替换掉节点中的内容，{{xx}}则不会。

3.不会解析标签

v-html指令:

1.作用:向指定节点中渲染包含html结构的内容。

2.与插值语法的区别:

(1).v-html会替换掉节点中所有的内容,{{xx}}则不会。

(2).v-html可以识别htm1结构。

3.严重注意:v-html有安全性问题!!!

(1).在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。

(2).一定要在可信的内容上使用v-htm斗，永不要用在用户提交的内容上!

v-cloak指令（没有值）: 1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak国性。

2.使用css（[v-cloak]{display:none}）配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

v-once指令(只能使用一次):

1.v-once所在节点在初次动态渲染后，就视为静态内容了。

2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

v-pre指令:

1.跳过其所在节点的编译过程。

2.可利用它跳过:没有使用指令语法、没有使用插值语法的节点，会加快编译。

生命周期：

1、setup : 开始创建组件，在 beforeCreate 和 created 之前执行，创建的是 data 和 method

2、onBeforeMount() : 组件挂载到节点上之前执行的函数；

3、onMounted() : 组件挂载完成后执行的函数；

4、onBeforeUpdate(): 组件更新之前执行的函数；

5、onUpdated(): 组件更新完成之后执行的函数；

6、onBeforeUnmount(): 组件卸载之前执行的函数；

7、onUnmounted(): 组件卸载完成后执行的函数；

8.又名:生命周期回调函数、生命周期函数、生命周期钩子。

9.是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数。

10.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。

11.生命周期函数中的this指向是vm或组件实例对象。

父子组件嵌套生命周期执行顺序：
1.初始化与挂载生命周期的顺序
父组件beforeCreate => 父组件created => 父组件beforeMount =>

子组件beforeCreate => 子组件created => 子组件beforeMount =>

子组件mounted => 父组件mounted

父组件的生命周期到虚拟DOM挂载后开始执行子组件的生命周期，最后在执行父组件的真实DOM挂载

2.父子组件更新前后生命周期的顺序
父组件beforeUpdate => 子组件beforeUpdate =>子组件updated => 父组件updated

为了保证父组件的视图与子组件的数据同步，Vue 在子组件数据变化后先触发父组件的生命周期钩子函数，然后再更新子组件的视图

3.父子组件销毁前后生命周期的顺序
父组件beforeDestroy => 子组件beforeDestroy =>子组件destroyed => 父组件destroyed

当子组件全部销毁完成后，才会开始销毁父组件。这是为了确保子组件中的任何相关的依赖和引用在销毁父组件时不会出现问题。

示例：

<body>
    <div id="app">
        <p>{{message}}</p>
        <button @click="changeMsg">改变</button>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'hello world'
        },
        methods: {
            changeMsg () {
                this.message = 'goodbye world'
            }
        },
        beforeCreate() {
            console.log('------初始化前------')
            console.log(this.message)
            console.log(this.$el)
        },
        created () {
            console.log('------初始化完成------')
            console.log(this.message)
            console.log(this.$el)
        },
        beforeMount () {
            console.log('------挂载前---------')
            console.log(this.message)
            console.log(this.$el)
        },
        mounted () {
            console.log('------挂载完成---------')
            console.log(this.message)
            console.log(this.$el)
        },
        beforeUpdate () {
            console.log('------更新前---------')
            console.log(this.message)
            console.log(this.$el)
        },
        updated() {
            console.log('------更新后---------')
            console.log(this.message)
            console.log(this.$el)
        }
    })
</script>

Yunjinismine

关注

5
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
vue内置指令

父组件beforeDestroy => 子组件beforeDestroy =>子组件destroyed => 父组件destroyed。父组件beforeUpdate => 子组件beforeUpdate =>子组件updated => 父组件updated。为了保证父组件的视图与子组件的数据同步，Vue 在子组件数据变化后先触发父组件的生命周期钩子函数，然后再更新子组件的视图。父组件的生命周期到虚拟DOM挂载后开始执行子组件的生命周期，最后在执行父组件的真实DOM挂载。
复制链接

扫一扫