vue-demo

最新推荐文章于 2024-08-16 07:37:03 发布

最懒的胖子

最新推荐文章于 2024-08-16 07:37:03 发布

阅读量75

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/sinat_36270007/article/details/119305449

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

vue案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--交给了vue去管理-->
<!--可以做到前端和数据完全分离，只需要写html代码-->
<div id ="app">
    <h1>{{name}}</h1>
    <h1>{{message}}</h1>
    <h1>{{age}}</h1>
</div>

<!--没有交给vue管理，所以{{message}}会取不到Vue对象中的message-->
<div>{{meaasge}}</div>
<script src="../js/vue.js"></script>
<script>
    // let是变量，const是常量，const定义的不能被修改
    //编程范式：声明式编程，当我的示例帮你管理div时，你只需要声明变量，且绑定内容即可
    const app = new Vue({
        el:'#app',//用于挂在要管理的元素
        data:{ // 定义数据
            message:'hello vue',
            name:'zhangsan',
            age:20
        }
    })
</script>
</body>
</html>