Vue入门介绍

雨点打透心脏的1/2处 2024-03-27 11:04 53阅读 0赞

### 一、背景 ###

目前前端主流框架有Vue、react、Angular等，其中Vue简单易学，只要稍微会点HTML、CSS、JavaScript基础就能很快上手Vue，其门槛低，上手速度快的特点，深受测试开发同学喜爱，已逐渐成为测开必备的前端知识技能。网上很多测开开源的框架前端也都是采用Vue实现的，因此如果打算往测开方向发展的同学，学习Vue势在必行。

### 二、创建第一个Vue项目 ###

###### 1、安装Node.js ######

Vue框架是基于Node.js运行的，因此如果你电脑上没有安装过，第一步先下载并安装Node.js。下载地址：[http://nodejs.cn/download/][http_nodejs.cn_download]

下载安装后检查是否安装成功：node -v

###### 2、安装Vue脚手架 ######

全局安装脚手架：npm install vue-cli -g  
![在这里插入图片描述][4943b4e6fe9c422a83e14e9a13559fee.png]  
安装完成后输入：vue -V, 如果出现相应的版本号，则说明安装。

创建一个基于 webpack 模板的新项目: vue init webpack my-project  
![在这里插入图片描述][9217ff43d2424875be33eafe507107b6.png]  
进入项目，安装并运行：

$ cd my-project
    $ cnpm install
    $ cnpm run dev

成功执行以上命令后访问 http://localhost:8080/，页面显示如下：  
![在这里插入图片描述][602ce4f029f6442eb332ef44646b8874.png]

### 三、Vue项目目录结构 ###

进入Vue项目目录，你会发现下面有很多的文件夹，具体每个文件夹的作用是什么呢？可以参看下图理解：

![在这里插入图片描述][aee92f80499a49d2b575b8ca2d4e5566.png]  
编程过程中使用最频繁的是：

components目录：存放页面组件，在此目录下创建开发新的页面组件
    router目录：index.js，页面组件开发完成后，需要为组件设置访问路径

### 四、Vue双向数据绑定 ###

双向数据绑定是Vue的特点之一，什么是双向数据绑定呢？双向数据绑定：当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化：

![在这里插入图片描述][2012d3cc86a6446bb0f8a0a353ee094c.png]  
为了更好的理解，我们先看看单向数据绑定时的代码是怎样的：

<input type="text" id="vendorId" value="1" name="vendorId" placeholder="请输入商家ID">
    <input type="text" id="storeId" value="12" name="storeId" placeholder="请输入门店ID">
    
    //script里面获取视图文本框的值：
    var vendorId = document.getElementById("vendorId");
    var storeId = document.getElementById("storeId");
    
    //将值组装成后端接口入参：
    var params={
        "vendorId":vendorId, "storeId":storeId};
    
    //script里面修改视图文本框的值：
    vendorId.value="3"
    storeId.value="66"

而双向数据绑定的写法如下，可以看出代码量少了很多：

<el-input v-model="form.vendorId" placeholder="请输入商家ID"/>
    <el-input v-model="form.storeId" placeholder="请输入门店ID"/>
    //script里面定义视图文本框的值，并且自动装填到了data入参，值一旦修改，视图文本框的值自动修改：
      data() {
        
        return {
        
          form: {
        
            vendorId: '1',
            storeId:'12'
          }

单向数据绑定的优点：单向数据流，这样做的好处是所有状态变化都可以被记录、跟踪，状态变化通过手动调用通知，源头易追溯，没有“暗箱操作”。同时组件数据只有唯一的入口和出口，使得程序更直观更容易理解，有利于应用的可维护性。缺点：代码量会相应的上升，数据的流转过程变长，从而出现很多类似的样板代码，会显得啰嗦及繁琐。目前使用单项数据绑定的框架主要有React。

双向数据绑定的优点：在表单交互较多的场景下，会简化大量业务无关的代码。缺点：由于都是“暗箱操作”，我们无法追踪局部状态的变化(虽然大部分情况下我们并不关心)，潜在的行为太多也增加了出错时debug的难度。同时由于组件数据变化来源入口变得可能不止一个，新手玩家很容易将数据流转方向弄得紊乱，如果再缺乏一些“管制”手段，最后就很容易因为一处错误操作造成应用雪崩。

双向数据绑定最经常的应用场景就是表单了，这样当用户在前端页面完成输入后，不用任何操作，我们就已经拿到了用户的数据存放到数据模型中了。目前。实现双向数据绑定的前端框架主要有AngularJS，VueJS等。

==============================================================================  
以上就是本次的全部内容，都看到这里了，如果对你有帮助，麻烦点个赞+收藏+关注，一键三连啦~

欢迎关注下方我的公众号：程序员杨叔，各类文章都会第一时间在上面发布，持续分享全栈测试知识干货，你的支持就是作者更新最大的动力~

[http_nodejs.cn_download]: http://nodejs.cn/download/
[4943b4e6fe9c422a83e14e9a13559fee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/1db687ece54541cc9cdec048ffcdf3c8.png
[9217ff43d2424875be33eafe507107b6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/442bdfdfa79c45138e759a58360c8967.png
[602ce4f029f6442eb332ef44646b8874.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/f7b99dee23fc4037b9d0dcd1765326ea.png
[aee92f80499a49d2b575b8ca2d4e5566.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/c092027b36a643999868a8cc3587964e.png
[2012d3cc86a6446bb0f8a0a353ee094c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/c50f9ae270924664b6c772f52d913c70.png