关于软件测试:技术分享-测试平台开发前端开发之Vuejs-框架的使用

首先将 Vue.js 下载到本地，本章就以本地的 Vue.js 为例。在本地创立一个工作区即创立一个文件夹，应用 vscode 关上，将 Vue.js 放到工作区目录下。

首先创立一个 index.html 的文件，应用 <script src=”./vue.js”></script> 加载 vue.js，这里的 ./vue.js 门路依据本人 Vue.js 文件地位而定。

<!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>Document</title>
  </head>
  <body>
    <script src="./vue.js">
      打印
</script>
  </body>
</html>

创立 Vue 实例的目标是为元素提供数据、办法等
首先在 body 上面创立一个 <div> 标签，它的 id=”app”·

<div id="app"></div>

创立 Vue 实例

<div id="app">{{msg}}</div>
<script>
  new Vue({
    // Vue 实例
    el: "#app", // el: 是一个挂载元素的关键字，前面的 #app 是 css 选择器，示意只在这个元素中起作用。data: {
      // data 是贮存数据的中央，div 用到的数据贮存在这个中央
      msg: "hello world", // msg 相似于变量名，援用用插值的形式 {{msg}} 来援用
    },
    methods: {// methods 外面用来定义方法},
  });
</script>

将数据放在 data 中的益处就是不须要频繁的去批改 DOM 中的数据，而是间接的批改 data 中的数据即可。

Vue 指令是为了对页面和数据操作更为便捷，这些操作就加左指令，通常以 v-xxx 示意。
罕用的指令为：

v-if v-else: 元素是否存在
v-show: 元素是否显示
v-for: 循环
v-on: 绑定事件：简写 @
v-bind: 绑定属性: 简写 :
v-model: 绑定数据
示例

<!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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <button @click="show(' 展现_if')"> 展现_if</button>
      <button @click="show(' 展现_else_if')"> 展现_else_if</button>
      <button @click="show(' 展现_else')"> 展现_else</button>
      <p v-if="'展现_if' == is_show">hello_if</p>
      <p v-else-if="'展现_else_if' == is_show">hello_else_if</p>
      <p v-else>hello_else</p>
    </div>
  </body>
</html>

<script>
  var vm = new Vue({
    el: "#app",
    data: {is_show: "展现",},
    methods: {show(tmp) {this.is_show = tmp;},
    },
  });
</script>

@click 等同于 v-on:click 离开来看，它是由 v -on 和 click 组成；v-on 绑定事件监听器。能够用来绑定点击事件、键盘事件等；click 通过单词含意咱们能够晓得这是点击的意思，在这里示意点击事件；那么 v -on:click 合起来看，就示意监控点击事件。
v-if 依据表达式有条件的渲染元素。当表达式满足条件后，才会进行渲染。
v-else-if，等同与 v -if，与 v-if 或 v-else-if 组合应用。
var vm = new Vue，顶一个 Vue 实例，实例名字为 vm。
el，决定之后 Vue 实例会治理哪一个 DOM。
data，Vue 实例对应的数据对象。
methods，定义属于 Vue 的一些办法，能够在其余中央调用，也能够在指令中调用。
这里应用 npm 装置的 Vue 来创立我的项目。下面曾经介绍了 Vue 的装置，接下来就是初始化我的项目和下载环境所须要的依赖。

应用 vscode 关上一个工作区，在以后的目录下关上一个终端，输出 vue ui，Vue 就是启动一个 Web 服务，这是一个可视化的界面。
启动的服务地址为 http://localhost:8000 这里的地址以本人理论输入的为准。
通过浏览器拜访，这时呈现的就是初始化我的项目的页面。此时是没有我的项目的状态，点击创立。须要填写我的项目的门路，而后点击“在此创立新我的项目”。
须要填写我的项目的名字、包管理器、以及初始化 git（可选），而后点击下一步。
这里能够抉择手动配置，抉择本人须要的插件，当然也能够抉择其余的选项。次要抉择上面的这几个性能，点击下一步。

接下来 CSS pre-processor 抉择 stylus，而后点击创立我的项目。会弹出保留预设，这里抉择‘创立我的项目，不保留预设’即可。

Vue Web 端有下载插件的性能，点击下图的插件，而后点击增加插件。

搜寻 vuetify 和 axios 这两个插件，点击装置 –> 实现装置 –> 持续，插件装置实现。

我的项目分为三大块：node_modules、public、src 以及其余的从属文件

node_modules 是用来寄存依赖的中央，这个文件十分的大，所以在上传到 git 的时候，通常不会上传这个文件，而是上传 package.json 的文件

这个文件记录了我的项目须要用到的依赖，安装文件中的依赖，只须要在命令行里输出 npm install 即可

public 中次要是寄存动态的资源文件
src 寄存我的项目源码及须要援用的资源文件。

src 下的 assets：寄存我的项目中用到的资源文件，css、js、images 等。
src 下的 componets：寄存 Vue 开发中的组件：HelloWorld.vue 等。
src 下的 router：vue-router vue 路由的配置文件。
src 下的 main.js：vue-cli 工程的入口文件。
每个文件的性能就不一一介绍了，次要的是下面这几个文件。
启动 Vue 服务：命令默认为 npm run serve
应用浏览器关上上图的链接，就会显示出以后我的项目的主页。Vue.js 框架的应用就先说到这里啦，大家能够多多练习一下哦~

关于软件测试:技术分享-测试平台开发前端开发之Vuejs-框架的使用

创立挂载元素

创立 Vue 实例

Vue 外部指令

示例

初始化我的项目

我的项目构造