測試開發進階(十七)
- 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 = '一個沒有感情的殺手' } }
