iamvue-blog

[iamvue-blog]

vue2中路由的使用（干货）

http://blog.csdn.net/kuangshp128/article/details/77280799

[iamvue-blog]

子级父级边框重叠相关问题

父级使用overflow:hidden ，子级的重叠边框会隐藏

[iamvue-blog]

mouseenter与mouseover的异同？

要说清楚mouseenter与mouseover有什么不同，也许可以从两方面去讲。

是否支持冒泡

事件的触发时机

先来看一张图,对这两个事件有一个简单直观的感受。

同样 mouseleave与mouseout的区别也是如此

[iamvue-blog]

vue里面@是路径别名

[iamvue-blog]

ssh-keygen 不是内部或外部命令

   使用git的远程仓库，生成秘钥，遇到的问题

如何处理呢？

1.找到Git/usr/bin目录下的ssh-keygen.exe(如果找不到，可以在计算机全局搜索)

2.属性-->高级系统设置-->环境变量-->系统变量,找到Path变量，进行编辑，End到最后，输入分号，粘贴复制的ssh-keygen所在的路径，保存；

重新cmd，执行ssh-keygen,成功！

[iamvue-blog]

前端开发VScode常用插件

.vscj th{background: #F3F3F3;} .vscj th,.vscj td{border: 1px solid #E6E6E6; padding: 5px 8px;}

名称 功能 Auto Close Tag 自动闭合HTML标签 Auto Import Typescript 自动import提示 Auto Rename Tag 修改HTML标签时，自动修改匹配的标签 Beautify css/sass/scss/less css/sass/less格式化 Better Comments 编写更加人性化的注释 Bookmarks 添加行书签 Can I Use HTML5、CSS3、SVG的浏览器兼容性检查 Code Runner 运行选中代码段（支持大量语言，包括Node） Code Spellchecker 单词拼写检查 CodeBing 在VSCode中弹出浏览器并搜索，可编辑搜索引擎 Color Highlight 颜色值在代码中高亮显示 Color Info 小窗口显示颜色值，rgb,hsl,cmyk,hex等等 Color Picker 拾色器 Document This 注释文档生成 ESLint ESLint插件，高亮提示 EditorConfig for VS Code EditorConfig插件 Emoji 在代码中输入emoji File Peek 根据路径字符串，快速定位到文件 Font-awesome codes for html FontAwesome提示代码段 Git Blame 在状态栏显示当前行的Git信息 Git History(git log) 查看git log GitLens 显示文件最近的commit和作者，显示当前行commit信息 Guides 高亮缩进基准线 Gulp Snippets Gulp代码段 HTML CSS Class Completion CSS class提示 HTML CSS Support css提示（支持vue） HTMLHint HTML格式提示 Indenticator 缩进高亮 IntelliSense for css class names css class输入提示 JavaScript (ES6) code snippets ES6语法代码段 JavaScript Standard Style Standard风格 Less IntelliSense less变量与混合提示 Lodash Lodash代码段 MochaSnippets Mocha代码段 Node modules resolve 快速导航到Node模块 Code Outline 展示代码结构树 Output Colorizer 彩色输出信息 Partial Diff 对比两段代码或文件 Path Autocomplete 路径完成提示 Path Intellisense 另一个路径完成提示 PostCss Sorting css排序 Prettify JSON 格式化JSON Project Manager 快速切换���目 Quokka.js 不需要手动运行，行内显示变量结果 REST Client 发送REST风格的HTTP请求 React Native Storybooks storybook预览插件，支持react React Playground 为编辑器提供一个react组件运行环境，方便调试 React Standard Style code snippets react standar风格代码块 Sass sass插件 Settings Sync VSCode设置同步到Gist Sort Typescript Imports typescript的import排序 Sort lines 排序选中行 String Manipulation 字符串转换处理（驼峰、大写开头、下划线等等） Syncing vscode 设置同步到gist TODO Parser Todo管理 TS/JS postfix completion ts/js前缀提示 TSLint TypeScript语法检查 Test Spec Generator 测试用例生成（支持chai、should、jasmine） TypeScript Import TS自动import TypeSearch TS声明文件搜索 Types auto installer 自动安装@types声明依赖 VSCode Great Icons 文件图标拓展 Version Lens package.json文件显示模块当前版本和最新版本 View Node Package 快速打开选中模块的主页和代码仓库 VueHelper Vue2代码段（包括Vue2 api、vue-router2、vuex2） filesize 状态栏显示当前文件大小 ftp-sync 同步文件到ftp gitignore .gitignore文件语法 htmltagwrap 快捷包裹html标签 language-stylus Stylus语法高亮和提示 markdownlint Markdown格式提示 npm Intellisense 导入模块时，提示已安装模块名称 npm 运行npm命令 stylelint css/sass/less代码风格 vetur 目前比较好的Vue语法高亮 vscode-database 操作数据库，支持mysql和postgres vscode-icons 文件图标，方便定位文件 vscode-random 随机字符串生成器 vscode-styled-components styled-components高亮支持 vscode-styled-jsx styled-jsx高亮支持

[iamvue-blog]

vscode插件vetur关闭eslint语法红色提示

要关闭它，请设置vetur.validation.template: false。

https://vuejs.github.io/vetur/linting-error.html

[iamvue-blog]

git使用

在命令行模式里输入以下命令：

git config --global user.name “iamvue”

git config --global user.email“twboss8@126.com”

git config --list查看是否配置ok

git 的工作流程一般是酱紫：

1. 在工作目录中添加、修改文件；

2. 将需要进行版本管理的文件放入暂存区域；

3. 将暂存区域的文件提交到 git 仓库。

操作步骤：

1、先用cmd进入项目的目录，使用下面命令初始化git

git init

2、在项目目录里创建一个README.md文件，用来记录每次更改记录，然后命令行执行下面命令添加这个文件，放入暂存区域

git add README.md  ---放入暂存区域，让git跟踪这个文件

git commit -m “这次提交的说明”  

查看状态： git status

查看提交日志：git log

回到过去：git rest HEAD~

修改Git remote add时使用的远程仓库 ：

1. 修改命令 git remte origin set-url URL 2.先删后加 git remote rm origin git remote add origin git@github.com:Liutos/foobar.git 3. 直接修改config文件

如何使用git上传代码到github

参考百度经验连接：https://jingyan.baidu.com/article/e5c39bf5c8c4d039d76033b2.html

[iamvue-blog]

解决文档中光标变成选字符问题

今天在编辑文档，一顿操作下，然后不知道怎么光标没了，变成选字符了，很不习惯。

按一下键盘上的“Insert”键就可以恢复光标的默认形态了

[iamvue-blog]

vue项目打包路径配置

打到config文件夹中的index.js文件，���到assetsPublicPath: '/'，修改这个值就行，/代表根目录，返回上级./

另外科普 assets 和static的区别

[iamvue-blog]

单行文本不换行超出用省略号代替

overflow:hidden;设置超出的部分隐藏

white-space: nowrap;  设置文本不换行，更多属性值点这里

text-overflow: ellipsis; 文本超出部分用省略号代替，更多属性值点这里

多行文本参考http://www.css88.com/archives/5206

[iamvue-blog]

vue实现消息的无缝滚动效果的示例代码

朋友的项目里要实现一个消息无缝滚动的效果，中途遇到了一点小bug,每组消息滚动完再次循环时会出现��留两倍的时间间隔问题，我研究了一天终于解决了这个1S的小问题

项目环境vue-cli ，请自行配置好相应的，环境及路由，这里主要介绍实现的方法

第一步在模板中 使用v-for方法循环出消息列表

<template> <div id="box">  <ul id="con1" ref="con1" :class="{anim:animate==true}">    <li v-for='item in items'>{{item.name}}</li>  </ul> </div> </template>

第二步在<script>标签中放置消息数组和具体的method 方法。

<script> export default { data() { return {   animate:false,   items:[  //消息列表对应的数组     {name:"马云"},     {name:"雷军"},     {name:"王勤"}   ] } }, created(){  setInterval(this.scroll,1000) // 在钩子函数中调用我在method 里面写的scroll()方法，注意此处不要忘记加this,我在这个位置掉了好几次坑，都是因为忘记写this。 }, methods: {  scroll(){    let con1 = this.$refs.con1;    con1.style.marginTop='-30px';    this.animate=!this.animate;    var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向    setTimeout(function(){        that.items.push(that.items[0]);        that.items.shift();        con1.style.marginTop='0px';        that.animate=!that.animate;  // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了    },500)  } } } </script> <style> *{  margin: 0 ;  padding: 0; } #box{  width: 300px;  height: 32px;  line-height: 30px;  overflow: hidden;  padding-left: 30px;  border: 1px solid black;  transition: all 0.5s; } .anim{  transition: all 0.5s; } #con1 li{  list-style: none;  line-height: 30px;  height: 30px; } </style>

[iamvue-blog]

CSS3选择器nth-child(n)实现隔几行选择元素

nth-child(n)，n 可以是数字、关键词或公式。选择器匹配属于其父元素的第N个子元素，不论元素的类型。

序号写法：

li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/

倍数写法：

li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/

倍数分组匹配：

li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/

li:nth-child(3n+5){background:orange;}/*匹配第5、第8、第11、…、从第5个开始每3个为一组的第1个LI*/

li:nth-child(5n-1){background:orange;}/*匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI*/

隔三行设置颜色

$("tr:nth-child(3n)").css("background","#eee");

$("tr:nth-child(2n)").css("background","#eee");

$("tr:nth-child(3n)").css("background","#eee");

$("tr:nth-child(3n+2)").css("background","#ccc");

[iamvue-blog]

vue-cli项目在IE下运行钩子函数抛出异常“ReferenceError: “Promise”未定义"”的解决办法

转自：http://blog.csdn.net/zjb12316/article/details/78941989

问题现象：vue-cli项目在IE下运行，会在钩子函数出现 ReferenceError: “Promise”未定义

解决办法：

step1:安装最新的web-pack-server 命令行：npm install --save-dev webpack-server

step2:安装Babel Polyfill

     命令行：（1）npm install --save babel-polyfill

          （2）在webpack.base.conf.js这个文件加入代码 require("babel-polyfill")

      （3）在main.js里面添加代码 import "babel-polyfill";

step3：运行vue-cli项目  npm run dev   这时IE已经能够正常跑项目了！

[iamvue-blog]

css中一个冒号和两个冒号区别

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。

伪类有： :first-child ，:link:，vistited，:hover:，active:focus，:lang，:not(s)，：root等... 伪元素有： ::first-line， ::first-letter， ::before， ::after， ::placeholder, ::selection

提醒，如果你的网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全。如果自己不确定的话可以针对某些需要兼容的属性有两种属性。

[iamvue-blog]

Element-UI 自定义样式

1、通用样式的覆盖，比如基色或者element组件通用样式修改，可以放在一个css文件（或者是scss等）,在main.js 中 import。element也提供了自定义主��的方式

2、非通用样式，业务组件的样式覆盖可以考虑在vue单文件组件中覆盖，此时需要注意，涉及到选择器优先级的问题，部分样式需要使用style的全局样式（即不加scoped）,使用全局样式的时候尽量添加业务组件的根组件选择器，以免影响其他组件中对element组件的样式，一般在组件里加一层div，类名和组件一致，在这个类名下进行样式修改

[iamvue-blog]

Vue访问json时会出现TypeError: Cannot read property '0' of undefined

原因： 在JSON请求回来的时候已经渲染页面了，此时给data的默认值是[]，所以data.title是undefined，再使用[0]当然就会报错

原文地址：https://segmentfault.com/q/1010000010255500#answers-title

解决办法：

一、使用计算属性

computed:{

page3Data(){

   var _this=this;    $.ajax({        url:url.urlpath,        type:'GET',        dataType:'json',        success:function(res){            _this.page3=res.page3_a[0].title;        }    });    return  _this.page3;  }

}

<ul v-for='(item,index) in page3Data'>

<li>{{item.title}}</li>

</ul>

按你所说还需要page3_b,page3_c, 在method中写一个带有参数的函数： method:{ page3Data(val){

var _this=this; $.ajax({    url:url.urlpath,    type:'GET',    dataType:'json',    success:function(res){      // console.log("00000000000",res['page3_b']);         _this.page3=res[val][0].title;    } });

} }

在mounted中： mounted(){

var _this=this; _this.$nextTick(function(){    _this.page3Data('page3_a');  });

},

<ul v-for='(item,index) in page3'>

 <li>{{item.title}}</li>  </ul>

二、使用v-if

在需要用到检测数据之前用v-if判断如果不存在就不往下走，就不会出现错误提示

注意：v-if需要加在v-for之前

如：

<div v-if="page3.page3_a" id="app">    <div v-for="v in page3.page3_a[0].title">        <span>{{v.title}}</span>    </div> </div>

三、初始化data的时候，把需要的结构都初始化

data: function() {    return {        page3: {            page3_a: [{                title: []            }]        }    } }