创建第一个Vue实例

浩平凡的梦

已于 2023-11-29 21:18:20 修改

阅读量41

点赞数 1

文章标签： vue.js 前端 javascript

于 2023-11-29 21:03:50 首次发布

本文链接：https://blog.csdn.net/2301_76792945/article/details/134699084

版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>第一个Vue实例 Hello World</title>

</head>



<body>

    <div class="wrap">

        {{ message }}    <!-- 这是差值表达式，{{ Vue实例中data中的数据名称 }} -->

    </div>



    <!-- 引入vue的js文件，一般采用下载之后使用相对路径 -->

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



    <!-- 对于制作原型或学习，你可以这样使用最新版本： -->

    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script> -->



    <!-- 对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏： -->

    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script> -->



    <!-- vue2官网，可以到此网站下载安装Vue.js -->

    <!-- https://v2.cn.vuejs.org/v2/guide/installation.html -->



    <!-- 引入Vue.js文件之后就可以创建Vue实例了 -->

    <script>

        new Vue({

            /*

                el:(element) 是获取控制 Vue 盒子的元素 (在 Vue 中一个页面必须有且只能有                      
                一个盒子在最外层)

                后面就是跟原生js中的 document.querySelector() 一样

            */

            el:'.wrap',

            data: {

                // data里面放的是数据，都是以 key : value 的形式出现的

                message:'HelloWrold'

            }

        })

    </script>

</body>

</html>