测试开发进阶(十七)
- 2019 年 10 月 4 日
- 筆記
插件推荐
推荐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 = '一个没有感情的杀手' } }
