vue中的一些用法，持续更新中......

1、跳转用法

@1、在template模板中通常使用router-link to='url'

@2、在js中

1、this.$router.push({path: ''/order/index''});
2、this.$router.push({path: '/order/page1',query:{ id:'2'}});
3、this.$router.push({name: '/order/page2',params:{ id:'6'}});

第一种不传参直接跳转到某一个页面，第二种，第三种传参跳转到某个页面，第二种和第三种不同的是都传了参数过去，第二种参数在url中显示第三种不显示

2、this的用法js中的this指向的该元素，在vue中this指代的是vue这个对象。

3、@1、prop 父组件向子组件传递信息,着重与数据传递，并不能调用子组件的属性和方法

　  @2、$ref 着重与索引主要用来调用子组件的属性和方法，不擅长数据传输，作用于元素的时候相当于选择器

　  @3、$emit 子组件向父组件传值，vm.$emit( event, arg )，$emit 绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件，父组件通过@event监听并接收参数。

　 @4、vm.$emit(event),父组件调用@event时，父组件调用了该函数

4、v-if和v-show的区别

v-if条件判断，如果为false将不显示在html中也不存在，而v-show如果为false不显示但是在html中存在只不过属性为display:none;

5、vue store 中的commit和dispatch

   this.$store.commit(fn,value)同步操作

  this.$store.dispatch(fn,value)异步操作

6、filters过滤器，前端用管道进行过滤{{status | statuFilter}},此时如果status为0，则会显示为未付款

　　　　　　filters:{
                    statuFilter:function(type){
                        switch(type){
                            case "0":
                                return "未付款";
                            case "1":
                                return "付款中";
                            case "2":
                                return "已付款";
                            default:
                                return "";
                        }
                    }
                }
简单的讲，前端表达式 value | filter(value)
filter这个函数接收到了value值，进行对value的操作，返回的值即是过滤后的值。

7、v-bind: 简写：,html属性不能使用双大括号形式绑定，只能使用v-bind指令

8、v-text与v-html的区别

前者不解析html标签渲染包含的信息，后者解析html标签之后渲染信息。此外这两个指令还有另一个用途“防抖”。

9、事件修饰 .stop, .prevent , .once , .self , .capture

stop:阻止事件冒泡

prevent:阻止默认事件

once:只触发一次

self:只有点击自己时才触发

capture:把冒泡改为倾听，冒泡从内岛外，倾听从外到内

10、compont用法，详解下方链接

https://www.cnblogs.com/samve/p/9424793.html

11、钩子函数，钩子函数的作用例如页面装载后开始读取一些数据进行初始化

beforecreated 组件创建前    1

created组件创建后    2

beforeMount 装载前    3

mounted装载后    4

beforeUpdate 更新前    5

updated 更新后    6

beforeDestroy 销毁前    7  this.$destroy 销毁，销毁实例，实例销毁了不存在上述操作

destroyed 销毁后    8

12、t如何修改itle，修改index.html文件，一般html文件在根目录下或者public目录下

13、v-for 倒序   reverse()     数组顺序颠倒

注释：当data的某个属性是一个数组时，用v-for可以遍历，但显然数组是可能变动的，因此对以下变动也进行数据绑定；

push()         数组末尾添加

pop()           数组末尾取出

shift()          数组开头取出

unshift()      数组开头添加

splice()        删除并插入

sort()           排序

reverse()     数组顺序颠倒

当利用以上方法变更数组时，被渲染的内容会实时更新；

14、原对象中无某个键值想要添加一个新的键值

this.$set(this.obj,"key","value");

this.$delete(this.obj,"key")；

 15、vue中遍历的写法

this.obj.foreach((el,index)=>{

})

遍历查找某一个值出现的次数同样可以用filter过滤去查找

this.obj.filter(item=>item.state==='0').length   //(过滤对象中state===0的个数有多少个)

16、复选框选中之后为true，未选中为false

checkbox 双向绑定一个变量之后可以通过选中来改变这个变量，改变的变量为布尔值

17、Axios   (ai'ke'c'l's)

npm install axios

CDN地址

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

axios get的用法，.catch处理错误函数

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 可选地，上面的请求可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

axios post请求,axios.post的三种用法  传送门

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

执行多个请求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));

18、map函数    遍历一个数组对这个数组进行操作变成一个新的数组，或者对这个数组进行值的判断取出想要的一条或多条

var memo=[{type:'text',content:'abcdefg'},{type:'number',content:'12345678'}]
var text=[],number=[]
memo.map(function (v,k) {
if(v.type=='text'){
text.push(v.content)
}
if(v.type=='number'){
number.push(v.content)
}
})

19、forEach循环

this.arr.forEach((value,index)=>{this.value=value+=value})

20、reduce 计算数组元素相加后的总和

array.reduce(function(total, currentValue, currentIndex, arr), initialValue);

total：初始值，currentValue 当前元素  currentIndex 当前元素索引  arr 当前元素数组对象 initialValue 传递给函数的初始值

return this.arr.reduce((total,v)=>{return total+v.count*v.prize},0)

21、活动路由的颜色 设置路由选中后路由连接的颜色，例如导航栏点击了相应的导航跳到了新的页面，导航栏相应的需要变颜色

linkActiveClass:'active'

22、工程化项目后在A组件想要引入B组件分三步,

在组件的同级目录下，新建个index.js

import Login from "./Login"
export default{
	install:function(Vue){
		Vue.component("Login",Login)
	}
}

一、引入 import b from "./b"

二、声明 components {b}

在main.js下面引用组件并use

import Login from '@/components/common/login'
Vue.use(Login);

三、在template里面使用  <b></b>，<b></b>为全局组件哪里都可以调用

23、vueX状态管理,状态管理在简单的计算中无需使用因为vuex有点太重了

状态管理的四个属性

state----定义状态属性

getters----定义读取状态的方法

actions----定义改变状态的方法（用户调用）

mutations---定义改变状态的方法（实际上的状态改变是由mutations处理，actions调用mutations，用户调用actions）