vue.js框架 1（vue开始上手）

傷城~ 2023-10-08 12:07 24阅读 0赞

#### vue.js框架 ####

*   *  写在前面
     *   *  1、开始上手
         *  2、MVVM理解
         *  3、解析vue实例
         *  4、使用HBuilder创建vue项目

### 写在前面 ###

vue菜鸟教程

> https://www.runoob.com/vue2/vue-install.html

#### 1、开始上手 ####

vue下载地址

> https://vuejs.org/js/vue.min.js

打开是vue的代码，复制直接存在新建js文件里  
![在这里插入图片描述][20200313133013302.png]  
在vue.js同目录里面创建一个1.html  
![在这里插入图片描述][20200313132954382.png]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <script src="vue.js"></script>
    </head>
    <body>
    <div id="app">
      <p>{
       { message }}</p>
    </div>
    
    <script>
    new Vue({
         
      el: '#app',
      data: {
         
        message: '你好vue.js!'
      }
    })
    </script>
    </body>
    </html>

运行html：一个最简单的vue项目就完成了  
![在这里插入图片描述][20200313133105133.png]

#### 2、MVVM理解 ####

在前端开发中，MVVM 是将View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开，来应对复杂的页面开发。  
![在这里插入图片描述][20200313134007522.png]  
mvvm其实是MVC 的改进版，但要注意mvvn是前端思想、mvc是后端开发思想。

#### 3、解析vue实例 ####

<div id="app">
      <p>{
       { message }}</p>
    </div>
    
    <script>
    new Vue({
      el: '#app',
      data: {
        message: '你好vue.js!'
      }
    })

*  el：表示当前new的这个实例，要控制页面哪个区域
 *  data：\{ \} 存放el中要用到的数据，是键值对类型

> 注意：vue不提倡手动操作DOM元素

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70]

#### 4、使用HBuilder创建vue项目 ####

源教程地址：

> https://www.jianshu.com/p/bf51c5c311a3

HBuilder下载地址

> https://download.dcloud.net.cn/HBuilderX.2.6.1.20200226.zip

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 1]  
注意，这里创建目录不要有中文，选择模板选vue第二个，不要选成普通模板![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 2]![在这里插入图片描述][20200313152349547.png]  
vue需要node.js支持，下载地址：

> https://nodejs.org/en/download/

下载完成直接安转就ok

接下来配置node.js  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 3]  
配置完node后重启一下HBuilder

安装内置终端  
![在这里插入图片描述][20200313150346177.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 4]  
编译  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 6]  
运行  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 8]  
到浏览器访问：http://localhost:8080/  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 9]

[20200313133013302.png]: https://img-blog.csdnimg.cn/20200313133013302.png
[20200313132954382.png]: https://img-blog.csdnimg.cn/20200313132954382.png
[20200313133105133.png]: https://img-blog.csdnimg.cn/20200313133105133.png
[20200313134007522.png]: https://img-blog.csdnimg.cn/20200313134007522.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200313135353608.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020031314264248.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200313153155574.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[20200313152349547.png]: https://img-blog.csdnimg.cn/20200313152349547.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200313155355881.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[20200313150346177.png]: https://img-blog.csdnimg.cn/20200313150346177.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200313150658532.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200313152611548.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200313152724728.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200313153834772.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200313160131662.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200313160108410.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70