Vue.js 的基本使用

W.Y.B.G

已于 2023-09-18 00:22:37 修改

阅读量77

点赞数 2

文章标签： vue.js 前端 javascript

于 2023-09-07 22:17:49 首次发布

本文链接：https://blog.youkuaiyun.com/qq_33365152/article/details/132747246

版权

创建默认`package.json`文件

npm init -y

安装 `Vue@2.2.4`

npm install vue@2.2.4

完整示例代码，如下：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue-study</title>
</head>

<body>
    <!-- 2、Vue 控制的DOM结构 -->
    <div id="app">
        {{ msg }}
    </div>
    <!-- 1、导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 -->
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        // 3、创建 Vue 的实例对象
        const vm = new Vue({
            // el 属性是固定的写法，表示当前 vm 实例要控制页面上的那个区域，接受的值是一个选择器
            el: '#app',
            // data 对象就是要渲染到页面上的数据
            data: {
                msg: '欢迎使用 Vue.js 前端框架！'
            }
        })
    </script>
</body>
</html>