Vue项目开发笔记

一、将字符串转换成数字类型

         value = +value

二、自定义数据校验规则

1. 在rules中定义校验的方法名以及触发方式
   
2. 在method中自定义的校验方法
   

三、下拉框调用后台接口显示数据并将key传回

1. 后台给的url与方法定义到配置文件中，自定义方法并导出
   
   
2. 在需要调用接口的页面methods里面定义方法，并在钩子函数中调用该方法。
   
   
3. 在浏览器查看data的类型
   
   
4. 在下拉框填入数据
   
   

四、用v-if控制元素的设置与隐藏

        根据上面下拉框的选择值来控制下面元素的显示和隐藏，如果选择第二个选项就显示，注意类型是字符串的‘2’还是数字的2。v-if为true时显示，为false时隐藏，与v-show的区别是，DOM是否存在，前者false时不存在，后者存在只是display：none。
        

五、如何在表格中的输入字段进行校验（rule规则只针对表单校验）

1. 设置失焦事件，设置一个错误标志位，如果错误标志可以选择class进行红色框标志回显。
   ：class=”{“is-error”: scope.row.isError }” –动态选择class
   
   
   
   
2. 补充一点input输入框可以设置最大长度与最小长度校验
   
3. 具体校验方法
   
4. 在保存时校验表单时加入新的正则校验
           前面设置的校验主要是在输入时失焦的一个验证，是写给客户在输入时自己检验的，实际在保存的时候的校验需要在保存的地方加正则校验
   
   

六、开关组件使用（表示开启，启用等情况）

        设置开关，标注有效值和无效值，一定要：, 不然就是字符串，下面在data里定义字段即可。
        
        

七、带描述和插槽的输入框设定

        

八、如何根据下拉框选择的不同切换下方不同的描述语

1. 在选择框定义dec描述为计算属性绑定
   
2. 定义计算属性，在computed
   

九、关于activated的位置问题引申钩子函数

1. created与mounted钩子函数的位置同样与methods并列，不是在methods里面。created在实例创建完成后被立即调用。mounted：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。

2. created在mounted之前。在created的时候，视图中的html并没有渲染出来，所以此时如果直接去操作html的dom节点，一定找不到相关的元素。而在mounted中，由于此时html已经渲染出来了，所以可以直接操作dom节点。

3. created()：在创建vue对象时，当html渲染之前就触发；但是注意，全局vue.js不强制刷新或者重启时只创建一次，也就是说，created()只会触发一次；

4. activated()：在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等
   
   
   

十、一个规范的接口：包括传参与返回值

        注意调用方法时参数需要用{ data : params }传送，不然无法传送
        

十一、npm端口被占用错误提示

	Emitted 'error' event at:
	    at emitErrorNT (net.js:1365:8)
	at process._tickCallback (internal/process/next_tick.js:114:19)

        解决方法：暴力关node进程，暴力关项目，反正其他方法对我无效，我是这样解决的。

十二、如何批量操作某一组数据转变状态

        批量选择一批数据，统一修改他们的启用和禁用状态，要求在修改状态后立即刷新表格。选择一组数据，点击批量启用，则表格中他们的状态统一修改为启用，禁用类似

1. 先设置复选框，获取到批量选择的数据
   
   
2. 操作上添加两个按钮启用和禁用，在表格中增加一栏状态，绑定字段
   
   
3. 为按钮绑定对应的方法，在方法中调用一个接口，传参标识是启用还是禁用，在调用接口成功后刷新表格。
   

十三、控制批量操作时按钮禁用和启用状态的转换，如批量删除

        先声明一个空的数组，来承接所勾选的数据，定义方法，将表格锁勾选数据存入刚才声明的数组中，最后表格的selection-change事件中绑定刚才定义的方法。最后在按钮的disable中定义，如果勾选数组长度为0则false，有值为true。

        selectedRow即为所勾选的数据组成的组合。
        
        
        

十四、关于删除（包括批量删除和单独数据删除）

1. 设置多选：前面已经有关于设置表格多选的讲解，这里@selection-change是一个箭头函数直接写，也可以单独写一个方法到method里面，前面有示例，目的就是将表格所勾选的值赋值到我们在data声明的数组中
   
   
2. 在批量删除按钮与单独删除绑定方法，注意传的布尔值true表示为批量，false表示为单独，为了控制点击按钮后弹出框内容文字提示的变化，“确认删除XXXX“/“确认删除N个XXX
   
   
3. 具体删除方法：提示框+调用删除接口传入数据+判断返回结果是否成功刷新表格
   
   传入所选数据的id也可以这样写
   

十五、从文件路径中截取文件名

        从file中截取文件名：var index = file.match(/([^\\]+)(\.[^\(]+)/i)
        
        

十六、Vue复制指定内容到剪切板

        采用插件：vue-clipboard2

相关讲解网址：

        https://www.npmjs.com/package/vue-clipboard2
        https://github.com/Inndy/vue-clipboard2/blob/master/samples/sample2.html
        https://blog.youkuaiyun.com/fengjingyu168/article/details/81015200

        分为两种方法：一为通过点击按钮复制，二为可以指定复制的value，此处为第二种方法的实践

1. 首先安装vue-clipboard2插件，并全局注册

   	npm install --save vue-clipboard2			// 安装插件
   	import VueClipboard from 'vue-clipboard2'	// 引入插件
   	Vue.use(VueClipboard)						// 注册使用
   

   

2. 使用方法（可以在任意地方，传入待复制内容）
   

十七、关于如何根据后台返回字段对于数据表格的数据复选框禁用操作隐藏

1. 首先是复选框禁用的方法
   
   
   
2. 控制操作按钮隐藏与显示
   

十八、关于批量操作传送多个ID两种传参格式的比较

1. 第一种：直接map，里面为数字类型的数据组成的数组
   
   
2. 第二种：map过后加join逗号，里面为一个字符串，字符串由每个数字类型加逗号拼接而成
   
3. 如果是字符串类型的数据无join逗号的格式，直接map；与数字类型的数据有join逗号的格式对比
   

十九、在表格中如何将后台传至的小数转化为百分比显示

         let str=Number(number*100).toFixed(2);

1. 第一种：利用方法处理数据（未经实践不知是否有效）
   
   
2. 第二种方法：小数过滤器（附赠日期格式化过滤器）
   
   

二十、在表格中如何将日期格式化显示

        需要引入moment，目前格式化形式为2019-05-20
        
        
        

二十一、JS设置数字显示：每三位加一个逗号分隔

        先写一下方法：str.replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,') 【str必须是字符串形式，如果是数字形式要toString()一下】

        这里需要运用到计算属性，数据的处理写在计算属性里面
        
        在计算属性处理中，先获取数值，由于是数字类型，所以需要转字符串再进行调用方法。
        
        效果如图所示：1912108格式化后的效果
        

二十二、动态绑定class样式

        :class=“{ ‘active’: isActive, ‘sort’: isSort }”
        active为样式名，isActive为一个布尔型变量，当这个变量为真的时候，active的样式生效，后面可以累加其他的样式判断。

二十三、关于路由目前遇到的知识点整理

1. 传递参数

        本次项目涉及到的业务场景为列表页向详情页跳转但是要附加参数传递。Push的方法有，可以是path+query搭配，也可以name+query/params搭配，path不能和params搭配，参数会失效。

        采用path就是直接写路由的路径，采用name就是在路由配置文件中对配置的路由命名一个name，在push的时候写入该name即表示跳转该路由。

        query和params的区别为，query传递的参数会显示在地址栏，并且跳转后强制刷新参数不会丢失，params传递的参数会隐藏不会显示在地址栏，但是强制刷新后数据会丢失。因为二者的传参机制不同导致。如果要隐藏参数用params，如果强制刷新不被清除用query另一页面接受参数即为this.$route.params/query.jobNo

        
        
        
        在计算属性接受参数，跟随路由的变化实时变化，相当于watch。在该页面调取这个变量，直接采用this.personId即可。
        
2. 路由返回传递参数

        这个应用场景为，列表页左边有三个tab，点击其中一个tab右边即为查询的数据列表页，列表页数据最后一栏操作可以跳转进详情页，但是从详情页返回的时候，无法定位到之前选择的第三个tab，而是页面刷新默认跳转到第一个tab，页面示意图如下。

        解决方法：1. 将该页面做缓存，左边三个tab其实是包含在一个信息查询的组件中，要做缓存必须把整个信息查询QueryInfo组件做缓存，在App.vue文件中，将QueryInfo组件加入keep-alive的include中，这样路由返回跳转的时候就可以回到跳转前的位置。
        
        
        第二个解决方法是在路由返回的时候，传递一个参数回去，信息查询页面中接受到该参数为3，即可激活第三个tab。因为要传递参数，所以建议自定义路由返回事件，在数据中定义要传递的变量，在事件中用push方法传递，因为无需刷新保留且不显示在地址栏，所以采用params。
        
        
        
        因为QueryInfo信息查询页面的路由是不接受参数的，现在带参返回需要定义一个新的路由，name也要新建。
        
        在QueryInfo接受参数，并且设置方法修改当前激活的tab，然后再钩子函数调用该方法。
        
        

二十四、关于跳转页面返回时如何保留查询数据

        应用场景为：列表页必须输入查询条件才可以查询到数据，查询后跳转其中一个详情页后，再跳转回列表页，查询参数则为空，页面没有数据。按照用户体验来说，这样一定是不友好的，所以如何在详情页跳转回的时候保留用户之前输入的查询数据。最简单的方法是：做缓存keep-alive，在App.vue入口文件的keep alive处加入信息查询组件的名称。【其实之前在路由跳转传参回来的时候就没有用这个，没想到最后为了缓存查询条件还是得用】
        

二十五、对于表格中某一列若无数据用标识替代

        此处表示为不存在就显示-