Vue入门

admin2024-06-11  1

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

1、安装Node.js

Vue框架是基于Node.js运行的,因此如果你电脑上没有安装过,第一步先下载并安装Node.js。

下载安装后使用命令检查是否安装成功:node -v

2、安装Vue脚手架

全局安装脚手架:npm install vue-cli -g

安装完成后输入:vue -V, 如果出现相应的版本号,则说明安装。

创建一个基于 webpack 模板的新项目:
vue init webpack my-project

Vue入门,Vue入门_数据绑定,第1张

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

Vue入门,Vue入门_数据绑定_02,第2张

编程过程中使用最频繁的是:

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

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


<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等。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!