Vue入门案例

Posted myitnews

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue入门案例相关的知识,希望对你有一定的参考价值。

 

创建一个 .html 文件,然后通过如下方式引入 Vue:

<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

创建一个demo.html,在页面显示 "Hello Vue!":

<!DOCTYPE html>
<html>

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

    <body>
        <div id="app">
            {{ message }}
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: #app,
            data: {
                message: Hello Vue!
            }
        })
    </script>

</html>

 

以上是关于Vue入门案例的主要内容,如果未能解决你的问题,请参考以下文章

Vue3.js 全局组价案例入门

在IDEA 中使用 VUE + VUE 常用语法 + 入门案例实现

Vue入门案例

vue入门案例

vue.js 2.0 从入门到放弃 --- 入门案例

vue.js 入门案例