一、vue {{}}（Maustach标签）不知道的用法
在html中进行渲染时会经常用到{{}}进行渲染data中的数据
这里面可以直接是数据也可以是js表达式，不支持条件控制语句，但是支持三目运算{{true？1：0}}
甚至可以是vue中内置的过滤器（可以有多个过滤器），在表达式后方加过滤器，类似于linux的管道指令{{example | filter1 | filter2}}
如果不习惯{{}}可以在Vue.config中配置绑定的语法，Vue.config是一个对象，包含了Vue.js的所有全局配置
可以在Vue实例化前修改其中的属性 分隔符在Vue.config中源码定义如下：let delimiters=['{{','}}']
如果修改了默认的文本插值的分隔符：Vue.config.delimiters=["<%","%>"]则文本插值的语法
从{{exmple}}变为<%example%>
二、vue中$refs的用法
<divid="app">
<inputtype="text"ref="input1"class="input1"/>
<button@click="add">添加</button></div>
<script>
newVue({
el:"#app",
methods:{
add:function(){
this.$refs.input1.value ="22";//this.$refs.input1 减少获取dom节点的消耗
}
}
})
</script>
一般来讲，获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。
但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。
然后在javascript里面这样调用：this.$refs.input1 这样就可以减少获取dom节点的消耗了
三、v-if v-show的区别
v-if是惰性的——————如果初始渲染时条件为假什么都不做，在第一次变为真时才开始局部编译
v-show元素始终被编译保存，只是简单的css切换
v-if有更高的切换消耗 而v-show有更高的初始渲染消耗，因此如果有需要频繁切换的的用v-show比较好，如果在运行时条件不太可能改变用v-if比较好
四、debounce vue在同步输入框的值与数据时的防抖
<input v-model="msg" debounce="5000">{{msg}}
此时如果在输入框中输入数据 msg不会立刻变化，而是会在5秒后变成输入的内容
这个在进行模糊搜索（就是每在输入框中输入一个自都会调服务）这种情况下可以用这个方法，
可以减少不必要的请求或者数据渲染
五、v-for+fileterBy方法
<div v-for="n in 10">hei! {{$index}}</div>（此时的{{$index}}可以把便利的数组的下标显示出来）
输出结果： hei！ 0
hei！ 1
hei！ 2
。
。
hei！ 9
<inputtype="text"v-model="searchInfo">
<ul>
<liv-for="i ininfo|filterBysearchInfoin 'name'">{{i.age}}</li>
</ul>
info:[{name:123213,age:123},{name:12321334,age:1234},{name:789,age:90},{name:1098,age:8976}],
//此时如果输入框终输入789那么渲染出的age就是90
五、为什么用Vue.$set()及其用法
在开始开发vue中遇到过这种问题，就是我在按钮上添加一个方法，这个方法的作用是改变data里一个b对象的某一个字段a的value，这个对象的a字段一开始是在界面上渲染出来的，此时点击这个按钮，发现渲染出来的这个字段还是开始渲染出来的初始值，没有任何变化，此时用vue调试工具发现，data中b对象的a字段的值已经改变。
因为vue文档中有这样的描述：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
如果想要实现值改变的同时视图也会更新就要用到vue.$set
this.$set(要改变属性值的对象或数组,属性的名字,要改成的值)
六、关于vue中的复选框，点一下会选中所有选项问题的解决
<table class="for-table">
<th >日期
<th>欠费金额
<tr v-for="(item,index) indetailCurrent" :key="index">
<td><input type="checkbox" v-model="detailCollect" >
<td v-text="item.date" >
<td v-text="item.account">
</table>
data(){
return{
accountItem:null,
detailCollect:[],//复选框选中的数据的集合
}
}
看着是没什么问题的但是如果真的这样使用，会发现一个奇怪的现象，点击一个选项会选中所有的选项
解决方案：给复选框绑定一个value
<input type="checkbox" v-model="detailCollect" :value="item">
此时的复选框的v-model是一个数组 点击一次这个数组里面就会push进去一个:value绑定的item值 如果不加:value="item"选中一个所有的复选框都会被选中,这样的话点击一下detailCollect数组中就会push进去一个
选中的元素的对象了
