注意事项总结
Vue初始化函数created()和mounted()的区别
1、created 在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图
在这一步,实例已完成以下的配置:
- 数据观测 (data observer),
- property 和方法的运算,
- watch/event 事件回调。
- 然而,挂载阶段还没开始,$el property 目前尚不可用
2、mounted在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
过滤函数filter()
filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意:
- filter() 不会对空数组进行检测。
- filter() 不会改变原始数组。
语法:
1 | array.filter(function(currentValue,index,arr), thisValue) |
array数组的元素依次指向currentValue进行判断,符合条件即function返回true,则此元素被添加到新数组,否则不被添加。
返回数组,包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。
例如:
1 | <script> |
返回一个年龄大于等于18的数组。
如果出现函数多重嵌套:
1 | <script> |
此时,ages数组中的元素依次指向的是age而不是a。
Vue Events
事件名称 | 说明 | 回调参数 |
---|---|---|
blur | 在 Input 失去焦点时触发 | (event: Event) |
focus | 在 Input 获得焦点时触发 | (event: Event) |
change | 在 Input 值改变时触发 | (value: string | number) |
clear | 在点击由 clearable 属性生成的清空按钮时触发 | — |
select(Autocomplete Events) | 点击选中建议项时触发 | 选中建议项 |
Message消息提示
常用于主动操作后的反馈提示。
1 | this.$message.info(""); |
MessageBox弹框
模拟系统的消息提示框而实现的一套模态对话框组件,用于消息提示、确认消息和提交内容。
从场景上说,MessageBox 的作用是美化系统自带的 alert、confirm 和 prompt,因此适合展示较为简单的内容。如果需要弹出较为复杂的内容,请使用 Dialog。
消息提示
调用$alert
方法即可打开消息提示,它模拟了系统的 alert
,无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数,message
和title
。值得一提的是,窗口被关闭后,它默认会返回一个Promise
对象便于进行后续操作的处理。若不确定浏览器是否支持Promise
,可自行引入第三方 polyfill 或像本例一样使用回调进行后续处理。
1 | this.$alert('这是一段内容', '标题名称', { |
确认消息
调用$confirm
方法即可打开消息提示,它模拟了系统的 confirm
。Message Box 组件也拥有极高的定制性,我们可以传入options
作为第三个参数,它是一个字面量对象。type
字段表明消息类型,可以为success
,error
,info
和warning
,无效的设置将会被忽略。注意,第二个参数title
必须定义为String
类型,如果是Object
,会被理解为options
。在这里我们用了 Promise 来处理后续响应。
1 | this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { |
说明:then()
函数为用户点击“确定”之后进行的操作,catch()
函数是用户点击”取消之后进行的操作。
提交内容
调用$prompt
方法即可打开消息提示,它模拟了系统的 prompt
。可以用inputPattern
字段自己规定匹配模式,或者用inputValidator
规定校验函数,可以返回Boolean
或String
,返回false
或字符串时均表示校验未通过,同时返回的字符串相当于定义了inputErrorMessage
字段。此外,可以用inputPlaceholder
字段来定义输入框的占位符。
1 | this.$prompt('请输入邮箱', '提示', { |
说明:{value}
是从提示框中输入的值。
Notification通知
悬浮出现在页面角落,显示全局的通知提醒消息。
Notification 组件提供通知功能,Element 注册了$notify
方法,接收一个options
字面量参数,在最简单的情况下,你可以设置title
字段和message
字段,用于设置通知的标题和正文。默认情况下,经过一段时间后 Notification 组件会自动关闭,但是通过设置duration
,可以控制关闭的时间间隔,特别的是,如果设置为0
,则不会自动关闭。注意:duration
接收一个Number
,单位为毫秒,默认为4500
。
Element 为 Notification 组件准备了四种通知类型:success
, warning
, info
, error
。通过type
字段来设置。
1 | const h = this.$createElement; |
注意:这里的h
用于定义样式。
父子组件之间传值
1、父组件可以使用 props
把数据传给子组件
子组件
在子组件中定义props
,用于接收父组件传来的值。
1 | //子组件 |
prop的类型
String、Number、Boolean、Array、Object
prop类型检测
default、required、自定义验证
在子组件中,可以直接使用父组件传来的值。比如上例中,父组件传来的值存放在data
字段中,可直接调用:
1 | <p> |
父组件
在父组件中,通过属性:data=''
向子组件传值。
1 | <chlid :data='message'></chlid> |
2、子组件可以使用 $emit
触发父组件的自定义事件
$emit方法
1 | this.$emit( event, arg ) //触发当前实例上的事件 |
evevt
是父组件定义的事件,arg
是子组件向父组件传的值。
注意:子组件中包含$emit
方法的事件一旦触发,则父组件中的event
事件自动触发。
1 | //子组件 |
Vue中img的src属性绑定问题
当我们希望从js的data中获取img的src的值时,应使用:src
属性来绑定data中的值。
例如:
1 | <img :src="imgUrl" alt=""> |
但是浏览器并没有渲染出来我的图片。原因:这里使用的是本地路径。
解决方法
1、Vue项目中提供了一个static
静态文件夹,用于我们存放一些静态文件,浏览器可直接渲染。所以,可以将图片放在static
文件夹中。
1 | imgUrl: ./stalic/arrow0.png, |
2、Common写法,在路径前加上require
。
1 | imgUrl: require('../../../src/stalic/font/arrow0.png') |
3、把图片放在cdn上,把网络地址存在imgUrl里,然后直接<img :src="imgUrl">
去展示。
ECharts
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
安装
1 | npm install echarts -s |
导入
1 | const echarts = require('echarts'); |
我这里使用import echarts from 'echarts'
无效。
使用
创建一个div并初始化图表
1 | <div id="main"></div> |
创建option选项
1 | const option = { |
使用option
1 | myChart.setOption(option); |
在mounted中获取不到created中的值
问题描述
1.在created
生命周期内进行异步数据的请求,且将获取到的数据赋值给this.data。
2.此时如果在mounted
生命周期里获取this.data是获取不到的
问题分析
因为异步加载需要时间,如果延迟时间是可以获取到数据的,但是问题是不知道需要延迟多久,况且这个方法也不是很好。
解决方法
在data
里面进行数据定义:
1 | data(){ |
使用watch方法进行数据监听:
1 | watch:{ |
eval
eval(“‘“ + data + “‘“)返回string类型
data 可以是任何类型,包括 unicode。
1 | var str = "\\u6211\\u662Funicode\\u7F16\\u7801"; |
eval(“(“ + data + “)”)返回object类型
原因:加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式(expression)转化为对象,而不是作为语句(statement)来执行。
当我们从后端接收到返回的json对象(data)时,会发现 data.message
是 undefined
,我们可以将 data 转化为一个object
类型来解决。
1 | var obj = eval("(" + data + ")"); |