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">