vue快速入门(一) 之第一个vue程序

最新推荐文章于 2024-07-24 12:54:56 发布

一口木桶饭

最新推荐文章于 2024-07-24 12:54:56 发布

阅读量197

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44415928/article/details/104894669

版权

vue 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

vue官网传送门vue官网
下面是第一个vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{message}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "welcome to vue!"
            }
        })
    </script>
</body>
</html>

其中的核心部分是这一块
在这里插入图片描述
首先第一行的哪个div是我们要显示的内容,现实的内容用{{message}}这个变量来替代,message的值呢,在下边我们new了一个Vue对象,里边的el表示选择的对象元素,他选择了id为app的一个标签,标签里边的内容呢就是message所代表的"welcome to vue!"
不只是div其他的只要是闭合的标签都可以使用
在这里插入图片描述
可以看到下边的这个name也可以显示出来