hacalili

Vue最佳实践（项目经验总结，定期更新）

Vue

$set添向数组添加元素

$set(target, key, value)

代码

addTimeNode () {
  this.$set(this.dynamicForm.timeNodes, this.timeNodesCount, {
    time: {
      message: '节点时间不能为空',
      value: ''
    },
    content: {
      message: '节点内容不能为空',
      value: ''
    },
    url: {
      message: '',
      value: ''
    },
    key: Date.now()
  })
},

输入框未输入时显示提示信息

代码

this.isValidation = !this.isValidation


  {{innerMessage}}

watch: {
  isValidation (val) {
    if (val) {
      if (this.message) {
        if (this.value === '') {
          this.innerMessage = this.message
        }
      }
    }
  }
}

动态绑定样式：添加前置’*'号

代码


  {{label}}

.asterisk::before {
  content: '*';
  color: red;
}

ref

ref通常用于获取页面上的dom相关信息，如果需要获取input的值，可以用v-model

<input type="text" @keyup.enter="searchData" autocomplete="off" placeholder="搜索" class="search-input" v-model="searchInputContent" autofocus>

监听属性watch

点击搜索按钮后显示匹配后的列表

可以设置一个searchText变量，当点击搜索按钮后，将v-model绑定的输入值searchInput赋值给searchText，再监听searchText

<input type="text" @keyup.enter="searchData" autocomplete="off" placeholder="搜索" class="search-input" v-model="searchInputContent" autofocus>
    searchData () {
      this.searchText = this.searchInputContent
      this.searchedListItems = listItems
      window.location.hash = this.windowHash
      this.searchInputContent = ''
    },
  watch: {
    searchText: {
      handler: function (value) {
        if (value) {
          let searchInputContent = RegExp(value, 'i')
          this.searchedListItems = this.listItems.filter(item => searchInputContent.test(item.name))
          this.currentPageNumber = 1
          this.totalPageNumber = this.totalPageNumber === -1 ? 1 : this.totalPageNumber
        } else {
          this.searchedListItems = this.listItems
        }
      }
    }
  },

计算属性computed

作用

实际上操作的是另一个对象
计算属性是做计算的，操作的函数、赋值不用放这里，没有分支
简单项目中的计算属性和监听一般不用加其他配置项

用法

总页数

    totalPageNumber: {
      get () {
        return this.visibleListItems.length < 1 ? 1 : Math.ceil(this.searchedListItems.length / this.pageCount)
      },
      set (value) {
        return value
      }
    },

全选反选

    allItemStatus: {
      get () {
        return this.checkedItemLength === this.visibleListItems.length
      },
      set (value) {
        this.visibleListItems.forEach(function (item) {
          item.check = value
        })
      }
    },

显示分页效果

根据数据的索引和设置的页大小（每页展示的数据条数），截取总的数据列表，展示相应条数的数据

    visibleListItems: {
      get () {
        return this.searchedListItems.slice(this.currentPageNumber * this.pageCount - this.pageCount,
          this.currentPageNumber * this.pageCount - this.curPageDeleteCount)
      },
      set (value) {
        return value
      }
    }

v-model 与 .sync的区别

原理

v-model

只为 @input 提供一个函数名称作为变量时，Vue 会自己将实际参数传入函数的第一个形参，但要自定义传参顺序时，可以使用 $event 来灵活表示了。

其中，:value 与 @input 是可以使用 model 选项自定义

export default {
  model: {
    prop: 'content',
    event: 'change'
  }
}

.sync


this.$emit('update:foo', newValue)

功能

v-model

实现标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。
一个组件只能有一个
在子组件使用input事件，其和.sync修饰符功能一模一样

.sync

官方推荐使用一种update:my-prop-name 的模式来替代事件触发，实现父子组件间的双向绑定。
一个组件可以多个属性用.sync修饰符，可以同时"双向绑定多个“prop”

使用场景

v-model

针对更多的是最终操作结果，是双向绑定的结果，是value，是一种change操作。
比如：输入框的值、多选框的value值列表、树结构最终绑定的id值列表（ant design和element都是）、等等…
只需要绑定一个变量
当组件只有一个功能就是切换状态的时候，这个状态就是最终操作值，这时候可以使用v-model

.sync

针对更多的是各种各样的状态，是状态的互相传递，是status，是一种update操作。
比如：组件loading状态、子菜单和树结构展开列表（状态的一种）、某个表单组件内部验证状态、等等…
不能用在 HTML 表单元素上
需要双向绑定多个变量

小结

在只需要绑定一个变量时，那当然优先选择 v-model，在需要绑定多个变量时，考虑 v-model 与 sync 一起使用，如果 sync 无法生效，那么就只能通过显式监听事件修改变量去实现了。
.sync可以修改子组件传递的属性名比如子组件传递的不是“value”这个属性名而是"foo"，那么 $e m i t 就可以写成 t h i s .$ emit(‘update:foo’,e.target.value);使用v-model不能修改

$listeners

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on=”$listeners” 传入内部组件——在创建更高层次的组件时非常有用。

$attrs

包含了父作用域中不被认为 (且不预期为) props 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 props 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind=”$attrs” 传入内部组件——在创建更高层次的组件时非常有用。

使用场景

v-model自定义事件父子组件通信

绑定input输入框、textarea文本域框、select选择框

value属性，input事件

绑定checkbox、radio复选框

checked属性，change事件

代码应用





  
  







props: {
  type: {
    type: String,
    default: 'text'
  },
  value: {
    type: [String, Number, Array, Boolean],
    default: ''
  },
...
}
data () {
  return {
    inputValue: this.value
  }
},
model: {
  prop: 'value',
  event: 'change'
},
watch: {
  inputValue (val) {
    this.$emit('change', val)
  }
}


    
      
          编辑
          Name：
          
          
        

        
          
          {{item}}
        
        
          
          {{index}}
          {{item.id}}
          {{item.name}}
          {{item.age}}
          
            
            
          
        
        
      

    
    

    
    
      共{{cnt}}条
      
        
        
        
        
        
      
    
    
data () {
    return {
      // 分页数据
      // 页大小
      size: 3,
      // 跳转页
      go_input: null,
      // 当前页
      current: 1
    }
  },
methods: {
    // 分页功能
    handlePrev () {
      this.current = this.current > 1 ? this.current = this.current - 1 : this.current
    },
    handleNext () {
      this.current = this.current < this.all_page ? this.current + 1 : this.current
    },
    handleGo () {
      var go = Number(this.go_input)
      this.current = go <= this.all_page && go > 0 ? go : this.current
      this.go_input = ''
    }
  },
computed: {
    // 分页功能
    // 总页数
    all_page () {
      var temp = this.tbodys.length / this.size
      if (temp === 0) {
        return 1
      } else {
        return Math.floor(temp) + 1
      }
    },
    // 当前页
    cur: {
      get () {
        return Math.floor(this.index / this.all_page) + 1 || 1
      },
      set (value) {
        this.current = value
      }
    },
    // 上一页
    prev_page () {
      return this.current - 1 || 0
    },
    // 下一页
    next_page () {
      return this.current + 1 || 2
    },
    // 分页
    filterPage () {
      var tempCurrent = this.current * this.size - this.size
      return this.filteredTbodys.slice(tempCurrent, tempCurrent + this.size)
    }
  }

	{{item}}
	{{index}}	{{item.id}}	{{item.name}}	{{item.age}}

删除表格当前条数据


  
  {{index}}
  {{item.id}}
  {{item.name}}
  {{item.age}}
  
    
  

    // 删除功能
    handleDel (index) {
      this.tbodys.splice(index, 1)
      this.filteredTbodys = this.tbodys
    }

编辑表格当前条数据


    编辑
    Name：
    
    
  

  
    
    {{item}}
  
  
    
    {{index}}
    {{item.id}}
    {{item.name}}
    {{item.age}}
    
      
    
  
  

data () {
  return {
    // 编辑弹框
    modal_data: {
      name: '',
      visible: false
    },
    edit_input: '',
    id: 0,

    // 表格标题数据
    theads: ['Index', 'ID', 'Name', 'Age'],

    // 表格表体数据
    tbodys: [
      {
        check: false,
        index: 0,
        id: Date.now(),
        name: 'jack',
        age: 12
      },
      {
        check: true,
        index: 0,
        id: Date.now() + 1,
        name: 'rose',
        age: 14
      },
      {
        check: false,
        index: 0,
        id: Date.now() + 2,
        name: 'davy',
        age: 45
      },
      {
        check: false,
        index: 0,
        id: Date.now() + 3,
        name: 'curry',
        age: 20
      },
      {
        check: true,
        index: 0,
        id: Date.now() + 4,
        name: 'lis',
        age: 33
      },
      {
        check: false,
        index: 0,
        id: Date.now() + 5,
        name: 'linger',
        age: 60
      },
      {
        check: false,
        index: 0,
        id: Date.now() + 6,
        name: 'hoc',
        age: 44
      }
    ]
  }
},
methods: {
  // 编辑弹框
  getModalData (index) {},
  handleEdit (id) {
    // this.filteredTbodys.visible = true
    this.modal_data.visible = true
    this.id = id
  },
  handleCancel () {
    this.modal_data.visible = false
  },
  handleSubmit () {
    console.log(this.id)
    this.modal_data.name = this.edit_input
    console.log(this.modal_data.name)
    for (var i = 0; i < this.filteredTbodys.length; i++) {
      if (this.filteredTbodys[i].id === this.id) {
        this.filteredTbodys[i].name = this.modal_data.name
      }
    }
    this.modal_data.visible = false
  },
},

	{{item}}
	{{index}}	{{item.id}}	{{item.name}}	{{item.age}}

全选反选


filtered () {
      return this.tbodys.filter(item => {
        return item.check === true
      })
    },
    count () {
      return this.filtered.length
    },
    select_all: {
      get () {
        return this.count === this.tbodys.length
      },
      set (value) {
        this.tbodys.forEach(function (item) {
          item.check = value
        })
      }
    }

点击搜索按钮显示对应内容



        
        {{index}}
        {{item.id}}
        {{item.name}}
        {{item.age}}
        
          
          
        
      
data () {
    return {
      // 搜索输入内容
      searchText: '',
      filteredTbodys: [],
  },
}
  methods: {
    // 搜索按钮
    search_input_btn () {
      this.searchText = this.$refs.search.value
    }
  },
  watch: {
    searchText: {
      handler: function (value) {
        var search = value.toLowerCase()
        var tbodys = this.tbodys
        this.filteredTbodys = tbodys.filter(function (row) {
          return Object.keys(row).some(function (key) {
            return (String(row[key]).toLowerCase().indexOf(search) > -1)
          })
        })
      },
      immediate: true
    }
  },

添加任务

app.vue

add(data) {
  if(!data) {
    return
  }
  data = data.trim()
  this.list.push({
    id: this.id,
    title: data,
    check: false
  })
},

main.vue

addItem() {
    this.$emit('add',this.title)
    this.title = ''
}

删除任务

app.vue

remove(index) {
  this.list.splice(index,1)
}

main.vue

removeItem() {
    this.$emit("remove", this.todo);
},

数组更新检测

变更方法

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

非变更方法

不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：

filter()
concat()
slice()

用法

数组排序时sort()方法会改变原始数组，使用.slice()返回一个新数组

gridbd = gridbd.slice().sort(function(a, b) {
    a = a[sortkey]
    b = b[sortkey]
    return (a === b ? 0 : a > b ? 1 : -1) * order
})

根据条件动态绑定样式

:class="{bold: isFolder}"

判断是否是有子元素，有的话则返回1，没有则是false

    computed: {
        // 判断是否是文件夹，如果有子文件则返回1，没有子文件则不是文件夹
        isFolder() {
            return this.item.children && this.item.children.length
        }
    },

根据条件判断是否切换状态

    methods: {
        // 判断是否是文件夹，是的话切换状态是否折叠
        toggle() {
            if(this.isFolder) {
                // console.log(1);
                this.isOpen = !this.isOpen
            }
        }
    }

函数式组件(props,children,slots,scopedSlots,data,parent,listeners,injections)

props：提供所有 prop 的对象
children：VNode 子节点的数组
slots：一个函数，返回了包含所有插槽的对象
scopedSlots：(2.6.0+) 一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。
data：传递给组件的整个数据对象，作为 createElement 的第二个参数传入组件
parent：对父组件的引用
listeners：(2.3.0+) 一个包含了所有父组件为当前组件注册的事件监听器的对象。这是 data.on 的一个别名。
injections：(2.3.0+) 如果使用了 inject 选项，则该对象包含了应当被注入的 property。

组件递归调用

使用name: ‘需要递归调用的组件名称’

创建子元素

语法：Vue.set()

Vue.set( target, propertyName/index, value )

ps：在模版中使用此方法需要导入vue

import Vue from 'vue'

用法：父组件

    makeFolder(item) {
      Vue.set(item, 'children',[])
      this.addItem(item)
    },
    addItem(item) {
      item.children.push({
        name: '新的文件'
      })
    }

用法：子组件（创建前先判断是否是文件夹，是的话不创建子文件，否则创建子文件)

          makeFolder: function() {
            if (!this.isFolder) {
              this.$emit("make-folder", this.item);
              this.isOpen = true;
            }
          }

过滤器（文本格式化:首字母大写）

{{ key | capitalize }}
    filters: {
        capitalize: function(str) {
        	return str.charAt(0).toUpperCase() + str.slice(1);
        }
    },

组件通信的方式

props和 $e m i t (常用) ：父组件向子组件传递数据是通过 p r o p 传递的，子组件传递数据给父组件是通过$ emit触发事件来做到的.

子组件向父组件传值

语法

vm.$emit( eventName, […args] )

参数

{string} eventName

[…args]

作用

触发当前实例上的事件。附加参数都会传给监听器回调。

用法：给当前元素添加子元素

用法：给父元素添加子元素

$a t t r s 和$ listeners
中央事件总线（非父子组件间通信）
v-model
provide和inject
$p a r e n t 和$ children
vuex

hashchange和history区别

实现功能：

1、记录当前页面的状态（保存或分享当前页的url，再次打开该url时，网页还是保存的（分享）时的状态）；

2、可是使用浏览器的前进后退功能（如点击后退按钮，可以使页面回到ajax更新页面之前的状态，url也回到之前的状态）

实现方法：

1、改变url且不让浏览器向服务器发出请求；

2、监测url的变化；

3、截获url地址，并解析出需要的信息来匹配路由规则。

区别：

1、hash模式

这里的hash就是指url尾巴后的#号以及后面的字符。这里的#和css里的#是一个意思。hash也称作锚点，本身是用来做页面定位的，他可以使对应的id元素显示在可视区域内。

由于hash值变化不会导致浏览器向服务器发出请求，而且hash改变会触发hashchange事件，浏览器的进后退也能对其进行控制，所以人们在html5的history出现前，基本都是使用hash来实现前端路由的。他的特点在于：hash虽然出现url中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。hash 本来是拿来做页面定位的，如果拿来做路由的话，原来的锚点功能就不能用了。其次，hash的而传参是基于url的，如果要传递复杂的数据，会有体积的限制

2、history模式

history模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中。

history———利用了HTML5 History Interface 中新增的pushState（）和replaceState（）方法。（需要特定浏览器的支持）history不能运用与IE8一下

总结：

这两个方法应用于浏览器的历史纪录站，在当前已有的back、forward、go 的基础之上，他们提供了对历史纪录进行修改的功能，只是当他们执行修改使，虽然改变了当前的url，但你的浏览器不会立即像后端发送请求。

注意：

1、hash模式s下，仅hash符号之前的内容会被包含在请求中，如 http://www.abc.com 因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回404错误；

2、history模式下，前端的url必须和实际后端发起请求的url一致，如http://www.abc.com/book/id 。如果后端缺少对/book/id 的路由处理，将返回404错误。

鼠标移入移出背景色改变

<li
    class="item"
    :list="list"
    v-for="todo in list"
    :key="todo.id"
    :style="{ background: bgColor===todo.id ? '#eee' : 'transparent'}"
    @mouseenter="handle(true,todo.id)"
    @mouseleave="handle(false,todo.id)"
    > 
  <div class="view">
    <input type="checkbox" v-model="todo.check" />
    <label class="content">{{ todo.title }}label>
    <button class="destroy" v-show="isShow" @click="removeItem">xbutton>
  div>
li>
data() {
	return {
	isShow: false,
	bgColor: 0,
	};
},
methods: {
  handle(flag,id) {
  if (flag) {
  this.bgColor = id;
  this.isShow = true;
  } else {
  this.bgColor = 0;
  this.isShow = false;
  }
  },
}

数组操作方法

删除：

removeTodo: function (todo) {
      this.todos.splice(this.todos.indexOf(todo), 1)
    },

添加：

addTodo: function () {
	// 去除前后空格
	var value = this.newTodo && this.newTodo.trim();
	// 输入为空则不处理
	if (!value) {
		return;
	}
	// TODO: Use a proper UUID instead of `Date.now()`.
	this.todos.push({ id: Date.now(), title: value, completed: false });
	// 清除输入框
	this.newTodo = '';
},

过滤器

var filters = {
  //返回全部项目
  all: function (todos) {
    return todos
  },
  //返回未完成的项目
  active: function (todos) {
    return todos.filter(function (todo) {
      return !todo.completed//filter()只会返回true的数组元素
    })
  },
  //返回完成的项目
  completed: function (todos) {
    return todos.filter(function (todo) {
      return todo.completed
    })
  }
}

将数据存储在localStorage

var STORAGE_KEY = 'todos-vuejs-2.0'

var todoStorage = {
    //将数据提取出来
  fetch: function () {
    var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
    todos.forEach(function (todo, index) {
      todo.id = index
    })
    todoStorage.uid = todos.length
    return todos
  },
  // 将数据存储到localStorage
  save: function (todos) {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
  }
}

v-if和v-show区别

v-if和v-show用于视图层进行条件判断视图展示
v-if的原理是根据判断条件来动态的进行增删DOM元素，v-show是根据判断条件来动态的进行显示和隐藏元素，频繁的进行增删DOM操作会影响页面加载速度和性能
当项目程序不是很大的时候，v-if和v-show都可以用来进行判断展示和隐藏（这种场景使用v-if只是影响不大，并不是没有影响）；
当项目程序比较大的时候，不推荐使用v-if来进行判断展示和隐藏，推荐使用v-show；
只有v-if能和v-else连用进行分支判断，v-show是不能和v-else连用的，如果出现多种条件场景的情况下，可以使用v-if来进行判断

编辑任务(自动聚焦输入框)

④{{ todo.title }}
...
⑤
methods:{
    editTodo: function (todo) {
    //将原本的任务title赋予到临时的beforeEditCache中,然后放在cancelEdit中可以调用
      this.beforeEditCache = todo.title
      this.editedTodo = todo
    },
    doneEdit: function (todo) {
      if (!this.editedTodo) {
        return
      }
      this.editedTodo = null
      todo.title = todo.title.trim()//去除空格
      if (!todo.title) {
        this.removeTodo(todo)
      }
    },
    cancelEdit: function (todo) {
      this.editedTodo = null
      todo.title = this.beforeEditCache
    },
}
...
directives: {
    'todo-focus': function (el, binding) {
      if (binding.value) {
        el.focus()
      }
    }
  }

在④的时候采用@dblclick双击才能触发editTodo方法,值得注意的是,④和⑤在位置上通过css(通过:class实现样式的替换)重合了起来,实现了⑤替换④的操作,然后在⑤中利用了 v-todo-focus将焦点从④转换到了⑤.然后⑤中通过键盘操作来进行完成编辑和取消编辑的方法操作

全选/取消全选

filteredTodos: function () {
    return filters[this.visibility](this.todos)
},
remaining: function () {//返回未完成任务的数量
    return filters.active(this.todos).length
},
allDone: {
    get: function () {
    return this.remaining === 0
    },
    set: function (value) {
    this.todos.forEach(function (todo) {
        todo.completed = value
    })
    }
}

这个get函数和set函数是访问器属性,它们不包含数据值,在读取访问器属性的就会代用getter函数来返回有效的值.在写入访问器属性时会调用setter函数并传入新值.

回到代码当中,这段代码的作用就是,在读取allDone的时候调用 get函数,使图二左下角的任务未完成数为零,在点击①的时候传入value,调用set函数将每一个任务的todo.completed都改成与allDone相同的value,从而实现全选或全不选

点击完成任务

这里用v-model进行双向数据绑定,把③这个复选框绑定todo.completed,使得input为√的时候则todo.completed为true

切换任务状态可见



    All
    Active
    Completed

...
computed: {
    filteredTodos: function () {
        return filters[this.visibility](this.todos)
    },
}

在li中通过:class来给visibility赋值,visibility值变了之后使得css发生相应的变化，然后url变化调用onHashChange 方法,若url后缀变为#/active,

function onHashChange () {
  var visibility = window.location.hash.replace(/#\/?/, '')//获取url后缀并去除/#\/?/多余符号
  if (filters[visibility]) {
  //若filters[visibility]存在则赋予给这个组件内的visibility值(visibility值变化则使computed中的filteredTodos函数返回值变化,则实现切换任务状态可见)
    app.visibility = visibility
  } else {
    window.location.hash = ''//若后缀为空则使组件内的visibility值为'all'
    app.visibility = 'all'
  }
}

window.addEventListener('hashchange', onHashChange)//监听

v-cloak

v-cloak说明之后的代码是隐藏到编译结束为止的,也就是说那段代码只有在满足v-show的条件才会显示出来的

JavaScript

数组操作方法：上移下移数组内元素

代码


moveTimeNode (index, item, decoration) {
  this.dynamicForm.timeNodes.splice(index, 1)
  switch (decoration) {
    case 'down':
      this.dynamicForm.timeNodes.splice(index + 1, 0, item)
      break
    case 'up':
      this.dynamicForm.timeNodes.splice(index - 1, 0, item)
      break
    default:
      break
  }
}

hasOwnProperty

查找一个对象是否有某个属性，但是不会去查找它的原型链。

用法

判断自身属性是否存在
判断自身属性与继承属性
遍历一个对象的所有自身属性

注意

hasOwnProperty 作为属性名时：使用一个可扩展的hasOwnProperty方法来获取正确的结果

使用原型链上真正的 hasOwnProperty 方法

({}).hasOwnProperty.call(foo, 'bar'); // true

使用 Object 原型上的 hasOwnProperty 属性

Object.prototype.hasOwnProperty.call(foo, 'bar'); // true

循环删除数组中的元素:

场景

当删除掉了一个元素后，数组的索引发生的变化，造成了程序的异常

方法1:filter

var arr = [2, 3, 5, 7];
arr = arr.filter(item => item !== 5);

方法2:逆向删除

var arr = [2, 3, 5, 7];
for (let i = arr.length - 1; i >= 0; i--) {
    if (arr[i] === 5) {
        arr.splice(i, 1);
    }
}

RegExp

语法

var patt=new RegExp(pattern,modifiers);或：var patt=/pattern/modifiers;

pattern（模式）描述了表达式的模式
modifiers(修饰符) 用于指定全局匹配、区分大小写的匹配和多行匹配

用法

获取URL中对应的参数

语法：RegExpObject.exec(string)

用法：exec() 方法用于检索字符串中的正则表达式的匹配。

返回值：返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

const getHashResults = function (currentPageNumber, totalPageNumber, searchInputContent) {
  const infoStore = []
  currentPageNumber = /currentPageNumber=(\w*)/.exec(window.location.hash) === null ? 1 : Number(/currentPageNumber=(\w*)/.exec(window.location.hash)[1])
  searchInputContent = /searchInputContent=(\w*)/.exec(window.location.hash) === null ? '' : /searchInputContent=(\w*)/.exec(window.location.hash)[1]
  infoStore.push(currentPageNumber, searchInputContent)
  return infoStore
}
window.addEventListener('hashchange', getHashResults)

忽略大小写匹配name

根据输入词匹配列名为’name’的数据，可以使用正则匹配，用’i’模式忽略大小写

语法：RegExpObject.test(string)

功能：test() 方法用于检测一个字符串是否匹配某个模式.

返回值：如果字符串中有匹配的值返回 true ，否则返回 false。

let searchInput = RegExp(value, 'i')
this.searchedListItems = this.listItems.filter(item => searchInput.test(item.name))

遍历

用forEach，不要用map

防抖函数

使用场景

scroll事件（资源的加载）
mousemove事件（拖拽）
resize事件（响应式布局样式）
keyup事件（输入框文字停止打字后才进行校验）

代码实现

function debounce (fn, delay, isImmediate) {
  var timer = null
  return function () {
    var context = this
    var args = arguments
    clearTimeout(timer)
    if (isImmediate && timer === null) {
      fn.apply(context, args)
      timer = 0
      return
    }
    timer = setTimeout(function () {
      fn.apply(context, args)
      timer = null
    }, delay)
  }
}

获取元素的位置

getBoundingClientRect()
用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。
是DOM元素到浏览器可视范围的距离（不包含页面看不见的部分）。
该函数返回一个Object对象
该对象有6个属性：top, left, bottom, right, width, height；这里的top、left和css中的理解很相似，width、height是元素自身的宽高，但是right，bottom和css中的理解有点不一样。right是指元素右边界距窗口最左边的距离，bottom是指元素下边界距窗口最上面的距离。

排序方法

sort

单纯的数组数字进行排序，使用sorts()方法排序

排序顺序可以是字母或数字，并按升序或降序。默认排序顺序为按字母升序。

这种方法会改变原始数组。

根据数组中对象为数字情况进行排序：

sortBykey(ary, key) {
 	return ary.sort(function (a, b) {
    	let x = a[key]
    	let y = b[key]
    	return ((x < y) ? -1 : (x > y) ? 1 : 0)
  	})
}

根据数组中对象为字母情况进行排序

sortList(lists){                // lists传的是数组
 	return lists.sort((a, b) => {
   	 	return a['grapheme'].localeCompare(b['grapheme'])     // grapheme为字母对应的属性名
  	})
}

reverse()

此方法为倒序，也就是反过来。并不会进行大小排序

冒泡排序

每轮依次比较相邻两个数的大小，后面比前面小则交换

选择排序

规律：通过比较首先选出最小的数放在第一个位置上，然后在其余的数中选出次小数放在第二个位置上,依此类推,直到所有的数成为有序序列。

快速排序

先从数列中取出一个数作为基准数

分区过程，将比这个数大的数全放到它的右边，小于或等于它的数全放到它的左边

再对左右区间重复第二步，直到各区间只有一个数

二分查找排序

数组方法

.slice() 方法以新的数组对象，返回数组中被选中的元素。

slice() 方法选择从给定的 start 参数开始的元素，并在给定的 end 参数处结束，但不包括。

注释：slice() 方法不会改变原始数组。

.filter()

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

是否改变原数组：否

是否对空数组进行检测：否

heroes = heroes.filter(function(row) {
    return Object.keys(row).some(function(key) {
        return (
        String(row[key])
            .toLowerCase()
            .indexOf(filterKey) > -1
        );
    });
});

.forEach()

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

注意: forEach() 对于空数组是不会执行回调函数的。

tips: forEach()中不支持使用break(报错)和return(不能结束循环)，有需要时可使用常规的for循环。

//遍历columns值(也就是父组件中的数据值['name', 'power']),将每一项的值设为1，即:{name:1,power:1}
this.columns.forEach(function(key) {
    sortOrders[key] = 1;
});

.some()

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。

some() 方法会依次执行数组的每个元素：

如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。

如果没有满足条件的元素，则返回false。

(相当于’||或’)

注意： some() 不会对空数组进行检测。

注意： some() 不会改变原始数组。

return Object.keys(row).some(function(key) {
    return (
    String(row[key])
        .toLowerCase()
        .indexOf(filterKey) > -1
    );
});

短路运算

短路与

//第一个条件为真，执行第二个，
//第一个条件为假，则不会往后执行
var filterKey = this.filterKey && this.filterKey.toLowerCase();

短路或

//第一个条件为真，执行第一个条件，
//第一个条件为假，第二个条件为真，执行第二个条件
//两个条件都不为真，则不会往后执行
var order = this.sortOrders[sortKey] || 1;

转换成字符串方式的区别

toString()

toString()方法返回的是相应值的字符串表现

数值、布尔值、对象和字符串值都有toString()方法，但是null和undefined值没有这个方法

String()

在不知道变量是否为null或者undefined是可以使用String()函数来转换为字符串类型

如果转换值有toString()方法的话，就直接调用该方法，并返回相应的结果

如果转换值是null,则返回"null"

如果转换值是undefined,则返回"undefined"

String(row[key]).toLowerCase()

利用+“”

把转换的值与一个字符串 “” 加在一起

复数单数

pluralize: function (word, count) {
	return word + (count === 1 ? '' : 's');
},

CSS

遮罩层

div.popContainer{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.3);
}

table细边框


  
    
    {{item}}
  
  
    
    {{index}}
    {{item.id}}
    {{item.name}}
    {{item.age}}
    
      
      
    
  

.table {
    max-width: 800px;
    margin: 0 auto;
    border: 1px solid #2c3e50;
    border-collapse:collapse;
  }
.table td,
.table th {
  padding: 10px 30px;
}

	{{item}}
	{{index}}	{{item.id}}	{{item.name}}	{{item.age}}

三角箭头

.arrow {
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 0;
  opacity: 0.66;
}

朝上

.arrow.asc {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid #fff;
}

朝下

.arrow.dsc {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #fff;
}

防止选取
元素的文本

user-select: none;

更改input中placeholder的颜色

input::-webkit-input-placeholder{}

vuex

state

用于存储一些数据,或者说状态值，改变值的时候可以触发dom的更新
在使用的时候一般被挂载到子组件的computed计算属性上,这样有利于state的值发生改变的时候及时响应给子组件

mapState

是state的辅助函数
当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性
用法：

computed: {
  ...mapState({
    liveEntryCode: (state) => state.live.liveEntryCode,
    title: (state) => state.live.title,
    startTime: (state) => state.live.startTime,
  }),
  formatStartTime({ startTime }) {
    return startTime && fullDateTime(startTime)
  },
},

浏览器

复制当前浏览器链接


onCopy() {
  copy(location.href)
  this.$Message.success('复制成功')
},

下载功能


  
  

onDownload(os) {
  const ua = navigator.userAgent.toLowerCase()
  let curOs = os || checkOs
  curOs === 'windows' &&
  	(curOs += ua.indexOf('win32') >= 0 || ua.indexOf('wow32') >= 0 ? 32 : 64)
  window.location.href = window.DXY_BROWSER_DOWNLOAD_URL_MAP[curOs]
},

Vue最佳实践（项目经验总结，定期更新）

Vue

$set添向数组添加元素

$set(target, key, value)

代码

输入框未输入时显示提示信息

代码

动态绑定样式：添加前置’*'号

代码

ref

监听属性watch

点击搜索按钮后显示匹配后的列表

计算属性computed

作用

用法

总页数

全选反选

显示分页效果

v-model 与 .sync的区别

原理

v-model

.sync

功能

v-model

.sync

使用场景

v-model

.sync

小结

$listeners

$attrs

使用场景

v-model自定义事件父子组件通信

绑定input输入框、textarea文本域框、select选择框

绑定checkbox、radio复选框

代码应用

分页功能：上一页、下一页、跳转指定页

删除表格当前条数据

编辑表格当前条数据

全选反选

点击搜索按钮显示对应内容

添加任务

app.vue

main.vue

删除任务

app.vue

数组更新检测

变更方法

非变更方法

用法

根据条件动态绑定样式

判断是否是有子元素，有的话则返回1，没有则是false

根据条件判断是否切换状态

函数式组件(props,children,slots,scopedSlots,data,parent,listeners,injections)

组件递归调用

创建子元素

语法：Vue.set()

用法：父组件

用法：子组件（创建前先判断是否是文件夹，是的话不创建子文件，否则创建子文件)

过滤器（文本格式化:首字母大写）

组件通信的方式

子组件向父组件传值

语法

参数

作用

用法：给当前元素添加子元素

hashchange和history区别

实现功能：

实现方法：

区别：

总结：

注意：

鼠标移入移出背景色改变

数组操作方法

过滤器

将数据存储在localStorage

v-if和v-show区别

编辑任务(自动聚焦输入框)

全选/取消全选

点击完成任务

防止选取
元素的文本