1. vue2中的過濾器
vue的過濾器只用用在 雙花括弧{{}} 和 v-bind 中，使用時採用|符號來實現
在main.js中全局定義過濾器方法，即可在項目中直接使用
直接在文件中使用filters，在其中定義要使用的過濾器
多個過濾器可串聯使用，前一個過濾的返回值作為後一個過濾器的入參
過濾器像函數一樣，可以接受參數
2. vue中的過濾器，Filter在實戰中的使用
先src文件夾下建立一個filter文件夾，然後在filter文件夾下建立一個moneyFilter.js文件
toFixed()方法。
3.編寫vue里的filter屬性
這里需要注意的是你fitler的名字可以隨便起，但是你用的toMoney方法，要和你上邊引入的一樣。
3. vue過濾器在v2.0版本怎麼用
在這個教程中，我們將會通過幾個例子，了解和學習VueJs的過濾器。我們參考了一些比較完善的過濾器，比如orderBy 和 filterBy。而且我們可以鏈式調用過濾器，一個接一個過濾。因此，我們可以定義我們自己的過濾器在我們的Vue實例中。 閱讀這個教程的前提是你對Vue已經有了基本的語法基礎。 VueJs中的過濾器基礎 過濾器是一個通過輸入數據，能
4. 關於vue中的過濾器使用--結合element-ui的table項
參考文檔： https://blog.csdn.net/tg928600774/article/details/81945140?utm_source=blogxgwz1
https://blog.csdn.net/qq_41649755/article/details/106331555?utm_medium=distribute.pc_relevant.none-task-blog--1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog--1.channel_param
項目需求：
從介面中獲取數據，渲染顯示在表格中，且數據精度保留兩位小數。
在element-ui中表格的顯示中，插槽的具體使用。
table按照tableData這個數組的長度來生成多少行，按照有多少個el-table-column來生成多少列。
<template slot-scope="scope">
在<el-table-column>中使用自定義模板，實現對渲染數據的改變。
template中自定義列模板，自定義列的顯示內容，可組合其他組件使用。
利用scope.row獲取該行中dataYoyYear所對應的列值數據，進而進行修改。
拿到數據之後，就要結合vue的過濾器對數據進行修改精度。
mention！此時的filters方法，而不是filter。important：該方法與methods並列，否則報錯！
5. vue 裡面怎麼調用過濾器方法
在user-list組件中我們需要遍歷聯系人列表，filter_key用來傳給該組件，和搜索欄組件一樣，也用props接收一版下，並且在權裡面插入要過濾的內容，
filterBy是返回過濾後的數組，orderBy是排序，前者的使用方法是filterBy 一個key(欄位)，in xxx 就是指搜索欄位，這里需要注意的是in後面跟的必須是obj裡面的key，因為我們的需求是同時保證輸入漢字或者拼音都能查詢，所以in後面跟的是okr_owner和user.u_name(這是vue渲染的數據，我們展示該聯系人用的是裡面的u_name，okr_owner則為拼音)，下面附上數據結構。對於在搜索時如何去掉這些字母索引，我們只需要在通訊錄頁面中的<user-list>加入一個欄位，然後使用watch來監聽一下key_word即可。
6. vue項目中常用到哦，不看看嗎
現在沒用過vue框架，都不好意思說自己是干前端呢，當然這句話並不是說干前端非得會vue,只是想說明他的火爆程度，現在連小程序都推出了mpvue，你確定你還不趕緊了解了解vue嗎，我這篇文章的內容都是些很基礎的vue知識，後續會補上
解析 ：
- beforecreate ：可以在這加個loading事件
- created ：在這結束loading，還做一些初始化，實現函數自執行
- mounted ： 在這發起後端請求，拿回數據，配合路由鉤子做一些事情
- * beforeDestory * : 你確認刪除XX嗎？ destoryed ：當前組件已被刪除，清空相關內容
其中key為對象裡面的鍵，value為對象裡面的值，其本意就是動態改變原來已經固定的值值，就需要使用vue.set(『想要改變的對象』，』要渲染的鍵『，』要渲染的值『)
解析
遍歷後{{parent.name}}的已經固定了，這時候點擊編輯按鈕，改變裡面的值，雖然後台數據已經發生了改變，但那時頁面渲染的效果並不會發生改變，這時候要想改變頁面上的值，就需要使用vue.set(『想要改變的對象』，』要渲染的鍵『，』要渲染的值『)，
在空的數組中不能使用push傳入數據，所以應當使用vm.$set給數組添加
** 使用v-bind動態給元素綁定
這樣可以在遍歷的時候給不同的元素動態綁定不同id
在下次dom更新循結束之後延遲回調，在修改數據之後立即使用這個方法，獲取更新後的dom
在vue中獲取當前點擊的元素對象，在點擊的方法里 傳 入$event,然後在methods方法裡面接受傳過來的值，具體如 下
這個指令保持在元素上直到關聯實例結束編譯 /，可隱藏為編譯的標簽直到實例准備完畢
computer也是一個對象，類似於methods,在裡面也可以定義很多方法。計算屬性的結果會被緩存，寫法如下：
前一兄弟元素必須有v-if 或v-else-if
前一兄弟必須有v-if或v-else-if
vue包含一組觀察數組的變異方法，所以它們也會出發視圖更新
由於javascript的限制，Vue不能檢測一下變動的數組
對於已經創建實例，vue不能動態添加根級別的響應式屬性，但是可以使用Vue.set( object, key, value )方法嵌套對象添加響應式屬性
props可以是數組或對象，用於接收來父組件的數據，或者使用對象作為替代
1.axios.post('url', {data} )
.axios發送跨域請求
var headers ={
'headers':{
'Content-Type':' application/x-www-from-urlencoded'
}
}
axios.$http.post('url', {data},設置請求頭)
axios發送post請求時傳過去的數據格式不是formate格式。從而獲取不到後台傳過來的數據
解決辦法：在頁面中引入qs模塊
import qs from'qs';
axios.interceptors.request.use((config)=>){
config.date=qs.stringify(config.data);
returnconfig;
}
私有過濾器是將過濾器中的方法直接綁定到當前Vue實例上面，所以只能在當前託管區域中使用
全局過濾器相當於是將過濾器中的方法綁定到Vue構造函數的原型中，可以保證每一個Vue實例的託管區域都可以使用
vm在很多時候，頁面還未載入出來，不能使用vm，這時我們有兩種解決方法
訪問在線試聽
如果項目數據過多的話，直接管理是非常不方便的，這時候就應該採用vuex,Vuex是一個專門為Vue.js應用程序開發的狀態管理模式，它採用集中式存儲管理應用所有的組件的狀態
mui中的區域滾動組件，有個默認阻止冒泡事件，這時候在vue中使用click事件就會無法觸發，具體做法是把click事件改為tap事件,只有區域滾動事件click事件才無法生效
vue中的get傳參
axios.get(url,{params:{'aa':hello,'bb':''}})
我把圖片的id都放入數組，讓然後傳給你，你再傳給我過濾後的圖片信息，然後你讓我通過自己創建的數組裡面的id來對你傳過來的圖片信息進行處理，可是我自己創建的數組會隨著不同按鈕而發生改變，
const arr1=[12,23,45,12,45];
const arr2=[12:'你好',23:'是嗎',45:'算了']
for(let i arr1){
vm.$set(arr2,i,arr2[arr2[i]]);
}
這樣得到的arr2 =[12:'你好'，23:'是嗎'，45:'算了'，12:'你好'，45:'算了']
var a=[1,2,3,4,5,6,];
var b=a.filter((value,index)=>{
value:當前數組對應的值
index:當前值對應的索引
returnindex！=2;
})
在vue中
import Vue from 『vue』 //es6寫法
import App from 『./App』
父子組件的通信：emit
非父子組件之間的通信：event bus
復雜情況：vuex
7. vue2.0是不是不能用過濾器了
當然能，但屬性中不能，2.1可以。
8. Vue的組件,過濾器，自定義指令以及v-if
<div class="app">
<h1 v-show="false">我愛你</h1>
v-if是直接將dom刪除了，在dom文檔中已經找不到對應的dom，變成了注釋
<h1 v-if="false">我愛你</h1>
如果頻繁使用 就使用v-show 可以節約性能開銷
如果短暫使用，例如頁面一開始載入的時候進行判斷顯示 優先使用v-if
實際開發中，使用v-if比較多
<li v-for="(item,index) in arr">{{item}}</li>
</div>
<script src="./node_moles/vue/dist/vue.js"></script>
<script>
new Vue({
el: '.app',
data: {
msg: 123,
list: [1, 2, 3]
},
computed: {
arr: function () {
return this.list.filter(r => r > 1)
}
},
methods: {
}
})
</script>
<div class="app">
<child1></child1>
<div><child-a/></div>
<div><child-b/></div>
<template id="childB">
<div>
<h1>我是程序員</h1>
<h1>我是程序員</h1>
</div>
</template>
</div>
<script src="./node_moles/vue/dist/vue.min.js"></script>
<script>
Vue.component('child1',{
template:`<h1>我是child1</h1>`
})
Vue.component('childA',{
template:`<h1>我是childA</h1>`
})
Vue.component('childB',{
template:'#childB'
})
new Vue({
el:'.app'
})
</script>
<div class="app" v-cloak>
<h1>{{'我愛張sir'|str('金牌廚師')}}</h1>
<h1>{{'hello'|he}}</h1>
</div>
<script src="./node_moles/vue/dist/vue.js"></script>
<script>
Vue.filter('fn',function(v,s){
console.log(v);
return v/* .substring(0,v.indexOf(':')) */+s
})
new Vue({
el:'.app',
/* 局部過濾器 */
filters:{
str(v,s){
return v+s
},
he(v){
return v.split('').reverse().join('')
}
}
})
當頁面刷新的時候data中的數據還沒有渲染出來，頁面中就會顯示原本寫的插值語法，這時候就需要消除這個bug
在綁定的實例化對象的元素上上添加v-cloak 並在style樣式中添加（只要前面加上v-都可以實現，隨意命名，通常使用clock）
display: none;
}
<div class="app">
<input type="text" v-bg>
<input type="text" v-focus="{background:'yellow'}">
<div style="width: 100px;height: 100px;" v-bg></div>
<p v-sty="{background:'pink',color:'yellow'}">我是程序員</p>
</div>
<script src="./node_moles/vue/dist/vue.js"></script>
<script>
Vue.directive('bg', function (el) {
/* 回調的第一個參數就是元素本身 */
console.log(el);
el.style.background = 'red'
})
/* 全局自定義指令 寫全方式 */
Vue.directive('focus', {
/* 當綁定元素插入到DOM中 */
inserted: function (el, bind) {
el.focus();
console.log(bind);
el.style.background = bind.value.background
}
})
new Vue({
el: '.app',
/* 局部的自定義指令 要加s */
directives: {
sty: {
inserted (el, bind) {
el.style.background = bind.value.background;
el.style.color = bind.value.color
}
}
}
})
9. 20《Vue 入門教程》Vue 插件
本節我們將介紹 Vue 的插件。包括什麼是插件、如何使用插件、如何編寫一個簡單的插件。其中，編寫和使用插件是本節的重點。本節我們將帶領大家寫一個簡單的插件示例，同學們在學完本節後可以嘗試編寫其他的插件來加深學習。
Vue 插件是對 Vue 全局功能的擴展，他可以給 Vue 添加全局方法、屬性、組件、過濾器、指令等等。
通過全局方法 Vue.use () 使用插件。它需要在你調用 new Vue () 啟動應用之前完成：
也可以傳入一個可選的選項對象：
Vue.use 會自動阻止多次注冊相同插件，即使多次調用也只會注冊一次該插件。 Vue.js 官方提供的一些插件 (例如 vue-router) 在檢測到 Vue 是可訪問的全局變數時會自動調用 Vue.use ()。然而在像 CommonJS 這樣的模塊環境中，你應該始終顯式地調用 Vue.use ()：
awesome-vue 集合了大量由社區貢獻的插件和庫。
Vue.js 的插件應該暴露一個 install 方法。這個方法的第一個參數是 Vue 構造器，第二個參數是一個可選的選項對象：
接下來，我們寫一個具體的插件示例：
實例演示
"運行案例" 可查看在線運行效果
代碼解釋： JS 代碼第 3-20 行，我們定義了插件 MyPlugin，該插件中包含一個全局組件 MyButton。 JS 代碼第 22 行，通過 Vue.use 使用 MyPlugin。 HTML 代碼第 2、4、6、8、10 行，使用 MyPlugin 插件中的 MyButton 組件。
本節，我們帶大家學習了 Vue 插件的使用方式。主要知識點有以下幾點：
10. vue如何自定義過濾器
一、什麼是過濾器？
過濾器是在數據渲染時，根據使用的過濾器來渲染數據，過濾器不改變真正的data，而只是改變渲染的結果，並返回過濾後的版本。
二、過濾器怎樣使用？
渲染時使用 「| 過濾器名稱」。eg: v-for=」val in arr | filterBy 『a』 取包含』a』的數據
三、常用過濾器介紹
1、debounce ------配合事件，延遲執行
eg: @keyup=」functionname | debounce 2000 」
2、limitBy 配合數據，限制幾條數據
eg: v-for=」val in arr | limityBy 2 1」 從下標為1的元素開始取兩條數據
eg: v-for=」val in arr | limityBy 2」 只取前2條數據
3、filterBy 取包含某個元素的數據
eg: v-for=」val in arr | filterBy 『a』 取包含』a』的數據
4、orderBy 1（升序）/2（降序）排序
eg: v-for="val in arr | orderBy 1" 升序排序
eg: orderBy 年齡 1 按年齡升序排序
三、自定義過濾器
時間過濾器
<div class="box">