[JavaScript知识库] 初学vue的第一个程序

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 初学vue的第一个程序 -> 正文阅读

[JavaScript知识库]初学vue的第一个程序

1. 编辑器的下载和环境的搭建

我用的是vscode
下载地址
安装的话都是中文很方便

2. 插件安装

在这里插入图片描述

3. 第一个vue实例

在这里打开或新建一个html文件
在这里插入图片描述

<!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>vue实例</title>
</head>
<body>
    <div id="app">
        <!-- div标签  接收展示数据-->
        {{ message }} 
    </div>
    <!-- vue开发环境版本，包含了有帮助的命令行警告(相当于导入包) -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      var app = new Vue({
        el: '#app', //el挂载点指向id为app
        data: {
          message: 'Hello Vue!' //传入的数据
        }
    })
    </script>
</body>
</html>