Vue.js入门教程—快速起步(4)

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

未来之道

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

阅读量99

点赞数

分类专栏： Vue Vue入门教程文章标签： vue vue.js

本文链接：https://blog.csdn.net/tpzmz08/article/details/117261989

版权

Vue 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

Vue入门教程

7 篇文章 0 订阅

订阅专栏

Vue.js入门教程—快速起步(4)

文章目录

Vue.js入门教程—快速起步(4)
一、使用步骤

一、使用步骤

1. 安装Vue.js

打开webstorm项目执行

npm install vue
查看
执行完之后，在项目下会生成一个 node_modules/vue目录，结构如下：

2. 创建页面

在这里插入图片描述

3. 编写用例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="testApp">{{message}}</div>

<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
    new Vue({
        el: '#testApp', //元素名称id
        data: {
            message: 'Hello Vue!'
        }
    })
</script>
</body>
</html>