element-ui中的表格在项目中的应用场景是最多的，针对不同的需求，会有各种自定义效果.
1、在线生成主题之后，引入自定义主题自定义主题

1、单选效果(第一列显示单选按钮，点击当前行选中)
2、多选效果(添加多选选种效果，点击当前行选中)

1、首选，安装 less 和 less-loader npm install less less-loader –save-dev
2、在build/webpack.base.conf.js文件中的loader/rules中添加配置

1
2
3
4

{
	test: /\.less$/,
	loader: "style-loader!css-loader!less-loader",
}

3、最后，在代码中的 style 标签中 加上 lang=”less” 属性即可

项目中主要使用的是element-ui组件进行快速开发，但是样式要根据设计图进行自定义修改。这里记录一下一些不容易修改的地方。
1、使用日期选择器控件，但是要把图标放到输入框的后面.

对于第一种情况，查看元素的时候可以看到用的是绝对定位，所以只需要重写left的值就可以了
第二种，查看元素发现用的是flex布局，flex布局中有五个子元素（后面还有一个隐藏的清除按钮）。
只需要给要移动的子元素添加属性order:<integer>即可，我这里添加的是order:5,就把图标放到最后面去了。
参考文章: Flex 布局教程 语法篇4.1 order属性

2、表格中修改tooltip的样式
查看文档的时候，只发现可以给table添加属性：tooltip effect 属性 String dark/light
light样式是白色背景带黑色边框，dark是默认样式，黑色背景白色文字
这两种效果并不符合设计图中的样式，所以要进行修改。但查看元素的时候一直定位不到tooltip。
最终搜索到的解决办法：开发者工具有个Sources页，里面有暂停功能，快捷键是F8，在打开开发者工具的后，先把tooltip弹出来，再按F8暂停，tooltip就不会消失了
这时候就可以定位到元素，进行样式重写了。

3、在自己的组件中style添加了scoped,在里面再去重写element-ui中元素的样式不起作用。
深选择器：如果想对设置了scoped的子组件里的元素进行控制可以使用’>>>’或者’deep’
一些预处理程序例如sass不能解析>>>属性，这种情况下可以用deep，它是>>>的别名，工作原理相同。
参考文章:Deep Selectors

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
可以导致段落断开的标签（例如标题、<p> 和 <address> 标签）绝不能包含在 <pre> 所定义的块里。
所有浏览器都支持 <pre> 标签。

Read More

data 是Vue实例的数据对象。Vue将会将data 的属性转换为 getter/setter, 也就是用Object.defineProperty方法(在官网里面
深入响应式原理里面具体的介绍)。
props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，
对象允许配置高级选项，如类型检测、自定义校验和设置默认值。
computed 计算属性用来处理复杂的逻辑运算，是在HTML DOM加载后马上执行的。只有在相关的数据发生变化时才会改变要计算的属性，当相关数据没有变化时，它会读取缓存。

methods则必须要有一定的触发条件才能执行，如点击事件；
watch用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。所以执行回调函数的时候，watch是首选
所以他们的执行顺序为：默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再watch。
watch的深度监听：数组，对象，数组对象

1
2
3
4
5
6
7
8

 watch:{
    'city':{
        handler:function(newValue,oldValue){
            console.log(newValue)
        },
        deep:true,
    }
}

采用上述方法，只有数组监听不到,由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将触发状态更新：
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

Vue 虚拟dom
vdom因为是纯粹的JS对象，所以操作它会很高效，但是vdom的变更最终会转换成DOM操作.
Vue的diff算法是基于snabbdom改造过来的,Vue的diff算法是仅在同级的vnode间做diff，递归地进行同级vnode的diff，最终实现整个DOM树的更新。
Vue不断对vnode进行处理同时移动指针直到其中任意一对起点和终点相遇。处理过的节点Vue会在oldVdom和newVdom中同时将它标记为已处理

1、e.target & e.currentTarget
用最简单的语言总结：
target: 代表当前目标对象（事件作用的对象）,被点击的对象
currentTarget: 代表注册监听器的对象,事件绑定的元素
this: 和currentTarget一样，即它们的作用相等。
2、js中，我们可以给一个dom对象添加监听事件，函数就是
addEventListener(“click”,function(){},true);
第三个函数：isCatch(是否捕获)，默认值是false(冒泡)
3、HTML 5 的data-* 自定义属性
这种方式通过访问一个元素的 dataset 属性来存取 data-* 自定义属性的值。这个 dataset 属性是HTML5 JavaScript API的一部分，用来返回一个所有选择元素 data- 属性的DOMStringMap对象。
使用这种方法时，不是使用完整的属性名，应该去掉data- 前缀。
data- 属性名如果包含了连字符，例如：data-date-of-birth ，会按驼峰式的命名转换为dateOfBirth 。
4、jQuery对象与普通dom之间的转换
两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);
如：var $v =$(“#v”) ; //jQuery对象
var v=$v[0]; //DOM对象
var v=$v.get(0); //DOM对象
对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象)
5、jQuery的自定义动画animate()
语法：animate(params,speed,callback);

Ajax(Asynchronous JavaScript + XML)
Ajax技术的核心是XMLHttpRequest对象（简称XHR）
Ajax通信与数据格式无关，这种技术就是无需刷新页面即可从服务器取得数据，但不一定是XML数据。

Read More

1、当我们在网页浏览器（Web browser）的地址栏中输入 URL时，Web页面是如何呈现的？
Web使用一种名为HTTP(HyperText Transfer Protocol,超文本传输协议)的协议作为规范，完成从客户端到服务器端等一系列运作流程。协议是指规则的约定。可以说，Web是建立在HTTP协议上通信的。

首先新建远程仓库
git clone git@github.com:username/projectname.git（下载远程代码到本地）
git init (初始化本地仓库)
git add .(将本地文件加入缓存区)
git commit -m “修改的内容说明” （说明性内容）
git push origin master （push文件到仓库中）

之后每次在提交之前都需要先pull一下（先更新，再提交）
git pull (拉取远程代码，使本地跟远程保持一致)

Read More

vue项目开发步骤及遇到的问题：
1、使用脚手架工具vue-cli创建项目目录结构，之后就可以进行开发了。
2、根据组件化思想，抽象出可复用性组件（比如按钮、列表、模块），这要根据页面结构进行提取
3、对于必备模块（比如轮播图）进行封装，实现可扩展。借助vue-awesome-swiper
使用的时候，首先要安装：npm install vue-awesome-swiper –save
4、借助vue-awesome-swiper可实现轮播图、带回弹效果的横向滚动的多列商品、小模块入口超过固定数目后允许横向滚动、垂直滚动的消息提醒。

Read More