Vue.js的第一篇HelloWorld（基础架构）

最新推荐文章于 2024-02-14 16:53:09 发布

Ctrl Alt Shift

最新推荐文章于 2024-02-14 16:53:09 发布

阅读量176

点赞数

分类专栏： Web 前端文章标签： vue

本文链接：https://blog.csdn.net/weixin_42676530/article/details/104195715

版权

Web 前端专栏收录该内容

31 篇文章 1 订阅

订阅专栏

先在Vue.js的官网上下载文件：https://cn.vuejs.org/v2/guide/installation.html
上模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloWorld</title>
</head>
<body>
<div id="test">
    <h1>{{ 1+1 }}</h1> <!--Vue的解析渲染语法{{}}-->
    <h1>{{ 'hello' + 'world' }}</h1>
    <h1>{{ message }}</h1> <!-- 绑定的数据成员必须初始化到data选项中，内容名字要一致 -->
</div>
<script src="../vue.js"></script>
<script>
    // 得到 Vue实例 !
    const test = new Vue({
        el:'#test',//el,告诉Vue管理模板的入口节点
        data:{ //data中的数据被称之为响应式数据
            message:'Hello Vue.js!'
        }
    })
</script>

</body>
</html>