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 @   KimiRaikkonen  阅读(20)  评论(0)  编辑  收藏  举报
相关博文：
· 组件相互之间的信息传输
· Vue新建项目及基础
· vue基础语法
· Vue的入门——基本语法（上）
· Vue基础知识一
阅读排行：
· 终于写完轮子一部分：tcp代理 了，记录一下
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
点击右上角即可分享
微信分享提示