测试开发进阶(十八)

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

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>

1
2
3

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>

使用element_ui

生命周期

beforeCreate

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

created

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

mounted

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

computed

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

watch

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

var vm = new Vue({})表示开始创建一个Vue实例对象
Init Events & Lifecycle表示，刚初始化了一个Vue空的实例对象，这时候，该对象上，只有默认的一些生命周期函数和默认的事件，其他都没创建
在beforeCreate生命周期函数执行时，data和methods中的数据都还没初始化
Init injections & reactivity内部初始化
在created中，data和methods都已经初始化好了。所以最早要使用他们只能在created中
create开始到beforeMount 表示Vue开始编辑模版，把Vue代码中的指令进行执行，最终在内存中生存一个编译好的最终模版字符串，然后渲染为内存中的DOM，此时只是在内存中渲染好了模版，并没有挂载到真正的页面中
beforeMount 执行这个函数的时候，模版只是在内存中编译完成，但是没有挂载到页面中，所以此时页面还是旧的
Create vm.$el and replace "el" with it：把内存中的模版替换到浏览器页面
mounted：执行完该函数，整个Vue实例已经初始化完毕，进入运行阶段
beforeUpdate：data中数据更新了，但是页面还没更新
updated：页面和data数据同步最新了
Virtual Dom re-render and patch：根据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>

路由

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

在项目路径下安装

1	$ 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>

导航栏

命名路由

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

1	<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

1	{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,
    }
},