vue基础语法

1.钩子函数

钩子函数, 其实就是Vue提前定义好的事件

语法：

<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,值为"aaa"
            data:{
                name:"aaa"
            }
        });
    </script>
</body>
</html>

 

3.显示数据(v-text和v-html)

​ v-text和v-html专门用来展示数据, 其作用和插值表达式类似。v-text和v-html可以避免插值闪烁问题.

​ 插值闪烁: 在数据未加载完成时，页面会显示出原始的{{}}, 过一会才会展示正常数据.

v-text：把数据当作纯文本显示.

v-html：遇到html标签,会正常解析

posted @ 2022-05-11 16:59  clearlove3  阅读(28)  评论(0)    收藏  举报