Vue中的钩子函数和插值表达式例解

最新推荐文章于 2022-08-22 17:08:40 发布

Mands_

最新推荐文章于 2022-08-22 17:08:40 发布

阅读量674

点赞数

分类专栏：实用技巧干货文章标签： javascript vue.js es6 node.js jquery

本文链接：https://blog.csdn.net/Mands_/article/details/105327264

版权

实用技巧干货专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.钩子函数

概述： 钩子函数会在vue实例的各个生命周期阶段自动调用；具体有：beforeCreate，created,beforeMount,mounted,updated,beforeUpdate，destroyed，beforeDestroy

created钩子函数常用场景：用于初始化数据

钩子函数不要使用箭头函数的方式编写。

语法：

<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        //钩子函数created,该方法在页面显示之后,自动执行
        created() {
            console.log("created...");
        }
    });
</script>

2. 插值表达式

概述： 插值表达式用户把vue中所定义的数据,显示在页面上. 插值表达式允许用户输入"JS代码片段"

语法：{{ 变量名/对象.属性名 }}

案例：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue插值表达式</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>欢迎来到-->{{ name }}</h1>
    </div>
    <script type="text/javascript">
        //创建vue对象
        var app = new Vue({
            //让vue接管div标签
            el:"#app",
            //定义数据,里边包含一个属性name,值为"德莱联盟"
            data:{
                name:"德莱联盟"
            }
        });
    </script>
</body>
</html>

Mands_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中的钩子函数和插值表达式例解

1.钩子函数概述：钩子函数会在vue实例的各个生命周期阶段自动调用；具体有：beforeCreate，created,beforeMount,mounted,updated,beforeUpdate，destroyed，beforeDestroycreated钩子函数常用场景：用于初始化数据钩子函数不要使用箭头函数的方式编写。语法：<script type="text/jav...
复制链接

扫一扫

专栏目录