Vue自定义指令原来这么简单
本篇學習目標
1. 組件進階
1.0 組件進階 - 動態組件
目標: 多個組件使用同一個掛載點，并動態切換，這就是動態組件
需求: 完成一個注冊功能頁面, 2個按鈕切換, 一個填寫注冊信息, 一個填寫用戶簡介信息
效果如下:
準備被切換的 - UserName.vue / UserInfo.vue 2個組件
引入到UseDynamic.vue注冊
準備變量來承載要顯示的"組件名"
設置掛載點, 使用is屬性來設置要顯示哪個組件
點擊按鈕 – 修改comName變量里的"組件名"
在App.vue - 引入01_UseDynamic.vue并使用顯示
總結: vue內置component組件, 配合is屬性, 設置要顯示的組件名字
1.1 組件進階 - 組件緩存
目標: 組件切換會導致組件被頻繁銷毀和重新創建, 性能不高
使用Vue內置的keep-alive組件, 可以讓包裹的組件保存在內存中不被銷毀
演示1: 可以先給UserName.vue和UserInfo.vue 注冊created和destroyed生命周期事件, 觀察創建和銷毀過程
演示2: 使用keep-alive內置的vue組件, 讓動態組件緩存而不是銷毀
語法:
? Vue內置的keep-alive組件 包起來要頻繁切換的組件
02_UseDynamic.vue
<div style="border: 1px solid red;"><!-- Vue內置keep-alive組件, 把包起來的組件緩存起來 --><keep-alive><component :is="comName"></component></keep-alive> </div>補充生命周期:
- activated - 激活
- deactivated - 失去激活狀態
總結: keep-alive可以提高組件的性能, 內部包裹的標簽不會被銷毀和重新創建, 觸發激活和非激活的生命周期方法
1.2 組件進階 - 激活和非激活
目標: 被緩存的組件不再創建和銷毀, 而是激活和非激活
補充2個鉤子方法名:
? activated – 激活時觸發
? deactivated – 失去激活狀態觸發
1.3 組件進階 - 組件插槽
目標: 用于實現組件的內容分發, 通過 slot 標簽, 可以接收到寫在組件標簽內的內容
vue提供組件插槽能力, 允許開發者在封裝組件時，把不確定的部分定義為插槽
插槽例子:
需求: 以前折疊面板案例, 想要實現不同內容顯示, 我們把折疊面板里的Pannel組件, 添加組件插槽方式
語法口訣:
03/Pannel.vue - 組件(直接復制)
<template><div><!-- 按鈕標題 --><div class="title"><h4>芙蓉樓送辛漸</h4><span class="btn" @click="isShow = !isShow">{{ isShow ? "收起" : "展開" }}</span></div><!-- 下拉內容 --><div class="container" v-show="isShow"><p>寒雨連江夜入吳,</p><p>平明送客楚山孤。</p><p>洛陽親友如相問，</p><p>一片冰心在玉壺。</p></div></div> </template><script> export default {data() {return {isShow: false,};}, }; </script><style scoped> h3 {text-align: center; }.title {display: flex;justify-content: space-between;align-items: center;border: 1px solid #ccc;padding: 0 1em; }.title h4 {line-height: 2;margin: 0; }.container {border: 1px solid #ccc;padding: 0 1em; }.btn {/* 鼠標改成手的形狀 */cursor: pointer; }img {width: 50%; } </style>views/03_UserSlot.vue - 使用組件(直接復制)
框: 在這個基礎重復使用組件
<template><div id="container"><div id="app"><h3>案例：折疊面板</h3></div></div> </template><script> export default { }; </script><style> #app {width: 400px;margin: 20px auto;background-color: #fff;border: 4px solid blueviolet;border-radius: 1em;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);padding: 1em 2em 2em; } </style>views/03_UseSlot.vue - 組件插槽使用
<template><div id="container"><div id="app"><h3>案例：折疊面板</h3><Pannel><img src="../assets/mm.gif" alt=""><span>我是內容</span></Pannel><Pannel><p>寒雨連江夜入吳,</p><p>平明送客楚山孤。</p><p>洛陽親友如相問，</p><p>一片冰心在玉壺。</p></Pannel><Pannel></Pannel></div></div> </template><script> import Pannel from "../components/03/Pannel"; export default {components: {Pannel,}, }; </script>總結: 組件內容分發技術, slot占位, 使用組件時傳入替換slot位置的標簽
1.4 組件進階 - 插槽默認內容
目標: 如果外面不給傳, 想給個默認顯示內容
口訣: 夾著內容默認顯示內容, 如果不給插槽slot傳東西, 則使用夾著的內容在原地顯示
<slot>默認內容</slot>1.5 組件進階 - 具名插槽
目標: 當一個組件內有2處以上需要外部傳入標簽的地方
傳入的標簽可以分別派發給不同的slot位置
要求: v-slot一般用跟template標簽使用 (template是html5新出標簽內容模板元素, 不會渲染到頁面上, 一般被vue解析內部標簽)
components/04/Pannel.vue - 留下具名slot
<template><div><!-- 按鈕標題 --><div class="title"><slot name="title"></slot><span class="btn" @click="isShow = !isShow">{{ isShow ? "收起" : "展開" }}</span></div><!-- 下拉內容 --><div class="container" v-show="isShow"><slot name="content"></slot></div></div> </template>views/04_UseSlot.vue使用
<template><div id="container"><div id="app"><h3>案例：折疊面板</h3><Pannel><template v-slot:title><h4>芙蓉樓送辛漸</h4></template><template v-slot:content><img src="../assets/mm.gif" alt=""><span>我是內容</span></template></Pannel><Pannel><template #title><span style="color: red;">我是標題</span></template><template #content><p>寒雨連江夜入吳,</p><p>平明送客楚山孤。</p><p>洛陽親友如相問，</p><p>一片冰心在玉壺。</p></template></Pannel></div></div> </template><script> import Pannel from "../components/04/Pannel"; export default {components: {Pannel,}, }; </script>v-slot可以簡化成#使用
v-bind可以省略成: v-on: 可以省略成@ 那么v-slot: 可以簡化成#
總結: slot的name屬性起插槽名, 使用組件時, template配合#插槽名傳入具體標簽
1.6 組件進階 - 作用域插槽
目標: 子組件里值, 在給插槽賦值時在父組件環境下使用
復習: 插槽內slot中顯示默認內容
例子: 默認內容在子組件中, 但是父親在給插槽傳值, 想要改變插槽顯示的默認內容
口訣:
components/05/Pannel.vue - 定義組件, 和具名插槽, 給slot綁定屬性和值
<template><div><!-- 按鈕標題 --><div class="title"><h4>芙蓉樓送辛漸</h4><span class="btn" @click="isShow = !isShow">{{ isShow ? "收起" : "展開" }}</span></div><!-- 下拉內容 --><div class="container" v-show="isShow"><slot :row="defaultObj">{{ defaultObj.defaultOne }}</slot></div></div> </template><script> // 目標: 作用域插槽 // 場景: 使用插槽, 使用組件內的變量 // 1. slot標簽, 自定義屬性和內變量關聯 // 2. 使用組件, template配合v-slot="變量名" // 變量名會收集slot身上屬性和值形成對象 export default {data() {return {isShow: false,defaultObj: {defaultOne: "無名氏",defaultTwo: "小傳同學"}};}, }; </script>views/05_UseSlot.vue
<template><div id="container"><div id="app"><h3>案例：折疊面板</h3><Pannel><!-- 需求: 插槽時, 使用組件內變量 --><!-- scope變量: {row: defaultObj} --><template v-slot="scope"><p>{{ scope.row.defaultTwo }}</p></template></Pannel></div></div> </template><script> import Pannel from "../components/05/Pannel"; export default {components: {Pannel,}, }; </script>總結: 組件內變量綁定在slot上, 然后使用組件v-slot=“變量” 變量上就會綁定slot身上屬性和值
1.7 組件進階 - 作用域插槽使用場景
目標: 了解作用域插槽使用場景, 自定義組件內標簽+內容
案例: 封裝一個表格組件, 在表格組件內循環產生單元格
準備MyTable.vue組件 – 內置表格, 傳入數組循環鋪設頁面, 把對象每個內容顯示在單元格里
準備UseTable.vue – 準備數據傳入給MyTable.vue使用
components/06/MyTable.vue - 模板(直接復制)
<template><div><table border="1"><thead><tr><th>序號</th><th>姓名</th><th>年齡</th><th>頭像</th></tr></thead><thead><tr><td></td><td></td><td></td><td></td></tr></thead></table></div> </template><script> export default {} </script>views/06_UseTable.vue - 準備數據, 傳入給MyTable.vue組件里循環使用
list: [{name: "小傳同學",age: 18,headImgUrl:"http://yun.itheima.com/Upload/./Images/20210303/603f2d2153241.jpg",},{name: "小黑同學",age: 25,headImgUrl:"http://yun.itheima.com/Upload/./Images/20210304/6040b101a18ef.jpg",},{name: "智慧同學",age: 21,headImgUrl:"http://yun.itheima.com/Upload/./Images/20210302/603e0142e535f.jpg",}, ],例子: 我想要給td內顯示圖片, 需要傳入自定義的img標簽
正確做法:
? 在MyTable.vue的td中準備占位, 但是外面需要把圖片地址賦予給src屬性,所以在slot上把obj數據綁定
components/06/MyTable.vue - 正確代碼
<template><div><table border="1"><thead><tr><th>序號</th><th>姓名</th><th>年齡</th><th>頭像</th></tr></thead><tbody><tr v-for="(obj, index) in arr" :key="index"><td>{{ index + 1 }}</td><td>{{ obj.name }}</td><td>{{ obj.age }}</td><td><slot :row="obj"><!-- 默認值給上,如果使用組件不自定義標簽顯示默認文字 -->{{ obj.headImgUrl}}</slot></td></tr></tbody></table></div> </template><script> export default {props: {arr: Array} } </script>? 在UseTable使用MyTable的時候, template上v-slot綁定變量, 傳入img組件設置圖片地址
<template><div><MyTable :arr="list"></MyTable><MyTable :arr="list"><!-- scope: {row: obj} --><template v-slot="scope"><a :href="scope.row.headImgUrl">{{ scope.row.headImgUrl }}</a></template></MyTable><MyTable :arr="list"><template v-slot="scope"><img style="width: 100px;" :src="scope.row.headImgUrl" alt=""></template></MyTable></div> </template><script> import MyTable from "../components/06/MyTable"; export default {components: {MyTable,},data() {return {list: [{name: "小傳同學",age: 18,headImgUrl:"http://yun.itheima.com/Upload/./Images/20210303/603f2d2153241.jpg",},{name: "小黑同學",age: 25,headImgUrl:"http://yun.itheima.com/Upload/./Images/20210304/6040b101a18ef.jpg",},{name: "智慧同學",age: 21,headImgUrl:"http://yun.itheima.com/Upload/./Images/20210302/603e0142e535f.jpg",},],};}, }; </script><style> </style>總結: 插槽可以自定義標簽, 作用域插槽可以把組件內的值取出來自定義內容
2. 自定義指令
自定義指令文檔
除了核心功能默認內置的指令 (v-model 和 v-show)，Vue 也允許注冊自定義指令。 v-xxx
html+css的復用的主要形式是組件
你需要對普通 DOM 元素進行底層操作，這時候就會用到自定義指令
2.0 自定義指令-注冊
目標: 獲取標簽, 擴展額外的功能
局部注冊和使用
07_UseDirective.vue - 只能在當前組件.vue文件中使用
<template><div><!-- <input type="text" v-gfocus> --><input type="text" v-focus></div> </template><script> // 目標: 創建 "自定義指令", 讓輸入框自動聚焦 // 1. 創建自定義指令 // 全局 / 局部 // 2. 在標簽上使用自定義指令 v-指令名 // 注意: // inserted方法 - 指令所在標簽, 被插入到網頁上觸發(一次) // update方法 - 指令對應數據/標簽更新時, 此方法執行 export default {data(){return {colorStr: 'red'}},directives: {focus: {inserted(el){el.focus()}}} } </script><style></style>全局注冊
在main.js用 Vue.directive()方法來進行注冊, 以后隨便哪個.vue文件里都可以直接用v-fofo指令
// 全局指令 - 到處"直接"使用 Vue.directive("gfocus", {inserted(el) {el.focus() // 觸發標簽的事件方法} })總結: 全局注冊自定義指令, 哪里都能用, 局部注冊, 只能在當前vue文件里用
2.1 自定義指令-傳值
目標: 使用自定義指令, 傳入一個值
需求: 定義color指令-傳入一個顏色, 給標簽設置文字顏色
main.js定義處修改一下
// 目標: 自定義指令傳值 Vue.directive('color', {inserted(el, binding) {el.style.color = binding.value},update(el, binding) {el.style.color = binding.value} })Direct.vue處更改一下
<p v-color="colorStr" @click="changeColor">修改文字顏色</p><script>data() {return {theColor: "red",};},methods: {changeColor() {this.theColor = 'blue';},}, </script>總結: v-xxx, 自定義指令, 獲取原生DOM, 自定義操作
3. 案例-tabbar
完成如下案例和各步功能
知識點:
- 組件封裝
- 動態組件
- keep-alive
- 作用域插槽
- 自定義指令
3.0 案例-tabbar-初始化項目
目標: 創建項目文件夾, 引入字體圖標, 下載bootstrap, less, less-loader@5.0.0 axios, 在App.vue注冊組件
- 需求: 從0新建項目, 拆分組件, 創建使用
組件分析:
-
組件拆分:
- MyHeader.vue – 復用之前的
- MyTabBar.vue – 底部導航
- MyTable.vue – 封裝表格
-
三個頁面
- -MyGoodsList.vue – 商品頁
- MyGoodsSearch.vue – 搜索頁
- -MyUserInfo.vue – 用戶信息頁
思路分析：
? ①: vue create tabbar-demo
? ②: yarn add less less-loader@5.0.0 -D
? ③: yarn add bootstrap axios 并在main.js 引入和全局屬性
? ④: 根據需求-創建需要的頁面組件
? ⑤: 把昨天購物車案例-封裝的MyHeader.vue文件復制過來復用
? ⑥: 從App.vue – 引入組織相關標簽
新建工程:
vue create tabbar-demo yarn add less less-loader@5.0.0 -D yarn add bootstrap axios在main.js中引入bootStrap.css和字體圖標樣式
import "bootstrap/dist/css/bootstrap.css" import "./assets/fonts/iconfont.css"創建/復制如下文件
從昨天案例中-直接復制過來components/MyHeader.vue
components/MyTabBar.vue
views/MyGoodsList.vue
views/MyGoodsSearch.vue
views/MyUserInfo.vue
components/MyTable.vue
3.1 案例-tabbar-底部封裝
目標: 實現MyTabBar.vue組件
- 需求: 把底部導航也靈活封裝起來
分析：
? ①: 基本標簽+樣式(md里復制)
? ②: 為tabbar組件指定數據源
? ③: 數據源最少2個, 最多5個(validator)
? ④: 從App.vue給MyTabBar.vue傳入底部導航的數據
? ⑤: MyTabBar.vue中循環展示
App.vue-數組準備
tabList: [{iconText: "icon-shangpinliebiao",text: "商品列表",componentName: "MyGoodsList"},{iconText: "icon-sousuo",text: "商品搜索",componentName: "MyGoodsSearch"},{iconText: "icon-user",text: "我的信息",componentName: "MyUserInfo"} ]MyTabBar.vue - 標簽模板
<template><div class="my-tab-bar"><div class="tab-item"><!-- 圖標 --><span class="iconfont"></span><!-- 文字 --><span></span></div></div> </template><script> export default {} </script><style lang="less" scoped> .my-tab-bar {position: fixed;left: 0;bottom: 0;width: 100%;height: 50px;border-top: 1px solid #ccc;display: flex;justify-content: space-around;align-items: center;background-color: white;.tab-item {display: flex;flex-direction: column;align-items: center;} }.current {color: #1d7bff; } </style>MyTabBar.vue正確代碼(不可復制)
<template><div class="my-tab-bar"><divclass="tab-item"v-for="(obj, index) in arr":key="index"><!-- 圖標 --><span class="iconfont" :class="obj.iconText"></span><!-- 文字 --><span>{{ obj.text }}</span></div></div> </template><script> export default {props: {arr: {type: Array,required: true,// 自定義校驗規則validator(value) {// value就是接到數組if (value.length >= 2 && value.length <= 5) {return true; // 符合條件就return true} else {console.error("數據源必須在2-5項");return false;}},},} }; </script>不要忘了把tabList數組從App.vue -> MyTabBar.vue
3.2 案例-tabbar-底部高亮
目標: 點擊底部導航實現高亮效果
- 需求: 點擊底部實現高亮效果
分析：
? ①: 綁定點擊事件, 獲取點擊的索引
? ②: 循環的標簽設置動態class, 遍歷的索引, 和點擊保存的索引比較, 相同則高亮
效果演示:
MyTabBar.vue(正確代碼)
<template><div class="my-tab-bar"><div class="tab-item" v-for="(obj, index) in arr" :key="index":class="{current: activeIndex === index}"@click="activeIndex = index"><!-- 圖標 --><span class="iconfont" :class="obj.iconText"></span><!-- 文字 --><span>{{ obj.text }}</span></div></div> </template><script> export default {data(){return {activeIndex: 0 // 高亮元素下標}},// ....其他代碼 }; </script>3.3 案例-tabbar-組件切換
目的: 點擊底部導航, 切換頁面組件顯示
需求: 點擊底部切換組件
分析：
? ①: 底部導航傳出動態組件名字符串到App.vue
? ②: 切換動態組件is屬性的值為要顯示的組件名
效果演示:
補充: 給內容div.app- 設置上下內邊距
App.vue - 引入并注冊
<template><div><MyHeader:background="'blue'":fontColor="'white'"title="TabBar案例"></MyHeader><div class="main"><component :is="comName"></component></div><MyTabBar :arr="tabList"@changeCom="changeComFn"></MyTabBar></div> </template><script> import MyHeader from "./components/MyHeader"; // 目標: 完成底部封裝 // 1. MyTabBar.vue 組件標簽+樣式 準備 // 2. 字體圖標引入 // 3. 準備底部數據 // 4. 使用MyTabBar組件, 傳入數據(父->子), 循環產生底部導航 // 5. 子組件內props自定義檢驗規則(2-5項) // 6. 子組件內循環產生底部導航 import MyTabBar from './components/MyTabBar'// 目標: 切換組件顯示 // 1. 創建組件 - 編寫內容 // 2. 引入App.vue注冊 // 3. 掛載點設置is // 4. 切換comName的值(重要) // 5. 底部導航點擊- MyTabBar.vue里 // 子 -> 父技術 (傳要切換的組件名出來)import MyGoodsList from './views/MyGoodsList' import MyGoodsSearch from './views/MyGoodsSearch' import MyUserInfo from './views/MyUserInfo' export default {data() {return {comName: "MyGoodsList", // 默認顯示的組件tabList: [ // 底部導航的數據{iconText: "icon-shangpinliebiao",text: "商品列表",componentName: "MyGoodsList",},{iconText: "icon-sousuo",text: "商品搜索",componentName: "MyGoodsSearch",},{iconText: "icon-user",text: "我的信息",componentName: "MyUserInfo",},],};},components: {MyHeader,MyTabBar,MyGoodsList,MyGoodsSearch,MyUserInfo},methods: {changeComFn(cName){this.comName = cName; // MyTabBar里選出來的組件名賦予給is屬性的comName// 導致組件的切換}} }; </script><style scoped> .main{padding-top: 45px;padding-bottom: 51px; } </style>MyTabBar.vue - 點擊傳遞過來組件名
methods: {btn(index, theObj) {this.selIndex = index; // 點誰, 就把誰的索引值保存起來this.$emit("changeCom", theObj.componentName); // 要切換的組件名傳App.vue},},3.4 案例-tabbar-商品列表
目標: 為MyGoodsList頁面, 準備表格組件MyTable.vue-鋪設展示數據
- 需求: 商品列表鋪設頁面
分析：
? ①: 封裝MyTable.vue – 準備標簽和樣式
? ②: axios在MyGoodsList.vue請求數據回來
? ③: 請求地址: https://www.escook.cn/api/goods
? ④: 傳入MyTable.vue中循環數據顯示
? ⑤: 給刪除按鈕添加bootstrap的樣式: btn btn-danger btn-sm
效果演示:
MyTable.vue - 準備table整個表格標簽和樣式(可復制)
<template><table class="table table-bordered table-stripped"><!-- 表格標題區域 --><thead><tr><th>#</th><th>商品名稱</th><th>價格</th><th>標簽</th><th>操作</th></tr></thead><!-- 表格主體區域 --><tbody><tr ><td>1</td><td>商品</td><td>998</td><td>xxx</td><td>xxx</td></tr></tbody></table> </template><script> export default {name: 'MyTable' } </script><style scoped lang="less"> .my-goods-list {.badge {margin-right: 5px;} } </style>使用axios請求數據, 把表格頁面鋪設出來
main.js - 注冊axios配置默認地址
import axios from "axios"; axios.defaults.baseURL = "https://www.escook.cn";MyGoodsList.vue - 使用axios請求數據, 把數據傳入給MyTable.vue里循環鋪設
<template><div><MyTable :arr="list"></MyTable></div> </template><script> import MyTable from "../components/MyTable"; import axios from "axios"; axios.defaults.baseURL = "https://www.escook.cn"; // 目標: 循環商品列表表格 // 1. 封裝MyTable.vue 整體表格組件-一套標簽和樣式 // 2. axios請求數據 // 3. 傳入MyTable組件里循環tr顯示數據// 目標: 展示tags標簽 // 1. tags數組 - 某個td循環span使用文字 // 2. span設置bs的樣式// 目標: 刪除數據 // 1. 刪除按鈕 - 點擊事件 // 2. 作用域插槽把索引值關聯出來了 // scope身上就有row和index // 3. 刪除中使用scope.index的索引值 // 4. 刪除事件里刪除數組里對應索引值的數據 export default {components: {MyTable,},data() {return {list: [] // 所有數據};},created() {axios({url: "/api/goods",}).then((res) => {console.log(res);this.list = res.data.data;});} }; </script>MyTable.vue里正確代碼(不可復制)
<template><table class="table table-bordered table-stripped"><!-- 表格標題區域 --><thead><tr><th>#</th><th>商品名稱</th><th>價格</th><th>標簽</th><th>操作</th></tr></thead><!-- 表格主體區域 --><tbody><tr v-for="(obj, index) in arr":key="obj.id"><td>{{ obj.id }}</td><td>{{ obj.goods_name }}</td><td>{{ obj.goods_price }}</td><td>{{ obj.tags }}</td><td><button class="btn btn-danger btn-sm">刪除</button></td></tr></tbody></table> </template><script> export default {name: 'MyTable',props: {arr: Array} } </script><style scoped lang="less"> .my-goods-list {.badge {margin-right: 5px;} } </style>3.5_案例-tabbar-商品表格-插槽
目標: 使用插槽技術, 和作用域插槽技術, 給MyTable.vue組件, 自定義列標題, 自定義表格內容
- 需求: 允許用戶自定義表格頭和表格單元格內容
分析：
? ①: 把MyTable.vue里準備slot
? ②: 使用MyTable組件時傳入具體標簽
步驟:
MyTable.vue - 留好具名插槽
<template><table class="table table-bordered table-stripped"><!-- 表格標題區域 --><thead><tr><!-- <th>#</th><th>商品名稱</th><th>價格</th><th>標簽</th><th>操作</th> --><slot name="header"></slot></tr></thead><!-- 表格主體區域 --><tbody><tr v-for="(obj, index) in arr":key="obj.id"><!-- <td>{{ obj.id }}</td><td>{{ obj.goods_name }}</td><td>{{ obj.goods_price }}</td><td>{{ obj.tags }}</td><td><button class="btn btn-danger btn-sm">刪除</button></td> --><slot name="body" :row="obj" :index="index"></slot></tr></tbody></table> </template><script> export default {name: 'MyTable',props: {arr: Array} } </script>MyGoodsList.vue 使用
<template><div><MyTable :arr="list"><template #header><th>#</th><th>商品名稱</th><th>價格</th><th>標簽</th><th>操作</th></template><!-- scope的值: {row: obj, index: 索引值} --><template #body="scope"><td>{{ scope.row.id }}</td><td>{{ scope.row.goods_name }}</td><td>{{ scope.row.goods_price }}</td><td>{{ scope.row.tags }}</td><td><button class="btn btn-danger btn-sm">刪除</button></td></template></MyTable></div> </template><script> import MyTable from "../components/MyTable"; import axios from "axios"; axios.defaults.baseURL = "https://www.escook.cn"; // 目標: 循環商品列表表格 // 1. 封裝MyTable.vue 整體表格組件-一套標簽和樣式 // 2. axios請求數據 // 3. 傳入MyTable組件里循環tr顯示數據// 目標: 展示tags標簽 // 1. tags數組 - 某個td循環span使用文字 // 2. span設置bs的樣式// 目標: 刪除數據 // 1. 刪除按鈕 - 點擊事件 // 2. 作用域插槽把索引值關聯出來了 // scope身上就有row和index // 3. 刪除中使用scope.index的索引值 // 4. 刪除事件里刪除數組里對應索引值的數據 export default {components: {MyTable,},data() {return {list: [] // 所有數據};},created() {axios({url: "/api/goods",}).then((res) => {console.log(res);this.list = res.data.data;});} }; </script><style> </style>3.6 案例-tabbar-商品表格-tags微標
目標: 把單元格里的標簽, tags徽章鋪設下
- 需求: 標簽列自定義顯示
分析：
? ①: 插槽里傳入的td單元格
? ②: 自定義span標簽的循環展示-給予樣式
效果演示:
bootstrap徽章: https://v4.bootcss.com/docs/components/badge/
MyGoodsList.vue - 插槽
<span v-for="(str, ind) in scope.row.tags" :key="ind"class="badge badge-warning">{{ str }} </span>下面額外添加樣式
<style lang="less" scoped> .my-goods-list {.badge {margin-right: 5px;} } </style>3.7 案例-tabbar-商品表格-刪除功能
目標: 點擊刪除對應這條數據
- 需求: 點擊刪除按鈕刪除數據
分析：
? ①: 刪除按鈕綁定點擊事件
? ②: 作用域插槽綁定id值出來
? ③: 傳給刪除方法, 刪除MyGoodsList.vue里數組里數據
效果演示
提示: id在MyTable.vue里, 但是MyGoodsList.vue里要使用, 而且在插槽位置, 使用作用域插槽已經把整個obj對象(包含id)帶出來了
MyTable.vue
<slot name="body" :row="obj"></slot>? 2. my-goods-list.vue 根據 id 刪除
removeBtn(id){let index = this.list.findIndex(obj => obj.id === id)this.list.splice(index, 1) },3.8 案例-tabbar-添加tab
目標: 實現點擊tab按鈕, 出現輸入框自動獲取焦點, 失去焦點關閉input, 回車新增tag, esc清空內容
- 需求1: 點擊Tab, 按鈕消失, 輸入框出現
- 需求2: 輸入框自動聚焦
- 需求3: 失去焦點, 輸入框消失, 按鈕出
- 需求4: 監測input回車, 無數據攔截
- 需求5: 監測input取消, 清空數據
- 需求6: 監測input回車, 有數據添加
效果目標:
3.8.0 點擊按鈕消失, 輸入框出現
MyGoodsList.vue - 標簽位置添加
注意: 每個tab按鈕和input都是獨立變量控制, 那么直接在row身上的屬性控制即可
<inputclass="tag-input form-control"style="width: 100px;"type="text"v-if="scope.row.inputVisible"/><button v-else style="display: block;" class="btn btn-primary btn-sm add-tag"@click="scope.row.inputVisible = true">+Tag</button>3.8.1 input自動獲取焦點
main.js - 定義全局自定義指令
// 全局指令 Vue.directive("focus", {inserted(el){el.focus()} })MyGoodsList.vue - 使用 v-focus指令
3.8.2 input失去焦點關閉input
監聽input失去焦點事件, 讓input消失
@blur="scope.row.inputVisible = false"3.8.3 input回車新增tag
監聽input的回車事件, 如果無數據攔截代碼
@keydown.enter="enterFn(scope.row)"事件處理函數
enterFn(obj){ // 回車// console.log(obj.inputValue);if (obj.inputValue.trim().length === 0) {alert('請輸入數據')return}obj.tags.push(obj.inputValue) // 表單里的字符串狀態tags數組obj.inputValue = "" }3.8.4 input框esc清空內容
@keydown.esc="scope.row.inputValue = ''"今日總結
面試題
1. vue中solt的使用方式，以及solt作用域插槽的用法
使用方式：當組件當做標簽進行使用的時候，用slot可以用來接受組件標簽包裹的內容，當給solt標簽添加name屬性的 時候，可以調換響應的位置
(高級用法) 插槽作用域： 當傳遞的不是單一的標簽, 例如需要循環時, 把要循環的標簽傳入, 組件內使用v-for在slot標簽上, 內部可以v-bind:把值傳出來, 再外面把值賦予進去, 看示例
擴展閱讀: https://cn.vuejs.org/v2/guide/components-slots.html (了解即可, 一般用不上)
2. 跟keep-alive有關的生命周期是哪些？（必會）
? 1**）前言：**在開發Vue項目的時候，大部分組件是沒必要多次渲染的，所以Vue提供了一個內置組件keep-alive來緩存組件內部狀態，避免重新渲染，在開發Vue項目的時候，大部分組件是沒必要多次渲染的，所以Vue提供了一個內置組件keep-alive來緩存組件內部狀態，避免重新渲染
? 2**）生命周期函數：**在被keep-alive包含的組件/路由中，會多出兩個生命周期的鉤子:activated 與 deactivated。
? 1**、activated鉤子：**在在組件第一次渲染時會被調用，之后在每次緩存組件被激活時調用。
? 2**、Activated鉤子調用時機：** 第一次進入緩存路由/組件，在mounted后面，beforeRouteEnter守衛傳給 next 的回調函數之前調用，并且給因為組件被緩存了，再次進入緩存路由、組件時，不會觸發這些鉤子函數，beforeCreate created beforeMount mounted 都不會觸發
? 1**、deactivated鉤子：**組件被停用（離開路由）時調用。
? 2**、deactivated鉤子調用時機**：使用keep-alive就不會調用beforeDestroy(組件銷毀前鉤子)和destroyed(組件銷毀)，因為組件沒被銷毀，被緩存起來了，這個鉤子可以看作beforeDestroy的替代，如果你緩存了組件，要在組件銷毀的的時候做一些事情，可以放在這個鉤子里，組件內的離開當前路由鉤子beforeRouteLeave => 路由前置守衛 beforeEach =>全局后置鉤子afterEach => deactivated 離開緩存組件 => activated 進入緩存組件(如果你進入的也是緩存路由)
3. 自定義指令(v-check、v-focus)的方法有哪些?它有哪些鉤子函數?還有哪些鉤子函數參數?（必會）
? 全局定義指令：在vue對象的directive方法里面有兩個參數，一個是指令名稱，另外一個是函數。組件內定義指令：directives
? 鉤子函數：bind(綁定事件觸發)、inserted(節點插入的時候觸發)、update(組件內相關更新)
? 鉤子函數參數：el、binding
4. is這個特性你有用過嗎？主要用在哪些方面？（高薪常問）
? 1**）動態組件**
? ， componentName可以是在本頁面已經注冊的局部組件名和全局組件名,也可以是一個組件的選項對象。 當控制componentName改變時就可以動態切換選擇組件。
? 2**）is的用法**
? 有些HTML元素，諸如 <ul>、<ol>、<table>和<select>，對于哪些元素可以出現在其內部是有嚴格限制的。? 而有些HTML元素，諸如 <li>、<tr> 和 <option>，只能出現在其它某些特定的元素內部。 ? <ul>? <card-list></card-list>? </ul>? 所以上面會被作為無效的內容提升到外部，并導致最終渲染結果出錯。應該這么寫：
? <ul>? <li is="cardList"></li>? </ul>總結
以上是生活随笔為你收集整理的Vue自定义指令原来这么简单的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 魅族免费换电池第二批焕新机型名单公布：魅
- 下一篇： 被骗好久：2nm/3nm芯片的牛皮吹破了