04.创建hello案例

李白的故乡

已于 2022-05-23 15:52:49 修改

阅读量97

点赞数

分类专栏： Vue2

于 2022-05-23 11:15:31 首次发布

本文链接：https://blog.csdn.net/qq_45448242/article/details/124923730

版权

vue.js javascript 前端

Vue2 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Vue2

04.创建hello案例

创建一个hello.html文件，文件中代码如下：

<!DOCTYPE html>
<!-- 防止浏览器弹出翻译 -->
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello</title>
        <!-- 引入Vue，在根目录创建一个js文件夹，放入开发环境vue.js -->
        <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 创建一个容器,名字为app -->
    <div id="app">
        {{message}}
    </div>
</body>
    <script type="text/javascript">
        Vue.config.productionTip = false;//关闭生产提示
            
        //创建vue实例
        var app1 = new Vue({//app1是实例名字,因为是响应式的，在控制台通过app1.message即可更改页面内容
            el:'#app',//指定使用的容器
            data: {//存储数据，让容器使用
                message: 'Hello Vue!'
            },
        })
    </script>
</html>