前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >测试开发进阶(十八)

测试开发进阶(十八)

作者头像
zx钟
发布2019-09-23 15:45:34
5100
发布2019-09-23 15:45:34
举报
文章被收录于专栏:测试游记

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

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

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

代码语言:javascript
复制
<el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        class="project_list_new"
        @selection-change="handleSelectionChange">
</el-table>
代码语言:javascript
复制
toggleSelection() {
    this.$refs.multipleTable.clearSelection();
},

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

一个登录页面

代码语言:javascript
复制
<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

代码语言:javascript
复制
<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">
代码语言:javascript
复制
<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:组件以及被销毁了,里面的东西都不能用了
代码语言:javascript
复制
<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中进行声明全局组件

代码语言:javascript
复制
// 导入子组件
import HelloWorld from './components/HelloWorld'
// 创建全局组件
Vue.component('hello-world', HelloWorld);
// 使用:在App.vue中直接使用<hello-world/>

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

App.vue

代码语言:javascript
复制
<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

代码语言:javascript
复制
<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
        <h2>{{ title }}</h2>
    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        props: { //从父组件获取msg
            msg: String,
            title: Number,
        }
    }
</script>

路由

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

在项目路径下安装

代码语言:javascript
复制
$ cnpm install vue-router

使用

代码语言:javascript
复制
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

代码语言:javascript
复制
// 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,添加下面内容

代码语言:javascript
复制
// 导入vue router对象
import router from './router/index.js'

new Vue({
    router,
    render: h => h(App), //渲染App根组件
}).$mount('#app');

修改 /src/App.vuetemplate

代码语言:javascript
复制
<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中添加:

代码语言:javascript
复制
<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>

命名路由

代码语言:javascript
复制
{path: '/', component: HelloWorld, name: 'index'}
代码语言:javascript
复制
<li><router-link :to="{name:'index'}">主页</router-link></li>

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

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

修改 /src/components/greeting.vue

代码语言:javascript
复制
data() {
    return {
        message: 'Hello Python',
        name: 'zhongxin',
        dream: '小目标',
        isNotFlag: false,
        username: this.$route.query.name,
        age: this.$route.query.age,
    }
}

路径参数

修改 /src/router/index.js

代码语言:javascript
复制
{path: '/greeting/:username/:age', component: greeting},

修改 /src/components/greeting.vue

代码语言:javascript
复制
data() {
    return {
        message: 'Hello Python',
        name: 'zhongxin',
        dream: '小目标',
        isNotFlag: false,
        username: this.$route.params.username,
        age: this.$route.params.age,
    }
},
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-09-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 测试游记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一个登录页面
  • 生命周期
    • beforeCreate
      • created
        • mounted
          • computed
            • watch
            • 组件声明
            • 路由
              • 在项目路径下安装
                • 使用
                  • 借鉴官方操作
                    • 命名路由
                      • 路径参数
                      领券
                      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档