技术分享 | 测试平台开发-前端开发之Vue.js 框架的使用（二）

news2025/1/15 6:40:17

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