测试开发进阶(十八)

来呀

欢迎关注我的公众号「测试游记」

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

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

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

<el-table	
        ref="multipleTable"	
        :data="tableData"	
        tooltip-effect="dark"	
        	
        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值

1. varvm=newVue({})表示开始创建一个Vue实例对象

2. InitEvents&Lifecycle表示，刚初始化了一个Vue空的实例对象，这时候，该对象上，只有默认的一些生命周期函数和默认的事件，其他都没创建

3. 在 beforeCreate生命周期函数执行时，data和methods中的数据都还没初始化

4. Initinjections&reactivity内部初始化

5. 在 created中，data和methods都已经初始化好了。所以最早要使用他们只能在 created中

6. create开始到beforeMount 表示Vue开始编辑模版，把Vue代码中的指令进行执行，最终在内存中生存一个编译好的最终模版字符串，然后渲染为内存中的DOM，此时只是在内存中渲染好了模版，并没有挂载到真正的页面中

7. beforeMount 执行这个函数的时候，模版只是在内存中编译完成，但是没有挂载到页面中，所以此时页面还是旧的

8. Createvm.$elandreplace"el"withit：把内存中的模版替换到浏览器页面

9. mounted：执行完该函数，整个Vue实例已经初始化完毕，进入运行阶段

10. beforeUpdate：data中数据更新了，但是页面还没更新

11. updated：页面和data数据同步最新了

12. VirtualDomre-renderandpatch：根据data中的数据，在内存中渲染一份最新的DOM树，当它更新之后，会重新渲染到真实页面中去，就相当于完成了data(Model)-> view(视图层)的更新

13. beforeDestroy：Vue进入销毁阶段，但是data和methods还是可用的

14. 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,	
    }	
},