测试开发进阶(十七)

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

插件推荐

推荐Vue插件：Vue.js devtools

基本操作

v-bind

<span title="dream">学好Vue</span>

<span v-bind:title="dream">学好Vue</span>

data() {
    return {
        message: 'Hello Python',
        name: 'zhongxin',
        dream: '小目标'
    }
}

可以使用插件进行修改绑定的内容

v-if和v-show

<p v-if="isNotFlag">嘟嘟嘟</p>

data() {
    return {
        message: 'Hello Python',
        name: 'zhongxin',
        dream: '小目标',
        isNotFlag: false,
    }
}

当isNotFlag是false的时候不显示，当isNotFlag是true的时候显示

<p v-show="isNotFlag">嘟嘟嘟2</p>

v-show也可以实现类似v-if的效果，但是两者还是有区别的

• v-if每次都会重新删除或创建元素
• v-show每次不会重新进行dom的删除和创建操作，只是切换了元素的display样式

v-if

v-else-if

v-else

<p>有一天，{{username}}想去上网</p>
<p v-if="age>=70">{{username}}爷爷，您还是回去锻炼身体吧</p>
<p v-else-if="age>=18">{{username}}，欢迎光临</p>
<p v-else>{{username}}，小朋友作业写完了吗？</p>

data() {
    return {
        message: 'Hello Python',
        name: 'zhongxin',
        dream: '小目标',
        isNotFlag: false,
        username: '马仔',
        age: 19,
    }
}

修改age

v-for

<template>
    <table>
        <tr>
            <th v-for="project in project_headers">{{project}}</th>
        </tr>
    </table>
</template>

<script>
    export default {
        name: "ProjectsList",
        data() {
            return {
                project_headers: ['项目名称', '项目负责人', '应用名称'],

            }
        }
    }
</script>

<style scoped>
    table {
        margin: 50px auto;
        border-collapse: collapse;
        width: 40%;
    }

    td, th {
        border: 1px solid #ddd;
    }
</style>

<tr v-for="item in projects">
    <th>{{item.name}}</th>
    <th>{{item.leader}}</th>
    <th>{{item.app_name}}</th>
</tr>

data() {
    return {
        project_headers: ['项目名称', '项目负责人', '应用名称'],
        projects: [
            {name: '前程贷', leader: '笨笨', app_name: 'P2P'},
            {name: '111', leader: '222', app_name: '333'},
            {name: '444', leader: '555', app_name: '666'},
            {name: '666', leader: '777', app_name: '888'},
        ]

    }
}

使用Element UI

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

在项目路径下安装：

$ cnpm i element-ui -S

导入：

// 导入Vue.js
import Vue from 'vue'
// 导入App.vue根组件
import App from './App.vue'
// 导入element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//在创建Vue实例前，要将element-ui插件加入到Vue中
Vue.use(ElementUI);// 加载插件

Vue.config.productionTip = false

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

选择适合的：

<template>
    <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            class="project_list_new"
            @selection-change="handleSelectionChange">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                prop="name"
                label="项目名称"
                width="120">
        </el-table-column>
        <el-table-column
                prop="leader"
                label="项目负责人"
                width="120">
        </el-table-column>
        <el-table-column
                prop="app_name"
                label="应用名称"
                show-overflow-tooltip>
        </el-table-column>
    </el-table>

</template>

<script>
    export default {
        name: "ProjectsList",
        data() {
            return {
                project_headers: ['项目名称', '项目负责人', '应用名称'],
                tableData: [
                    {name: '前程贷', leader: '笨笨', app_name: 'P2P'},
                    {name: '111', leader: '222', app_name: '333'},
                    {name: '444', leader: '555', app_name: '666'},
                    {name: '666', leader: '777', app_name: '888'},
                ]

            }
        }
    }
</script>

<style scoped>
    table {
        margin: 50px auto;
        border-collapse: collapse;
        width: 40%;
    }

    td, th {
        border: 1px solid #ddd;
    }

    .project_list_new {
        margin: 50px 500px;
    }
</style>

v-on

v-on为vue中指令，用于绑定事件，事件触发之后可以执行js操作

<p v-on:click="username='路人'">有一天，{{username}}想去上网</p>
<p v-if="age>=70">{{username}}爷爷，您还是回去锻炼身体吧</p>
<p v-else-if="age>=18">{{username}}，欢迎光临</p>
<p v-else>{{username}}，小朋友作业写完了吗？</p>

点击「有一天」后

v-on可以缩写为@

<p @click="changeUsername">有一天，{{username}}想去上网</p>

methods: {
    changeUsername: function () {
        // this 就相当于self
        this.username = '一个没有感情的杀手'
    }
}