vue初学-工程搭建

作者: 普通的一个程序员 | 来源:发表于2020-12-14 20:53 被阅读0次

使用工具微软 vscode开发

下载vue的开发版本

https://cn.vuejs.org/v2/guide/installation.html

导入js

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Demo1</title>
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        test
    </body>
</html>

第一个应用

每个Vue的应用都是通过Vue创建一个Vue实例开始，在创建Vue对象的时候，可以传入一个对象。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Demo1</title>
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        
        <div id="app">
            <!-- 获取变量的值 -->
            {{message}}
        </div>

        <script type="text/javascript">
            var app = new Vue({
                el: "#app",  // 元素的id
                data: {
                    // 变量值
                    message: "Hello Word"
                }
            })
        </script>
    </body>
</html>