Vue常用技巧

一、子组件与父组件通信

1、子组件使用父组件的值

2、子组件通过父组件提供的函数，修改父组件的数据

3、子组件与父组件方法同名，无限调用结果超出最大调用栈（一定要避免子组件函数与父组件传递来的函数同名）

二、根据v-model双向绑定vue数据和html标签（复选框，单选框），可直接影响值

三、删除选中内容（使用filter函数将数组中满足条件的筛选出来）

四、全选与全不选（通过forEach方法遍历数组所有元素）

五、根据选中数量，动态显示数据（根据条件计算数组元素）

	Array.reduce(function(total,item){
    	if(item.flag==true) return total+1;
    	else return total;
    },functionItem)
    * total：初始值和返回值，默认Object，在整个执行过程中，值不会丢失
    * item：当前数组元素
    * functionItem：回调函数初始值，初次调用将值赋值给total，之后不会作用
    * 回调函数执行次数和数组元素数量相同，functionItem会在第一次调用时赋值给total，total会根据函数体做出相应改变，最终total是整个函数返回值
    return this.items.reduce((total,item)=>item.flag==true?total+1:total,0);

六、实现若所有复选框都选中，则全选按钮选中，若有一个没选中，则全选按钮自动不选中，不影响全选按钮功能（使用监听函数的get和set）

• 需要了解，这里的计算属性我双向绑定在复选框上，它操作的仅仅是复选框是否勾选上，也就是说与全选功能分离开了，互相不影响，而对于这里的set，有没有都一样，只是语法要求这样写，而input上绑定了click事件用于实现全选功能，不会影响与被影响
  
• 点击事件如下：需要说明，这里假设没有全选，计算变量的值就是false，而我们现在想让它全选，点击后并不会改值，所有需要传相反的值过去，而传过去后，所有都被选中，num就变为数组长度，这时计算属性也就根据监听条件变成了true

七、本地存储数据，Watch深度监听(JS函数介绍来源于菜鸟教程)

• 使用Js原生函数Window localStorage 属性

  localStorage 可以创建一个本地存储的 name/value 对

    保存数据语法：
    window.localStorage.setItem("key", "value");
    读取数据语法：返回值为字符串
    var lastname =window.localStorage.getItem("key");
    删除数据语法：
    window.localStorage.removeItem("key");
  

  JSON.parse() 方法用于将一个 JSON 字符串转换为对象。

    JSON.parse(text[, reviver])
    参数说明:
    text:必需， 一个有效的 JSON 字符串。
    reviver: 可选，一个转换结果的函数， 将为对象的每个成员调用此函数。
  

  JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。

    语法
    JSON.stringify(value[, replacer[, space]])
    参数说明：
    
    value:
    必需， 要转换的 JavaScript 值（通常为对象或数组）。
    
    replacer:
    可选。用于转换结果的函数或数组。
    
    如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。
    
    如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。
    
    space:
    可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。
  

• 1、将写死的数据,清除，使用localStorage 动态将本地文件存储到数据中（这里items是个数组，但计算机不知道，所以在localStorage没有值的情况下，存储一个空数组，JSON.parse参数是字符串，所以写’[]’）

• 2、深度监视数据

八、Ajax请求，使用vue2.x推荐的axios

• 安装axios：命令npm install axios --save
• 引入模块并使用

九、SPA（单页面应用）前端路由，动态加载组件

• 1、创建普通vue-cli文件，然后用npm创建过程中引入Router路由，或者用命令安装路由npm install vue-router --save
• 2、src文件夹下创建router文件夹（路由文件都在这里名存放），然后在其中创建一个index.js文件
• 3、在主文件main.js配置路由
• 4、写一个小案例
  • 效果演示
  • 1、创建路由组件（因为一共两个选项卡，移入不同选项卡，会生成不同组件，所以有对应两个路由）
  • 2、将这两个组件添加到路由
  • 3、在父组件引入路由组件

嵌套路由（一个路由嵌套多个子路由）

• 1、定义子路由组件
• 2、注册子组件
• 3、在父路由中，使用子路由
• 测试

路由默认重定向，当转到特定路由组件，直接显示默认内容，而不需要选中才出现（注意，每次请求都只生效一次）

• 1、定义重定向

切换路由时，不结束刷新路由生命周期，保留数据

• 使用keep-alive标签套住的view，切换路由时，不会刷新数据
  

路由组件传值

• 1、先在路由的路径中声明参数
• 2、使用名字+params传值

根据url参数动态展示路由数据

通过router-view标签传递参数

编程式路由

鼠标事件

@mousedown:当用户单击鼠标按钮而元素有焦点时触发。
@mousemove:当鼠标移动而指针指向元素时触发。
@mouseout:当鼠标指针离开元素时触发。
@mouseover:当鼠标指针移动到元素上时触发。
@mouseup:当元素有焦点时，用户释放鼠标按钮时触发。
@mousewheel:当用户旋转鼠标滚轮而元素有焦点时触发。

@mouseenter:当鼠标指针进入元素时触发。这俩在元素中，移动到子元素上不会失去焦点
@mouseleave:当鼠标指针离开元素时触发。