vue2常用语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  1.引入vue.js文件（别人写好的一大堆js代码，引入后就可以使用提供的功能）-- 开发环境  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!--  引入vue.js文件   生产环境  -->
    <!--    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>-->
</head>
<body>
    <!-- 2.指定区域，该区域的内容希望由vue,s来接管。-->
    <div id='app'>
        <h1>{{ text }}</h1>
        <div> 我叫 {{name}} </div>
		<input type='text' :value='text'>
        <input type="button" v-on:click="clickme"></input>

	</div>
    <script>
        //3,创建Vue对象，并关联指定HTHL区域。
        var app = new Vue({
            el: '#app',
            data: {
                text: '测试一下',
                name: 'xuefeng'
            },
            methods: {
                clickme: function () {
                    // 获取值 this.name
                    // 修改值 this.name = '007'
                    this.text = '点击后文字改变了'
                }
            }
        })
    </script>

</body>
</html>

element-ui

https://element.eleme.cn/#/zh-CN/component/form

1. 常用标签

输入框：

<input type='text' value='001'></input>
// 绑定点击事件，clickme 是一个方法名，改方法定义在script里面
<input type='button' v-on:click='clickme'></input>

2. vue常用指令

2.1 v-bind 绑定

常用来动态绑定标签的属性。想要修改js里的值属性同步发生变化

  • 简写格式

    <h1 v-bind:class="a"> 001 </h1>
<h1 :class="a"> 002 </h1>
<h1 :src="a"> 003 </h1>
<h1 style=red; font-size:19px> 004 </h1>

  • 一次性绑定多个属性值或者

    <h1 :src="003">
<selection-panel :single-choice="true"
      v-bind="rolePanelParams"></selection-panel>

// script 的data中，rolePanelParams = {href: url, title: '百度链接'}  
// v-bind="{href: url, title: '百度链接'}"会将元素的href属性绑定到变量url的值，title属性绑定到字符串’百度链接’

  • 给某一个属性比如class绑定多个值

    <h1 :src="Dict"> 004 </h1>

// 其中script 的data中，Dict = {info:false, danger: false}


<h1 :src="[a1,a2]"> 10 20 </h1>

// 其中script 的data中，a1=10,a2=20

  • 使用三元表达式为属性赋值

    <h1 :src="[1===1?'xxx':a1, a2]"> xxx 20</h1>
// 这里的 'xxx' 就是一个字符串
// 条件成立src="['xxx',a2]"
// 条件不src="[a1,a2]"

// 其中script 的data中，a1=10,a2=20

  • v-bind 绑定属于单向绑定

<body>

    <div id='app'>
        <h1>{{text}}</h1>
		<input type='text' :value='text'>
	</div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                text: 'xuefeng365'
            }
        })
    </script>

</body>

2.2 v-modle 双向绑定

一般用于在用户交互，例如：input、select、textarea等。【双向绑定】

教程：https://www.bilibili.com/video/BV1bG4y1w7Vb?p=77&vd_source=7f93e0882fd754a876ce5807c02287f4

2.3 v-for 循环

教程：https://www.bilibili.com/video/BV1bG4y1w7Vb?p=78&vd_source=7f93e0882fd754a876ce5807c02287f4

2.4 v-on 事件绑定

v-onyclick
v-on:dblclick
v-on:mouseover,
v-on:mouseout,
v-on:change
v-on:focus

<el-dialog :title="dialogTitle" :visible="visible" width="600px" :close-on-click-modal="false" @close="onResetForm"></el-dialog>

其中 @close=”onResetForm”中的@close

在Vue.js中，使用@符号是一种简写方式，用于绑定事件监听器。它等同于使用v-on指令。所以@close="onResetForm"等同于v-on:close="onResetForm"。

教程：https://www.bilibili.com/video/BV1bG4y1w7Vb?p=79&vd_source=7f93e0882fd754a876ce5807c02287f4

2.5 数据管理 练手

数据的管理包括对数据：展示、动态添加、削除、修改。

教程：https://www.bilibili.com/video/BV1bG4y1w7Vb?p=80&vd_source=7f93e0882fd754a876ce5807c02287f4

2.6 v-if

2.7 v-show

4 父子页面传值 (主：用户列表页面、子：新增用户弹窗)

// 用户列表 - 主页面

<template>
  <div>
    <AddUserDialog
      :dialogFormVisible.sync="dialogFormVisible"
      :dialogTitle="dialogTitle"
      :id="curId"
      @success="resetForm"
    />
  </div>
</template>

<script>
import WrapComponent from "@/components/WrapComponent";
// 引入通用的方法(别人写好的直接用)
import { delConfirm, filterNullValue } from "@/utils/commonMethods";
import addUser from "./addUser";

export default {
  name: "accountMgt",
  components: {
    AddUserDialog: addUser,  // 引入上面template中的 AddUserDialog，
  },
    
    


其中 components 中 的AddUserDialog: addUser 有什么作用， 怎么实现父子页面的传值

<template>
  <div class="page-wrap">
    
  </div>
</template>

<script>
import { nameValidator, pwdValidator, chineseReg, blankSpaceReg } from "@/utils/const";
import SelectionPanel from "@/components/SelectionPanel";
import { filterNullValue } from "@/utils/commonMethods";

export default {
  name: "AddAccount",
  props: {
    dialogTitle: {
      type: String,
      default: "新增",
    },
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: "",
    },
  }

在这段代码中，AddUserDialog是一个子组件，通过import语句引入了addUser组件。这里的addUser是一个具体的组件文件，它包含了AddUserDialog组件的实现。

通过在父组件中注册AddUserDialog组件，可以在父组件的template中使用AddUserDialog组件，并通过props属性传递数据给子组件。在这段代码中，通过将dialogFormVisible、dialogTitle和curId作为props传递给AddUserDialog组件，实现了父子页面的传值。

具体来说，父组件可以通过修改dialogFormVisible、dialogTitle和curId的值来控制子组件的行为，而子组件可以通过调用父组件传递过来的success事件来通知父组件执行特定的操作（比如重置表单）。

总结起来，AddUserDialog组件是父组件accountMgt的一个子组件，通过props属性实现了父子页面的传值。

后端开发

步骤： url > modle > serializers（序列化器）> views

环境变量：项目环境的下拉选项，通过本地缓存，实现了不同页面切换的状态保持。

比如我项目A的环境选择uat , 切换成其他页面，再次返回环境选择，页面显示的还是上次选择的uat环境

测试平台 同步 git仓库用例（只同步用例到平台数据库），但是同步过来的用例 只能查看和运行、和复制，不能编辑和删除（如果想编辑和删除可以复制一份）

测试平台下载环境：选择项目和环境，在下载的压缩文件的test文件里写用例

image-20230624120323477