Vue——生命周期

誰言秋桜

已于 2023-02-17 20:57:58 修改

阅读量92

点赞数

分类专栏：学习笔记 js html 文章标签： vue.js javascript 前端

于 2023-02-16 23:15:01 首次发布

本文链接：https://blog.csdn.net/weixin_64948861/article/details/129070445

版权

学习笔记同时被 3 个专栏收录

31 篇文章 0 订阅

订阅专栏

22 篇文章 0 订阅

订阅专栏

html

11 篇文章 0 订阅

订阅专栏

字体显示，淡出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2 :style="{opacity}">欢迎来到湖南</h2>
    </div>
</body>
<script> 
    const vm = new Vue({
        el:'#root',
        data:{
            opacity:1
        }
    })
   setInterval(()=>{
    vm.opacity -= 0.01
    if(vm.opacity <= 0) vm.opacity = 1
   },16)
</script>
</html>

报错

vue.js:5108 [Vue warn]: Error compiling template:

invalid expression: Unexpected token '{' in

    {{opactiy}}

  Raw expression: :style="{{opactiy}}"


1  |  <div id="root">
2  |          <h2 :style="{{opactiy}}">欢迎来到湖南</h2>
   |              ^^^^^^^^^^^^^^^^^^^^
3  |      </div>

(found in <Root>)
warn$2 @ vue.js:5108
:5500/favicon.ico:1          Failed to load resource: the server responded with a status of 404 (Not Found)




//翻译

vue.js:5108[vue warn]：编译模板时出错：

无效表达式：中的意外标记“｛”

{不透明}}

原始表达式：：style=“｛｛opacty｝｝”

1 |<div id=“root”>

2|<h2:style=“｛｛opacty｝”>欢迎来到湖南</氢气>

| ^^^^^^^^^^^^^^^^^^^^

3 |</div>

（在<Root>中找到）

警告$2@vue.js:5108

：5500/favicon.ico:1加载资源失败：服务器响应状态为404（未找到）

改正：

<h2 :style="{opacity}">欢迎来到湖南</h2>

生命周期的8个元素：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h2>当前的值是：{{n}}</h2>
        <button @click="add">点击n+1</button>
        <button @click="by">点击销毁</button>
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        // template:`<h2>当前的值是：{{n}}</h2>
        // <button @click="add">点击n+1</button>`,//此处为模板，``符合可以换行，''不可以换行，模板内容需要一行写完
        //template:`<div>
        // <h2>当前的值是：{{n}}</h2>
        //  <button @click="add">点击n+1</button>
        //</div>`, //不能有两个节点，只能有一个根元素
        data: {
            n: 1
        },
        methods: {
            add() {
                this.n++
            },
            by() {
                this.$destroy();  //销毁一个vue实例，解绑它所有的自定义的事件监听器和全部指令
            }
        },
        watch: {
            n() {
                console.log('n暴力');
            }
        },
        beforeCreate() {
            console.log('beforeCreate');
        },
        create() {
            console.log('create');
        },
        beforeMount() {
            console.log('beforeMount');
        },
        mounted() {
            console.log('mounted')
        },
        beforeUpdate() {
            console.log('beforeUpdate');  //数据页面不同步
        },
        updated() {
            console.log('updated')   //数据页面同步
        },
        beforeDestroy() {
            console.log('beforeDestroy')
        },
        destroyed() {
            console.log('destroyed')
        },
    })
</script>

</html>
<!--
    vm的生命周期：
             将要创建 ===>   调用beforeCreate函数
             创建完毕 ===>   调用create函数
             将要挂载 ===>   调用beforeMount函数
             （重要）挂载完毕 ===>   调用mounted函数  ===========【重要的钩子】
             将要更新 ===>   调用beforeUpdate函数
             更新完毕 ===>   调用updated函数
             （重要） 将要销毁 ===>   调用beforeDestroy函数  ===========【重要的钩子】
             销毁完毕 ===>   调用destroyed函数
             
    张三的一生：
    将要出生
    （重要） 呱呱坠地  ===> 检查身体各项指标
    学会说话
    学会走路
    。。。。。
    。。。。。
    （重要）将要永别  ===> 交代后事
    已经永别
-->

总结：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<!--
    总结：
    常用的生命周期钩子：
    1：mounted，发送Ajax请求、启动定时器，解绑自定义事件、订阅消息等（初始化操作）
    2：beforeDestroy：清除定时器，解绑自定义事件、取消订阅消息等（收尾工作）

    关于销毁vue实例：
    1：销毁后借助vue开发工具看不到任何信息
    2：销毁后自定义事件会失效，但原生DOM事件依然有效
    3：一般不会再beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了
-->
<body>
    <div id="root">
        <h2 :style="{opacity}">欢迎来到湖南</h2>
        <button @click="stop">停止变化</button>
    </div>
</body>
<script>
    const vm = new Vue({
        el: '#root',
        data: {
            opacity: 1
        },
        methods: {
            stop(){
               this.$destroy();
            }
        },
        //vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
        mounted() {
            this.timer = setInterval(() => {
                this.opacity -= 0.01
                if (this.opacity <= 0) this.opacity = 1
            }, 16)
        },
        beforeDestroy() {
            console.log('vm即将没了');
            clearInterval(this.timer)
        },
    })

</script>

</html>

誰言秋桜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue——生命周期

head>--总结：常用的生命周期钩子：1：mounted，发送Ajax请求、启动定时器，解绑自定义事件、订阅消息等（初始化操作）2：beforeDestroy：清除定时器，解绑自定义事件、取消订阅消息等（收尾工作）关于销毁vue实例：1：销毁后借助vue开发工具看不到任何信息2：销毁后自定义事件会失效，但原生DOM事件依然有效3：一般不会再beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了-->
复制链接

扫一扫