软件测试 / 测试开发 | 测试平台开发 - 前端开发之 Vue.js 框架的使用

2023-03-06
北京
本文字数：2311 字
阅读完需：约 8 分钟

获取更多相关知识

首先将 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 实例

创建 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 内部指令

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 的一些方法，可以在其他地方调用，也可以在指令中调用。