Vue基础语法

2022-05-12 20:31:07 作者：互联网

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标签,会正常解析

标签：Vue,vue,插值,text,app,基础,语法,html
来源： https://www.cnblogs.com/coisini123/p/16264140.html