vue ---- vue 的入门程序

最新推荐文章于 2024-09-13 14:34:15 发布

悠闲的线程池

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量104

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44235759/article/details/121106862

版权

② vue 专栏收录该内容

47 篇文章 2 订阅

订阅专栏

入门程序

① 导入 vue.js 的 script 脚本文件
② 在页面中声明一个将要被 vue 所控制的 DOM 区域
③ 创建 vm 实例对象（vue 实例对象）

<body>
    <!-- 希望 Vue 能够控制下面这个 div，帮我们吧数据填充到 div 内部 -->
    <div id="app">{{ username }}</div>

    <!-- 1. 导入Vue的库文件, 在 window 全局就有了 Vue 这个构造函数 -->
    <script src="./lib/vue-2.6.12.js"></script>
    <!-- 2. 创建 Vue 的实例对象 -->
    <script>
        const vm = new Vue({
            //el 属性是固定的写法，表示 vm 实例要控制页面上的哪个区域，接收的值是一个选择器
            el: '#app',
            //data 要渲染的页面上的数据
            data: {
                username: 'zhangsan'
            }
        });
    </script>
</body>