现在没用过vue框架，都不好意思说自己是干前端呢，当然这句话并不是说干前端非得会vue,只是想说明他的火爆程度，现在连小程序都推出了mpvue，你确定你还不赶紧了解了解vue吗，我这篇文章的内容都是些很基础的vue知识，后续会补上
1.vue中的生命周期
beforeCreated:创建之前,el和data并未初始化
created:data数据初始化完成,el没有
beforeMount:完成了data和el的初始化
mounted：完成挂载
update:完成更新
解析：
- beforecreate：可以在这加个loading事件
-created ：在这结束loading，还做一些初始化，实现函数自执行
-mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
-* beforeDestory *: 你确认删除XX吗？ destoryed ：当前组件已被删除，清空相关内容
2.vue.set的详解
其中key为对象里面的键，value为对象里面的值，其本意就是动态改变原来已经固定的值值，就需要使用vue.set(‘想要改变的对象’，’要渲染的键‘，’要渲染的值‘)
写法1：Vue.set(object,key,value)
写法2：this.$set(object,key,value)
解析
遍历后{{parent.name}}的已经固定了，这时候点击编辑按钮，改变里面的值，虽然后台数据已经发生了改变，但那时页面渲染的效果并不会发生改变，这时候要想改变页面上的值，就需要使用vue.set(‘想要改变的对象’，’要渲染的键‘，’要渲染的值‘)，
在空的数组中不能使用push传入数据，所以应当使用vm.$set给数组添加
3.在vue中绑定图片的用法
1.<img :src="imgurl">
2.<img src=" 'http://www.baidu.com' +item.imgName ">
3.如果两个数都是变量，可是使用创建一个函数来进行拼接
changImgUrl:function(img_name,type){
returnvm.imgurl +type+'/'+img_name;
}
** 使用v-bind动态给元素绑定
这样可以在遍历的时候给不同的元素动态绑定不同id
4.vue.$nextTick
在下次dom更新循结束之后延迟回调，在修改数据之后立即使用这个方法，获取更新后的dom
vm.$nextTick(function(){
在这里写要修改的代码，让其在修改之后能够立即显示出来
})
5.vue获取当前点击的元素
在vue中获取当前点击的元素对象，在点击的方法里 传 入$event,然后在methods方法里面接受传过来的值，具体如 下
1.@click="getlist($event)"
2.getlist:function(event){
vartarget=event.target;//指的是当前元素
}
6.事件修饰符
.stop阻止冒泡
.prevent阻止默认行为
在vue生命周期中都不要使用箭头函数 （data,create,mounted,update），因为本来this指向的是vue实例，而这时候如果使用箭头函数，那么this将不再指向vue实例
v-if 和 v-else-if
7.解决页面闪烁问题
这个指令保持在元素上直到关联实例结束编译 /，可隐藏为编译的标签直到实例准备完毕
1.[v-cloak]{display : none}
2. 在当前元素或者当前页面的控制器里面加入此标签
**: 一起使用时，这个指令可以隐藏未编译mustachr标签，直到实例准备完毕，在需要引用的div上加入标签v-cloak
8.computer计算属性
computer也是一个对象，类似于methods,在里面也可以定义很多方法。计算属性的结果会被缓存，写法如下：
computer:{
// 计算两个数的和
plusL:function(){
returnthis.a*2
}
}
9.v-else
前一兄弟元素必须有v-if 或v-else-if
10.新增v-else-if
前一兄弟必须有v-if或v-else-if
11. 数组的更新检测
vue包含一组观察数组的变异方法，所以它们也会出发视图更新
push()在数组后面添加一个数
pop()删除数组最后一个数
shift()删除数组的第一个数
unshift()在数组前面添加一个数
sort()对数组的元素进行排序//a-b从小到大 b-a从大到小
splice(开始的位置，删除的个数)从数组的index位置开始删除N个数
reverse()颠倒数组的顺序
例如：vm.parents.push( )
12.vue不能检测一下变动的数组
由于javascript的限制，Vue不能检测一下变动的数组
1.当你利用索引直接设置一个项时 vm.arr[index]=newValue
解决方法：
Vue.set(example.item, indexItem ,newValue);
example.item.splice(indexItem ,1,newValue);
2.当你修改数组的长度时 vm.item.length =newLength
example.item.spice(newLength);
13. Vue不能检测对象属性的添加或删除
对于已经创建实例，vue不能动态添加根级别的响应式属性，但是可以使用Vue.set( object, key, value )方法嵌套对象添加响应式属性
var vm =newVue({
data:{
list:{}
}
})
//给list对象添加一个新的属性
Vue.set( vm.list,'age',27);
vm.$set( vm.list,'age',27);
14.父传值给子
props可以是数组或对象，用于接收来父组件的数据，或者使用对象作为替代
Vue.component(' props-demo',{//数组
props:[' size','myMessage'];
})
Vue.component('props-demo',{//对象
props:{
height:Number,
age: num,
}
}
15.vue中的watch属性
watch是一个对象，用于观察vue实例上的数据变动
varvm=newVue({
data:{
},
watch:{
lastName:function(newVal,oldVal){
//当监听到数据的改变时会执行这个函数
}
}
})
16.axios发送get请求
1.axios.get('url').then(function(res){})
2.axios.get('url',{params:{id:123}})//传参
17.axios发送post请求
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;
}
17.私有过滤器
私有过滤器是将过滤器中的方法直接绑定到当前Vue实例上面，所以只能在当前托管区域中使用
newVue({
el:'#app',
filters:{
'过滤器名称'：function(input,arguments){
//input是指过滤器时管道符前面的数据
//arguments是过滤器方法自己的参数
return;
}
}
})
18.全局过滤器
全局过滤器相当于是将过滤器中的方法绑定到Vue构造函数的原型中，可以保证每一个Vue实例的托管区域都可以使用
Vue.filter('过滤器名称'，function(input,arguments){
return;
})
19.vm的使用时间
vm在很多时候，页面还未加载出来，不能使用vm，这时我们有两种解决方法
1.在created里面 写 this.vm;
created(){
vm =this;
}
2.只要页面发送ajax，就会有延迟，这样在后面执行的时候就可以使用vm
19.在vue中给元素动态添加样式
1.双花括号语法
2.当index的值等于 currentIndex的值是，样式才显示
{{item.name}}
3.动态切换class
data:{
isA:true,
isB:false
}
20.$refs在javascript获取元素
1.首先给子组件做标记
2.在父组件中使用this.$refs.one访问
this.$refs.one
*如果想获取dom元素的宽度以及其他属性，也可以适应$refs
21.azjy.azjyedu.com/api/v2/temp/listens
访问在线试听
22.vue遍历对象中的（val,key,index）
one:{
name:'nihao',
age:22,
height:170
}
其中，val是遍历得到的属性值，key是遍历得到的属性名(one)，index是遍历次序这里的key/index都是可选参数
23.vuex
如果项目数据过多的话，直接管理是非常不方便的，这时候就应该采用vuex,Vuex是一个专门为Vue.js应用程序开发的状态管理模式，它采用集中式存储管理应用所有的组件的状态
1.安装vuex
npminstall vuex --save
npmrun dev
2.在main.js中引入vuex
import Vue from'vue';
import Vuex from' vuex';
Vue.use(Vuex);//挂载使用它
24.mui中的tap事件
mui中的区域滚动组件，有个默认阻止冒泡事件，这时候在vue中使用click事件就会无法触发，具体做法是把click事件改为tap事件,只有区域滚动事件click事件才无法生效
vue中的get传参
axios.get(url,{params:{'aa':hello,'bb':'baibai'}})
我把图片的id都放入数组，让然后传给你，你再传给我过滤后的图片信息，然后你让我通过自己创建的数组里面的id来对你传过来的图片信息进行处理，可是我自己创建的数组会随着不同按钮而发生改变，
25.根据一个数组中的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:'算了']
26. filter过滤数组
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’
27.vue中组件通信
父子组件的通信：emit
非父子组件之间的通信：event bus
复杂情况：vuex
网友评论