初学vue的第一个程序

最新推荐文章于 2024-06-14 23:28:14 发布

独角戏top

最新推荐文章于 2024-06-14 23:28:14 发布

阅读量73

点赞数

文章标签： vscode html vue.js

本文链接：https://blog.csdn.net/qq_45812369/article/details/120142902

版权

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>

一个最简单的vue使用就完成了
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

独角戏top

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初学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=
复制链接

扫一扫