WEB前端：vuejs全家桶（4）：第一个VueJs程序

原创于 2019-11-06 11:04:50 发布 · 161 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vuejs

vuejs 专栏收录该内容

40 篇文章

订阅专栏

本文介绍了如何使用Vue.js框架创建动态网页，通过简单的代码示例展示了如何在HTML页面中嵌入Vue实例，并实现数据绑定。示例中，'Hello Vue!'的信息被动态地展示在页面上，展示了Vue.js的基本用法。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <title>vuejs001</title>
    <script src="js/vue.js"></script>

</head>

<body>
    <div id="app">
        {{ message }}
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>

</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <title>vuejs001</title>
    <script src="js/vue.js"></script>
    <script>
        window.onload = function() {
            var app = new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue!!!!!'
                }
            })
        }
    </script>

</head>

<body>
    <div id="app">
        {{ message }}
    </div>
</body>


</html>