vue+elementui杂记

最近看了一个项目的代码,好多知识是我不知道的,因此做了以下笔记,以便以后查阅。

Element-ui    https://element.eleme.cn/#/zh-CN/component/i18n

babel-polyfill

https://www.jianshu.com/p/f2082ed8e285

https://blog.csdn.net/qq_33218955/article/details/80842573?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param

https://blog.csdn.net/csdn_yudong/article/details/82256703?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param

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定义的盒子,不会随着paddingboder的加入而增大盒子的占用空间。

{ 

     word-break:break-all;

   word-wrap:break-word;

}

word-break:break-all 例如div200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulationconguatulation)的后端部分了。

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":解决办法

https://blog.csdn.net/qq_40930491/article/details/86547907?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param

利用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',

      componentMine,

      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()方法用于把一个字符串分割成字符串数组。

 

原文地址:https://www.cnblogs.com/mmit/p/13409614.html