第一个简单的Vue程序

浅浅的花香味﹌ 2023-01-04 10:22 174阅读 0赞

### 第一个简单的Vue程序 ###

*  第一个简单的Vue程序
 *   *  1.准备工作
     *   *  1.1下载VScode
         *  1.2开始使用VSCode
         *  1.3编写第一个HTML文件
         *  1.4下载插件，方便使用
     *  2.编写第一个Vue程序
     *   *  2.1编写正常的html文件
         *  2.2去官网复制Vue开发版的链接
         *  2.3完整代码展示
         *  2.4测试

# 第一个简单的Vue程序 #

## 1.准备工作 ##

### 1.1下载VScode ###

官网地址：[https://code.visualstudio.com/][https_code.visualstudio.com]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70]

### 1.2开始使用VSCode ###

在电脑上创建一个工作区文件夹，然后点击VSCode的文件→将工作区另存为，然后找到你的文件夹，并且命名就行了。  
下次打开VSCode的时候想打开那个文件区就点击文件→打开文件区，就可以了。

### 1.3编写第一个HTML文件 ###

点击下图所以的按钮，可以新建文件，然后输入文件名比如test.html就可以了。  
![在这里插入图片描述][20210109130307104.png]

快速编写html文件的格式，英文输入法下输入!然后按下tap键  
![在这里插入图片描述][20210109130514519.png]  
然后按下tap  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70 1]

### 1.4下载插件，方便使用 ###

点击左边那一列的最下面那个按钮，然后搜索右边的三个插件，点击install安装就行，然后重启就有作用了。  
第一个插件是汉化包  
第二个插件是保存代码之后就可以随时更新页面  
第三个插件是安装之后就可以按下alt+B就可以快速在浏览器上打开页面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70 2]  
点击插件的小齿轮，然后选择拓展设置，就可以设置默认的浏览器了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70 4]

## 2.编写第一个Vue程序 ##

### 2.1编写正常的html文件 ###

按照上面的描述，编写一个平常的html文件即可。

### 2.2去官网复制Vue开发版的链接 ###

官网：[https://cn.vuejs.org/][https_cn.vuejs.org]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70 6]

### 2.3完整代码展示 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>3136848</title>
    </head>
    <body>
        <div id="app">
            { { message}}       //页面主题内容
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  //Vue的开发版链接
        <script>
            var app=new Vue({    //Vue渲染页面
                el:"#app",  //绑定id为app的元素
                data:{       //将内容赋值到相应的元素
                    message:"1234565" 
                }
            })
        </script>
    </body>
    </html>

### 2.4测试 ###

按下alt+B  
![在这里插入图片描述][20210109131610142.png]

[https_code.visualstudio.com]: https://code.visualstudio.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70]: /images/20221119/d694c8e232dd41c59d218ea344dbb2c7.png
[20210109130307104.png]: https://img-blog.csdnimg.cn/20210109130307104.png
[20210109130514519.png]: https://img-blog.csdnimg.cn/20210109130514519.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210109130532376.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210109130643928.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210109130935914.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210109130959225.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ==,size_16,color_FFFFFF,t_70
[https_cn.vuejs.org]: https://cn.vuejs.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210109131151758.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20210109131225562.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ==,size_16,color_FFFFFF,t_70
[20210109131610142.png]: https://img-blog.csdnimg.cn/20210109131610142.png