vue 初步使用

最新推荐文章于 2023-10-26 22:45:22 发布

啊呼,吖

最新推荐文章于 2023-10-26 22:45:22 发布

阅读量79

点赞数

CC 4.0 BY-SA版权

文章标签： webpack 前端 node.js vue.js

本文链接：https://blog.youkuaiyun.com/weixin_72647214/article/details/130197210

本文介绍了如何在项目中集成Bootstrap和Day.js，以及如何使用Vue.js创建实例并绑定数据到HTML元素。首先通过npm安装Bootstrap和Day.js，然后在HTML文件中引入它们的库文件。接着，创建Vue.js实例，指定控制的DOM元素，并展示如何在页面上显示数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

看视频都说看官网我看啥都看不懂

bootstrap.css

npm install bootstrap@3

然后node_modules

去翻bootstrap文件夹

dayjs.min.js

npm install dayjs --save

然后node_modules

去搜索 dayjs文件夹

vue.js

Vue.js 安装 | 菜鸟教程 (runoob.com)

创建文件

复制就好了

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
</head>

<body>
    <!-- 我们希望vue能够控制下面的这个div 帮我们把数据填充到div内部 -->
    <div id="app">{{ username }}</div>
    <!-- 3 通过vue语法 {{}} 两边加空格为了好看 -->

    <!-- 导入Vue的库文件  win全局就会有了vue这个构建函数-->
    <script src="./lia/vue.js"></script>
    <!-- 2 创建Vue的实例对象 -->
    <script>
        // 创建Vue的实例对象
        const vm = new Vue({
            // el属性是固定的写法,表示当前vm实例要控制页面上的哪个区域 接收的值的是一个选择器
            el: '#app',
            // data对象就说要渲染到页面上的数组
            data: {
                username: 'zhangsan'
                // 1到这里 数据有了username 写到声明区域也有了 div#app 
                // 2还差一个问题username内部渲染到div内部
            }
        })
    </script>
</body>

</html>