Vue学习笔记04-钩子函数

最新推荐文章于 2024-04-22 15:28:53 发布

doublewe

最新推荐文章于 2024-04-22 15:28:53 发布

阅读量207

点赞数

分类专栏： Vue学习笔记文章标签： vue js javascript java vue.js

本文链接：https://blog.csdn.net/qq_42062052/article/details/103982058

版权

Vue学习笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

前言：
钩子函数就是Vue对象在某些特定阶段，会去自动执行的函数，如下图所示:
在这里插入图片描述

比如，当Vue对象初始化完成后，会调用created()方法并执行。

2.和data、methods同级的位置，创建函数created():

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="num">
        <input type="button" value="点我加1" v-on:click="addone">
        <h1>大家好，我是{{name}}，我有{{num}}块钱！！！</h1>

    </div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    //创建Vue实例
    const app = new Vue({
        el: "#app",    //根据名称操作div,作用域只在该div
        data: {
            name: "weiwei",
            num: 100
        },
        methods:{
            addone(){
                this.num++;
                this.addtwo();
            },
            addtwo(){
                this.num = this.num + 2;
            }
        },
        created(){
            console.log("weiwei");
        }

    });
</script>
</html>

3.我们无需去调用它，它会自己在特定情况下执行：

打开浏览器控制台看看是否会打印字符串weiwei。
测试成功。
我们通常可以在该方法里面发送ajax请求。

doublewe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记04-钩子函数

前言：钩子函数就是Vue对象在某些特定阶段，会去自动执行的函数，如下图所示:比如，当Vue对象初始化完成后，会调用created()方法并执行。2.和data、methods同级的位置，创建函数created():<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"...
复制链接

扫一扫