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

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>

你可能感兴趣的:(实用技巧干货,javascript,vue.js,es6,node.js,jquery)