vue+elementui杂记
最近看了一个项目的代码,好多知识是我不知道的,因此做了以下笔记,以便以后查阅。
Element-ui https://element.eleme.cn/#/zh-CN/component/i18n
babel-polyfill
https://www.jianshu.com/p/f2082ed8e285
IE 11版本浏览器不支持ES6百分之85%的语法规范,在vue项目中选择使用babel-polyfill兼容语法。
(1) 安装babel-polyfill
npm install babel-polyfill –save-dev
(2) main.js
import ‘babel/polyfill’
使用分页https://www.jianshu.com/p/10f16616b51b
@submit.native.prevent
.native 表示对一个组件绑定系统原生事件
.prevent 表示提交以后不刷新页面
template 通过scope/slot-scope 属性调用组件 slot 的属性,以达到可以调用组件属性实现复杂的嵌套
实例中我使用 msg 来重命名 slot 的属性对象,即 msg 为slot 的{a:‘123’,b:‘msg’}, 就可以通过使用msg 在template 中使用slot的属性
(注意:当前层如果有data已经声明过 msg,它们之间互不干扰,template 的msg 以slot 的为准)
elementUI table 点击编辑按钮进行编辑实现示例
https://www.jianshu.com/p/33175c3a6ba4
vue中this.$router.push()路由传值和获取的两种常见方法
https://www.cnblogs.com/toonezhr/p/10325457.html
在目标页面通过this.$route.query 获取参数
//传值
this.$router.push({path:"/menLink",query:{alert:"页面跳转成功"}})
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置
push()方法可向数组的末尾添加一个或多个元素,并返回新的长度
flex布局:
display:flex; /*弹性盒子*/
justify-content: space-between; /*两端对齐,子元素之间有间隙*/
flex-flow: row wrap;/*子元素溢出父容器时换行*/
让弹性盒元素在必要的时候拆行:
display:flex;
flex-wrap: wrap;
border-box border-box定义的盒子,不会随着padding和boder的加入而增大盒子的占用空间。
{
word-break:break-all;
word-wrap:break-word;
}
word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。
word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。
word-break:break-all 支持版本:IE5以上该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。
word-wrap:break-word 支持版本:IE5.5以上内容将在边界内换行。如果需要,词内换行( word-break )也将发生。表格自动换行,避免撑开。
树状结构图https://www.cnblogs.com/10ve/p/12573772.html
Element el-upload上传组件详谈https://www.jianshu.com/p/84b727a4b58a
如何新建一个Vue项目并导入element-ui的模板
https://blog.csdn.net/ly_yanbo/article/details/88720166
vue的安装https://www.cnblogs.com/benyu-aimao/p/8944475.html
国际化Element 组件内部默认使用中文,若希望使用其他语言,则需要进行多语言设置。https://cloud.tencent.com/developer/section/1489860
Echarts https://echarts.apache.org/zh/index.html
https://www.runoob.com/echarts/echarts-sunburst.html
vue启动项目的时候报错This dependency was not found:* !!vue-style-loader!css-loader?{"sourceMap":解决办法
利用vertical-align:middle垂直居中
UEditor是由百度web前端研发部开发的所见即所得的开源富文本编辑器
// 引入 Ueditor 入口文件
import '../static/UEditor/ueditor.config'
import '../static/UEditor/ueditor.all.min'
import '../static/UEditor/ueditor.parse.min'
import '../static/UEditor/lang/en/en'
https://blog.csdn.net/qwe18783318204/article/details/52866743
display:none的意思:
隐藏元素并脱离文档,流就是隐藏该区域,不占实际空间,但对后台来说真实存在,可以获取被隐藏的元素简单的来说就是将元素设置为none的时候既不会占据空间,也无法显示,相当于该元素不存在。
给元素设置visibility: hidden也可以隐藏这个元素,但是隐藏元素仍需占用与未隐藏时一样的空间,也就是说虽然元素不可见了,但是仍然会影响页面布局。
@import url()机制是不同于link的,link是在加载页面前把css加载完毕,而@import
url()则是读取完文件后在加载,所以会出现一开始没有css样式,闪烁一下出现样式后的页面(网速慢的情况下)。
https://blog.csdn.net/aliven1/article/details/79580302
想要导航到不同的URL,使用router.push()方法
嵌套路由通过配置children可实现多层嵌套
export default new Router({
routes: [
{
path: '/',
redirect: 'home'
},
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/mine',
name: 'Mine',
component:Mine,
children:[
{
path:'/',
component:Cpage,
},
{
path:'/mine/c',
component:Cpage,
},
{
path:'/mine/d',
component:Dpage,
}
]
//children这是嵌套的部分
},
windows.location.href="/url"当前页面打开URL页面,前面三个用法相同。
Vue scrollBehavior 滚动行为
https://blog.csdn.net/sinat_17775997/article/details/84864328
在文档页面(http://localhost:8080/document)拉动滚动条,然后刷新浏览器会发现滚动条依然在原来的位置,这是浏览器的默认行为,会记录浏览器滚动条默认位置。
但是点击浏览器“前进/后退”按钮,会发现当初那个页面的滚动条从0开始了,没有记录上一次滚动条的位置。现在要求点击浏览器“前进/后退”按钮,页面滚动条要记录上一次的位置,这时需要设置它的的滚动行为。
这时候需要在路由配置中设置 scrollBehavior(to,from,savePosition)函数,函数有三个参数。scrollBehavior() 函数在点击浏览器的“前进/后退”,或者切换导航的时候触发。
格式化代码ctrl+k,ctrl+f
查找ctrl+shift+f
三元表达式:
表达式 (expr1) ? (expr2) : (expr3)
在 expr1 求值为 TRUE 时的值为 expr2,在 expr1 求值为 FALSE 时的值为 expr3。
解决webpack打包文件过大的问题
代码压缩
webpack 自带了一个压缩插件 UglifyJsPlugin,只需要在配置文件中引入即可。
{
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
}
去除不必要的插件
刚开始用 webpack 的时候,开发环境和生产环境用的是同一个 webpack 配置文件,导致生产环境打包的 JS 文件包含了一大堆没必要的插件,比如 HotModuleReplacementPlugin, NoErrorsPlugin... 这时候不管用什么优化方式,都没多大效果。所以,如果你打包后的文件非常大的话,先检查下是不是包含了这些插件。
去除devtool选项
很多教程都会教你在webpack.config.js中设置devtool选项,比如devtool: 'eval-source-map'。但是这只适用于开发环境,这会造成打包的文件往往有几M,所以在生产环境必须去除此配置
……
如果 end 未被规定,那么slice()方法会选取从 start 到数组结尾的所有元素。
param()方法创建数组或对象的序列化表示。
slice()方法可从已有的数组中返回选定的元素。
indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置。
split()方法用于把一个字符串分割成字符串数组。