vue（前端、页面）ErrorPart01、知识
脚本要放在div后面
无需引入jar包
代理路径在项目/config/index.js
axios类似ajax
vuex全局状态管理 类似applicationContext 可以管理全局的状态，并进行修改处理
map通过xxx['属性名']来获取其中的内容
render页面中没有显示需要 return h('span', xxx)
通过页面F12进行微调快
设置为国内镜像 安装快 使用cnpm 安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
如果修改自己使用的组件却没有生效【console.log 没什么用】 可能是因为引用的组件并不是自己的组件，被别的组件给覆盖了
目录结构
src文件夹放置组件和入口文件
static文件夹放置静态资源文件
index.html为文件入口
main.js 程序入口文件，所有的全局性配置都在这个文件中进行
插件
babel-plugin-import 插件可以从插件库中引入需要的模块，而不是把整个库都引入，从而提高性能
v-track-event 百度统计插件
npm
1、4058
干掉项目文件夹下的node_modules,然后重新npm install
知识
0、ECMAScript6.0 简称ES6 是JavaScript的下一代标准
1、const和let的作用域相同，只在声明的块级作用域生效，不支持变量提升（没有var之前便存在，没有值返回undefined），保证变量不会影响全局变量
2、const不可变的是地址（不是常量的值不能变动），如果是复合型，比如一个对象，那么可以个改动其中的数据，不能xxx={};会报错
3、对象解构（Destructuring 从数组和对象中提取值，再对变量赋值）的内部机制，是先找到同名属性，再赋给对应的变量，真正被赋值的是后者，而不是前者
4、剩余参数语法 ...theArgs
let arrowfunc = (...theArgs)=>console.log(theArgs.length)
arrowfunc(1,2);//输出2
5、箭头函数的代码简洁性和不绑定调用者的this（箭头函数的this始终为定义时的this【不在对象和原型方法中定义】），在非方法函数中使用合适，如果需要动态修改this，建议不使用箭头函数
6、entries 所有成员的遍历器 let [key,value] of map.entries() forEach 遍历Map的所有成员 map.forEach(function(value,index))
7、export default 的时候对应的import 不需要再加个{}，export default 为模块的默认输出，显然一个模块只有一个默认输出，因此export default 命令只有一次，import 也可以唯一对应一个export 不需要{}
8、Web收到请求后会解析URL中的路径，在程序中，该路径会有对应的处理逻辑，程序把请求交给路径对应的处理逻辑，这样就是一次路由分发，这个分发通过路由来完成。
之前的路由由后台来完成，即用户通过请求的url导航到具体的html页面，前端路由是通过配置js文件，把这个工作交给前端完成。
简单说：路由就是根据不同的url地址展现不同的内容或页面
优缺点：访问页面仅变换路径，没有延迟 用户体验很好，支持单页面应用，可以复制URL
缺点：前进、后退按钮会重新发送请求，没有合理的利用缓存
9、Vue Router在将单页面应用分割为功能合理的组件或者页面起了很大的作用。
10、Row在使用的时候2个i-Col连在了一起（空间充分使用） Row添加属性:gutter 再在 i-Col中添加span="xx" 各自分配空间显示
11、使用v-if 来判断是否显示该组件的时候 v-if="showAcquireCarrierBtn"
将方法写在computed中
12、添加校验 时间校验
:prop="'seaInfo'+'.'+'atd'"
:rules="[{pattern: /.+/,required: true, message:this.$t(`validate.isRequired`, {msg: this.$t(`ATD from POL`)}), trigger: 'blur,change'}]"
this.$refs.form.validateField('seaInfo.atd') 调用检验上面一个prop 可以再加入一个回调函数
13、emit
子父组件通过emit上传一个事件进行交互的时候 需要使用v-on:xxx(事件名) 或者@xxx来交互
14、完全显示
在Select中添加属性transfer = transfer
15、width配置了但是没有效果
vue中可能需要放在:style="`width: ${getWidth - 850}px`"
另外如果为负的话也无效
16、在取到数据之后在页面却没有任何的显示
可能需要对对象进行初始化 在data中添加 一个xxx:[]
17、computed的从store中拿取数据失败
在上方多加了一个console这个数据源导致拿取失败 去掉即可
18、store在使用的时候需要进入到其他的页面才能够使用
没有进行初始化 在index页面this.$store.commit('initXxx')
19、使用v-modal的时候使用对象的id作为绑定的对象， 因为是键值对的形式 所以 select中组件 一般会和:value对应
20、toe样式是省略号 ，如果超出规定的长度会变成省略号
21、console打印处数据，但是页面上不会显示，且{{}}为空数组
可能需要在data中进行注册 添加一个所需对象数组
22、使用组件带的事件的话要在名字前面加@ 比如 @on-popper-show
23、style会覆盖class中的内容
24、对象在类型转换为字符串时， toString() 的调用顺序在 valueOf() 之前，并且这两个方法如果都没有返回一个基本类型值，则抛出异常；如果返回了基本类型值 primValue，则返回 String(primValue)
25、事件传播期间，有三个阶段：捕获，目标和冒泡。 默认情况下，事件处理程序在冒泡阶段执行（除非您将useCapture设置为true）。 它从最深的嵌套元素向外延伸
26、select组件添加filterable的话，如果直接清空v-model的值没有触发on-change事件的话会将内容的value保留在过滤的条件当中，导致另外一个查询不出
添加on-change事件判断是否在可选内容当中
27、在v-model的时候需要做好初始化工作
28、校验的话最好在一个大对象中
如果直接校验一个数组的话 需要在一个对象当中 即外面加层壳然后再循环 最后校验其中的属性
29、如果要在Table的render中加入条件的话在渲染的东西前面加上 true[表达式] && 原有内容
30、在遍历的时候通过:key 中的属性可以用来作为该数组中最后一个对象的判断等操作
31、select组件 label和value要对应上才会被选中？
32、modal的遮盖层点击会触发他的@on-cancel事件 在里面可以对某些数据进行处理
33、select 如果要使用id作为selectValue 要去掉其中的:lable属性 在option中添加{{xxx.xxxName}}
34、null不严格等于undefined，所以如果let[x=1] =[null] 的时候x=1的默认值失效，输出x=null
35、为什么使用而不是直接使用
35.1、无论是HTML5 history模式还是hash模式，他们的表现行为一致，所以当切换路由模式或者在IE9降低使用hash模式时，无须作任何变动
35.2、在HTML5 history模式下，会守卫单击事件，让浏览器不再重新加载页面
35.3、在HTML5 history模式下使用base选项之后，所有的to属性都不需要写基路径
36、修饰符
36.1、lazy
v-model默认是在input事件中同步输入框的数据，使用修饰符lazy会转变为在change事件中同步。
添加lazy修饰符之后，msg并不是实时改变了，而是在失去焦点或者按下回车时更新
36.2、trim
修饰符trim可以自动过滤输入的首尾空格
37、字符串倒序显示
msg.split('').reverse().join('')
38、遍历大数组和计算量很大的时候，使用计算属性，除非不希望得到缓存。使用methods的时候重新渲染，就会被调用。
39、使用...mapMutations等vuex相关控制的时候需要在store中把相关的方法先写好，否则会unknown mutation type
40、在actions中调用其他的action
通过context.dispatch('xxx') commit 也同理
watch
1、监听router里面的参数
'$route.query.xxx'
spin
用于loading
在它的父级添加style: absolute 或者relative 来限定它的范围
vue.js
{{ message }}
vue初创环境
v-text,v-html,v-model异同
map
ref
v-if 和v-show
is
v-if为元素的整个删除和添加 v-show为添加一个display：none样式
v-show更适合频繁的显示或者说比较大 不容易创建的元素
问题、tips
1、el元素前面要加#
2、WEB-INF中的js需要特殊手段加载 直接放在WebContent比较方便
3、 did you register the component correctly? For recursive components, make sure to provide the "name" option.
错误的拼写了components
4、4058 在目录里面运行 npm run dev
5、select需要点两下才改变显示
在option中添加{{xx.name}}
6、router-view中只是切换模块显示 没有父子组件传递事件的功能 是同级，可以用vuex或者改成父子组件关系 即import后进行修改
7、v-bind给子组件传值的时候需要命名即v-bind:xxx('xxx') 和事件类似没有的话在子组件会显示没有查找到对应的组件
8、父组件调用子组件的方法的时候需要给子组件添上ref属性 然后在父组件通过this.$refs.orderdetaill.selectProduct()调用相应的方法
9、Invalid prop: type check failed for prop "value". Expected String, Number, got Undefined.
在select中使用了还未出现的元素即多点了修改灰色部分即可
10、在http请求下方的currentProduct获取不到值 cannot get property xxx
http请求慢于赋值 虽然是并排显示 但是还没接收到数据就进行赋值，所以需要放在请求之内或请求完毕之后进行赋值
11、没有正确传入值
传入的参数名需要和接受的一样
12、校验失败，总是提示没有输入，有些感觉失效
在form上用:model而不是v-model，失效可能是因为校验的是个对象但是直接.而不是选择其中一个所以校验失效
另外如果不是表单中的:model中的对象，那么也无法校验 使用的话需要在对象当中也就是最上面要v-model一个对象 然后里面再用他其中的属性
校验单个属性（自建的）:rules="[ {required: true,validator:isContainerQtyExist, trigger: 'change' }]">
isContainerQtyExist (rule, value, callback) {
let containerList = this.containerQtyCopy
if (!containerList) {
callback(this.$t(`isRequired`, {msg: this.$t(`containerQty`)}))
} else {
callback()
}
callback()
},
13、弹一个提示
this.$Message.info('创建成功')
14、子组件用props接受父组件传递过来的值
15、通过新建一个名称为总计的xxx可以在其中字段中完成总计的工作
16、使用 v-htm在搜索结果中高亮显示
17、寻找所需要修改的地方
F12查看发出链接接受的位置 在idea中通过ctrl+shift+f 通过/xxx来找到所需的东西
18、Duplicate keys detected: '1'. This may cause an update error.
结点没有正确的显示且客户只有一开始的那个，无法从后端获取到数据，
可能是修改了后端的配置文件，需要重新启动后端的tomcat
19、添加个标签后 无法进入且报很多的 错误
需要在路由中添加该路径
20、table中的东西漂浮，不在理想的位置上
因为tr td的层次关系所以东西放在td中 一定是按照合理的顺序排放，因此 将东西放在td中 即可正常排序
21、iview中的样式 不生效 比如 Table中的show-header=false 预想去掉表头但是无效
需要在样式前面加上: ——》:show-header=false
22、一些简单的只读 或者没有涉及到复杂的计算的话
可以直接使用Table来完成内容的输入
23、去掉打印的时候的页眉页脚
23.1、通过——>页面设置，里边将页眉页脚设置为空就OK.
23.2、在页面中添加css
24、 Arrow function should not return assignment
箭头函数不能返回一个任务？ 反正就是修改其中的函数 用法可能出错了
25、如果要保证一些数据并排
都写在同一个i-col当中 然后另外的一排在另一个i-col中 2个i-col在同一个 row当中 这样可以实现2排较为整齐 而且右边一列可以多过左边的一列
26、commit 一个事件到store 的时候只有一个参数显示 另外一个为undefin
使用括号包围上传一个对象
27、Right-hand side of 'instanceof' is not an object"
父传子 props右边尝试不填入内容直接空字符串
28、通过this.refs.xxx.validate() 即可对组件和组件的子组件进行校验 不用定位到内部
29、let和var的区别
let 块级定义 var 全局
30、RangeError: Maximum call stack size exceeded
循环调用 打印的东西和方法名相同 溢出
31、props 返回中英文的
trueLabel: {
type: String,
default: () => {
return $this.$t('YES')
}
},
32、npm ERR! Unexpected token < in JSON at position 1 while parsing near ' 安装新的插件报错
npm cache clean --force
33、npm install出现 npm ERR! Unexpected token , in JSON at position xxxxxxx while parsing near '
删掉package-lock.json 之后会重新出现
34、因为v-model绑的值在改变后不再是原有所需要的导致页面报错【格式发生了变化】
在需要保存或对数据操作的时候进行deepClone对数据分开进行操作
35、You may need an appropriate loader to handle this file type.
| {"version":3,"sources":["webpack:///webpack/universalModuleDefinition"
出现这种问题除了组件版本未正常安装 可能是引入对应组件的时候出现的问题
可以对照正常使用 的环境找出问题
可能是在require的时候需要加上'.js'后缀
36、Provisional headers are shown
在chrome中有些插件拦截了，头部的异常可以不用处理，因为请求数据都是可以正常返回
chrome浏览器 Provisional headers are shown
前后端数据交互 vue的data问题
1、http请求无法修改data中的数据，因为请求成功后回调函数处于其他函数的内部this不会和任何对象绑定，为undefined
1.1、在外部定义一个_this指向this然后用_this调用http
1.2、使用箭头函数
testHttp: function () {
http.get('/demo/demo/productInfo_select.gou').then((res) => {
this.data1 = res.data
})
},
2、mouseeneter无效
内部框架禁止部分功能 可以在mouseenter后面加.native
表格单选实现（需要其他设置）原文在下面
render: (h, params) => {
let id = params.row.activeCode
let name = params.row.activeName
let codeType = params.row.type
let price = params.row.price / 100
let defaultS = false
if (this.currentid === id) {
defaultS = true
} else {
defaultS = false
}
let self = this
return h('div', [
h('radio', {
props: {
value: defaultS
},
on: {
input: function () {
self.currentid = id
self.formValidate.thirdActiveName = name
self.formValidate.thirdActiveCode = id
self.formValidate.codeType = codeType
self.formValidate.codePrice = price
}
}
})
])
}
radio单选
根据部分属性取出所需的对象
//返回数组
let data = this.productInfo.filter(function (item) {
return item.name === val
})
//返回一个
let data = this.allProductInfo.find(function (item) {
return item.name === val
})
引用方式使用iView组件
在使用 CDN 引用时，即非 template/render 模式下，组件名要采用文件名小写，单词间用-分隔，例如RadioGroup 必须要写成 radio-group。
引入iview和自创组件
去掉打印的页眉
父子组件通信
1、最好使用较为小的元素，如果传入的数组 可能在子组件中需要对其操作 不太方便
使用关键元素更方便
2、父组件通过@事件名 = "方法名" 来完成接受从子组件传的值
v-model
相当于给子组件传递了一个value prop
同时会接受input事件将值修改成从子组件传递上来的值
生命周期
beforeCreate 生命周期函数在组件实例刚被创建的时候增加一些loading事件
created 生命周期函数可以结束loading事件，完成一些初始化，实现函数自执行等
mounted 是比较重要的生命周期函数，可以发起后端请求，取回数据，接受页面之间传递的参数、由子组件向父组件传递参数等
Axios
是一个基于Promise、用于浏览器和node.js的HTTP客户端，常用于处理AJAX请求，具有如下特征
1、从浏览器中创建XMLHttpRequest
2、从node.js发出http请求
3、支持Promise API
4、拦截请求和响应
5、转换请求和响应数据
6、取消请求
7、自动转换JSON数据
8、客户端可以防止CSRF/XSRF（两种伪造站点请求的方式。伪造的恶意请求对服务器来说完全合法，都完成了攻击者期望的操作）恶意请求发生