测试开发进阶(十八)

2019 年 10 月 6 日
筆記

element-ui其实就是一个组件库

ref为一个元素或者子组件的应用

组件中定义的所有的ref都会放在当前组件的 $refs属性中

<el-table          ref="multipleTable"          :data="tableData"          tooltip-effect="dark"          style="width: 100%"          class="project_list_new"          @selection-change="handleSelectionChange">  </el-table>

toggleSelection() {      this.$refs.multipleTable.clearSelection();  },

this.$refs.multipleTable就可以操作上面的内容了

一个登录页面

<template>      <div class="login">          <form action="" method="post">              <label for="username">用户名:</label>              <!-- v-bind单向绑定，只能将Model中的数据传给绑定的属性 -->              <input type="text"                     id="username"                     placeholder="请输入用户名"                     :username="username">              <br>              <label for="password">密&nbsp;&nbsp;&nbsp;码:</label>              <input type="password"                     id="password"                     placeholder="请输入密码"                     :password="password">          </form>          <p>你输入的用户名为{{username}}</p>          <p>你输入的密码为{{password}}</p>      </div>  </template>    <script>      export default {          name: "Login",          data() {              return {                  username: 'admin',                  password: 'admin'              }          }      }  </script>    <style scoped>      input {          margin: 10px auto;          font-size: medium;      }        label {          margin-right: 10px;        }  </style>

v-bind单向绑定，只能将Model中的数据传给绑定的属性

v-model双向绑定 v-model为双向绑定，既可以把Model中的数据传给绑定的属性，也可以把属性传回给Model

<input type="text"         id="username"         placeholder="请输入用户名"         v-model="username">  <br>  <label for="password">密&nbsp;&nbsp;&nbsp;码:</label>  <input type="password"         id="password"         placeholder="请输入密码"         v-model="password">

<template>      <el-form :model="ruleForm"               :label-position="labelPosition"               status-icon               :rules="rules"               ref="ruleForm"               label-width="70px"               class="demo-ruleForm">          <el-form-item label="用户名">              <el-input type="text"                        v-model="ruleForm.username"                        autocomplete="off"></el-input>          </el-form-item>            <el-form-item label="密码">              <el-input type="password"                        v-model="ruleForm.password"                        autocomplete="off"></el-input>          </el-form-item>          <p>你输入的用户名为{{ruleForm.username}}</p>          <p>你输入的密码为{{ruleForm.password}}</p>      </el-form>    </template>    <script>      export default {          name: "Login_ui",          data() {              return {                  ruleForm: {                      labelPosition: 'right',                      username: '',                      password: '',                  }              }          }      }  </script>    <style scoped>      .el-form {          width: 350px;          margin: 50px auto;      }  </style>

生命周期

beforeCreate

这个时候，this变量还不能使用，在data下的数据，和methods下的方法，watcher中的事件都不能获得到；

created

这个时候可以操作vue实例中的数据和各种方法，但是还不能对"dom"节点进行操作；

mounted

这个时候挂载完毕，这时dom节点被渲染到文档内，一些需要dom的操作在此时才能正常进行。注意：mounted在整个实例的生命周期中只执行一次。

computed

是把所有需要依赖其他值计算的值写成对象的key值。

watch

把监听的值写成对象的key值

varvm=newVue({})表示开始创建一个Vue实例对象
InitEvents&Lifecycle表示，刚初始化了一个Vue空的实例对象，这时候，该对象上，只有默认的一些生命周期函数和默认的事件，其他都没创建
在 beforeCreate生命周期函数执行时，data和methods中的数据都还没初始化
Initinjections&reactivity内部初始化
在 created中，data和methods都已经初始化好了。所以最早要使用他们只能在 created中
create开始到beforeMount 表示Vue开始编辑模版，把Vue代码中的指令进行执行，最终在内存中生存一个编译好的最终模版字符串，然后渲染为内存中的DOM，此时只是在内存中渲染好了模版，并没有挂载到真正的页面中
beforeMount 执行这个函数的时候，模版只是在内存中编译完成，但是没有挂载到页面中，所以此时页面还是旧的
Createvm.$elandreplace"el"withit：把内存中的模版替换到浏览器页面
mounted：执行完该函数，整个Vue实例已经初始化完毕，进入运行阶段
beforeUpdate：data中数据更新了，但是页面还没更新
updated：页面和data数据同步最新了
VirtualDomre-renderandpatch：根据data中的数据，在内存中渲染一份最新的DOM树，当它更新之后，会重新渲染到真实页面中去，就相当于完成了data(Model)-> view(视图层)的更新
beforeDestroy：Vue进入销毁阶段，但是data和methods还是可用的
destroyed：组件以及被销毁了，里面的东西都不能用了

<script>      // 创建 Vue 实例，得到 ViewModel      var vm = new Vue({        el: '#app',        data: {          msg: 'ok'        },        methods: {          show() {            console.log('执行了show方法')          }        },        beforeCreate() { // 第一个生命周期函数，表示实例完全被创建出来之前，会执行它          // console.log(this.msg)          // this.show()          // 注意：在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化        },        created() { // 第二个生命周期函数          // console.log(this.msg)          // this.show()          //  在 created 中，data 和 methods 都已经被初始化好了！          // 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作        },        beforeMount() { // 第3个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把 模板渲染到 页面中          // console.log(document.getElementById('h3').innerText)          // 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串        },        mounted() { // 第4个生命周期函数，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了          // console.log(document.getElementById('h3').innerText)          // 注意：mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动        },            // 接下来的是运行中的两个事件        beforeUpdate() { // 这时候，表示 我们的界面还没有被更新【数据被更新了吗？数据肯定被更新了】          /* console.log('界面上元素的内容：' + document.getElementById('h3').innerText)          console.log('data 中的 msg 数据是：' + this.msg) */          // 得出结论：当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步        },        updated() {          console.log('界面上元素的内容：' + document.getElementById('h3').innerText)          console.log('data 中的 msg 数据是：' + this.msg)          // updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的        }      });    </script>

组件声明

在 /src/main.js入口js中进行声明全局组件

// 导入子组件  import HelloWorld from './components/HelloWorld'  // 创建全局组件  Vue.component('hello-world', HelloWorld);  // 使用：在App.vue中直接使用<hello-world/>

父组件，子组件之间互相调用

App.vue

<template>      <HelloWorld msg="「测试游记」" :title="title"></HelloWorld>  </template>  <script>      import HelloWorld from './components/HelloWorld.vue'        export default {          // 定义组件名称          name: 'app',          components: { //声明子组件              HelloWorld,          },          data() {              return {                  title: '测试游记'              }          }      }  </script>

HelloWorld.vue

<template>      <div class="hello">          <h1>{{ msg }}</h1>          <h2>{{ title }}</h2>      </div>  </template>    <script>      export default {          name: 'HelloWorld',          props: { //从父组件获取msg              msg: String,              title: Number,          }      }  </script>

路由

创建单页面应用
官方路由组件，实现前端路由功能

在项目路径下安装

$ cnpm install vue-router

使用

import Vue from 'vue'  import VueRouter from 'vue-router'    Vue.use(VueRouter)

借鉴官方操作

https://github.com/vuejs/vue-router/blob/dev/examples/basic/app.js

在 /src/router/index.js

// 0.安装并导入vue-router  import Vue from 'vue'  import VueRouter from 'vue-router'    // 1. Use plugin. 使用组件  // This installs <router-view> and <router-link>,  // and injects $router and $route to all router-enabled child components  Vue.use(VueRouter);    // 2. Define route components 定义组件或导入组件  import HelloWorld from '../components/HelloWorld.vue'  import greeting from '../components/greeting.vue'  import ProjectsList from '../components/ProjectsList.vue'  import HomeWokr0917 from '../components/HomeWork0917.vue'  import HomeWokr0917_1 from '../components/HomeWork0917_1.vue'  import Login from '../components/Login.vue'  import Login_ui from '../components/Login_ui.vue'      // 3. Create the router 创建路由  const router = new VueRouter({      mode: 'history',      routes: [          {path: '/', component: HelloWorld},          {path: '/greeting', component: greeting},          {path: '/projectslist', component: ProjectsList},          {path: '/login', component: Login},          {path: '/login_ui', component: Login_ui},      ]  });    // 4.导出路由  export default router;

修改 /src/main.js，添加下面内容

// 导入vue router对象  import router from './router/index.js'    new Vue({      router,      render: h => h(App), //渲染App根组件  }).$mount('#app');

修改 /src/App.vue的 template

<template>      <div id="app">          <img alt="Vue logo" src="./assets/logo.png">          <HelloWorld msg="「测试游记」" :title="title"></HelloWorld>          <router-view></router-view>      </div>  </template>

访问

访问 http://localhost:8080/login

在 App.vue中添加：

<ul>      <li><router-link to="/">主页</router-link></li>      <li><router-link to="/login">登录</router-link></li>      <li><router-link to="/login_ui">登录-ui</router-link></li>      <li><router-link to="/greeting">文本</router-link></li>      <li><router-link to="/projectslist">项目</router-link></li>  </ul>

命名路由

{path: '/', component: HelloWorld, name: 'index'}

<li><router-link :to="{name:'index'}">主页</router-link></li>

在组件中可以通过 this.$router来获取查询字符串参数

访问 http://localhost:8080/greeting?name=zx&age=18

修改 /src/components/greeting.vue

data() {      return {          message: 'Hello Python',          name: 'zhongxin',          dream: '小目标',          isNotFlag: false,          username: this.$route.query.name,          age: this.$route.query.age,      }  }

路径参数

修改 /src/router/index.js

{path: '/greeting/:username/:age', component: greeting},

修改 /src/components/greeting.vue

data() {      return {          message: 'Hello Python',          name: 'zhongxin',          dream: '小目标',          isNotFlag: false,          username: this.$route.params.username,          age: this.$route.params.age,      }  },