Vue学习笔记04-钩子函数

前言:
钩子函数就是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请求。
发布了60 篇原创文章 · 获赞 2 · 访问量 708
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览