Bootstrap

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

React

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
<input :class="{'input-box': !value && innerMessage}">
<span v-if="!value && innerMessage" class="err-info">
  {{innerMessage}}
</span>
watch: {
  isValidation (val) {
    if (val) {
      if (this.message) {
        if (this.value === '') {
          this.innerMessage = this.message
        }
      }
    }
  }
}

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

代码
<div
  class="el-form-item__header"
  :class="{'asterisk':required}">
  {{label}}
</div>
.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
<Child v-model="text"/>
<!-- 等同于 -->
<Child :value="text" @input="text = $event"/>

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

<Child @input="onInput"/> <!-- 等同于 onInput($event) -->
<Child @input="onInput('username', $event)"/>

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

export default {
  model: {
    prop: 'content',
    event: 'change'
  }
}
<Child v-model="text"/>
<!-- 这个时候 v-model 就等同于 -->
<Child :content="text" @change="text = $event"/>
.sync
<Children :foo="bar" @update:foo="val => bar = val"></Children >
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就可以写成this. emit就可以写成this.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” 传入内部组件——在创建更高层次的组件时非常有用。

使用场景
<el-input type="text" v-model="enteredTextContentA"/>
<input
  :type="type"
  v-model="innerValue"
  v-bind="$attrs">

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

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

value属性，input事件

绑定checkbox、radio复选框

checked属性，change事件

代码应用
<el-input type="text" v-model="enteredTextContentA"/>
<el-input type="checkbox" id="checkbox1-1" name="checkbox" v-model="checkedA" :disabled="false"/>
<el-input type="radio" id="radio1-1" name="radio" v-model="radioValue"/>
<el-input type="select" v-model="leftSelectedValue">
  <option value="red">red</option>
  <option value="green">green</option>
</el-input>
<el-input type="textarea" v-model="enteredTextareaContent" clos="30" rows="10"/>
<input :type="type" v-model="inputValue">
<input
  :type="type"
  :name="name"
  :value="value"
  v-model="inputValue"
  :id="id"
  :disabled="disabled">
<select
  :name="name"
  :id="id"
  v-model="inputValue">
  <slot></slot>
</select>
<textarea
  :name="name"
  :id="id"
  :cols="cols"
  :rows="rows"
  v-model="inputValue">
</textarea>

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)
  }
}

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

<!-- body start -->
    <div class="body">
      <table class="table" border="1">
        <tr>
          <th><input type="checkbox" v-model="select_all"></th>
          <th  v-for="(item,index) in theads" :key="index">{{item}}</th>
        </tr>
        <tr v-for="(item,index) in filterPage" :key="item.id">
          <td><input type="checkbox" v-model="item.check"></td>
          <td>{{index}}</td>
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>
            <button class="edit" @click="handleEdit(item.id)">编辑</button>
            <button class="del" @click="handleDel(index)">删除</button>
          </td>
        </tr>
        <div class="edit_modal" v-show="modal_data.visible">
          <span class="edit_title"><strong>编辑</strong></span>
          <p>Name：<input type="text" v-model="edit_input"></p>
          <button class="edit_cancel" @click="handleCancel()">取消</button>
          <button class="edit_submit" @click="handleSubmit()">确定</button>
        </div>
      </table>

    </div>
    <!-- body end -->

    <!-- footer start -->
    <footer class="footer">
      <span class="counts">共{{cnt}}条</span>
      <div class="pages">
        <button class="prev" @click="handlePrev">prev</button>
        <button class="current">{{current}}/{{all_page}}</button>
        <button class="next" @click="handleNext">next</button>
        <input type="text" class="go_input" placeholder="跳转到……" v-model="go_input">
        <button class="go_btn" @click="handleGo()">Go</button>
      </div>
    </footer>
    <!-- footer end -->
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)
    }
  }

删除表格当前条数据

<tr v-for="(item,index) in filteredTbodys" :key="index">
  <td><input type="checkbox" v-model="item.check"></td>
  <td>{{index}}</td>
  <td>{{item.id}}</td>
  <td>{{item.name}}</td>
  <td>{{item.age}}</td>
  <td>
    <button class="del" @click="handleDel(index)">删除</button>
  </td>
</tr>
    // 删除功能
    handleDel (index) {
      this.tbodys.splice(index, 1)
      this.filteredTbodys = this.tbodys
    }

编辑表格当前条数据

<table class="table" border="1">
  <tr>
    <th><input type="checkbox" v-model="select_all"></th>
    <th  v-for="(item,index) in theads" :key="index">{{item}}</th>
  </tr>
  <tr v-for="(item,index) in filteredTbodys" :key="index">
    <td><input type="checkbox" v-model="item.check"></td>
    <td>{{index}}</td>
    <td>{{item.id}}</td>
    <td>{{item.name}}</td>
    <td>{{item.age}}</td>
    <td>
      <button class="edit" @click="handleEdit(item.id)">编辑</button>
    </td>
  </tr>
  <div class="edit_modal" v-show="modal_data.visible">
    <span class="edit_title"><strong>编辑</strong></span>
    <p>Name：<input type="text" v-model="edit_input"></p>
    <button class="edit_cancel" @click="handleCancel()">取消</button>
    <button class="edit_submit" @click="handleSubmit()">确定</button>
  </div>
</table>
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
  },
},

全选反选

<input type="checkbox" v-model="select_all">
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
        })
      }
    }

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

<input type="text"  autocomplete="off" placeholder="搜索" class="search_input" ref="search">
<tr  v-for="(item,index) in filteredTbodys" :key="index">
        <td><input type="checkbox" v-model="item.check"></td>
        <td>{{index}}</td>
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
        <td>
          <button class="edit">编辑</button>
          <button class="del">删除</button>
        </td>
      </tr>
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(常用)：父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过 emit(常用)：父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过emit触发事件来做到的.
子组件向父组件传值
语法
vm.$emit( eventName, […args] )
参数

{string} eventName

[…args]

作用

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

用法：给当前元素添加子元素
<treeitem
            class="item"
            v-for="(child,index) in item.children"
            :key="index"
            :item="child"
            @make-folder="$emit('make-folder',$event)"
            @add-item="$emit('add-item',$event)"
          ></treeitem>

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

<li @click="$emit('add-item',item)">+</li>
  • a t t r s 和 attrs和 attrs和listeners
  • 中央事件总线（非父子组件间通信）
  • v-model
  • provide和inject
  • p a r e n t 和 parent和 parent和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">x</button>
  </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来进行判断

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

④<label @dblclick="editTodo(todo)">{{ todo.title }}</label>
...
⑤<input class="edit" type="text"
          v-model="todo.title"
          v-todo-focus="todo == editedTodo"
          @blur="doneEdit(todo)"
          @keyup.enter="doneEdit(todo)"
          @keyup.esc="cancelEdit(todo)">
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,从而实现全选或全不选

点击完成任务

<input class="toggle" type="checkbox" v-model="todo.completed">

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

切换任务状态可见

<ul class="filters">
<!-- 选择哪种状态可见 -->
    <li><a href="#/all" :class="{ selected: visibility == 'all' }">All</a></li>
    <li><a href="#/active" :class="{ selected: visibility == 'active' }">Active</a></li>
    <li><a href="#/completed" :class="{ selected: visibility == 'completed' }">Completed</a></li>
</ul>
...
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

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

代码
<button
  v-if="index > 0"
  @click.prevent="moveTimeNode(index, timeNode, 'up')">
  上移
</button>
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细边框

<table class="table" border="1">
  <tr>
    <th><input type="checkbox" v-model="select_all"></th>
    <th  v-for="(item,index) in theads" :key="index">{{item}}</th>
  </tr>
  <tr v-for="(item,index) in filteredTbodys" :key="index">
    <td><input type="checkbox" v-model="item.check"></td>
    <td>{{index}}</td>
    <td>{{item.id}}</td>
    <td>{{item.name}}</td>
    <td>{{item.age}}</td>
    <td>
      <button class="edit" @click="handleEdit()">编辑</button>
      <button class="del" @click="handleDel()">删除</button>
    </td>
  </tr>
</table>
.table {
    max-width: 800px;
    margin: 0 auto;
    border: 1px solid #2c3e50;
    border-collapse:collapse;
  }
.table td,
.table th {
  padding: 10px 30px;
}

三角箭头

.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)
  },
},

浏览器

复制当前浏览器链接

<Button @click="onCopy">复制直播间链接</Button>
onCopy() {
  copy(location.href)
  this.$Message.success('复制成功')
},

下载功能

<div v-if="isChrome" slot="footer" class="text-center">
  <Button @click="onDownload('mac')"> <i class="JMicon icon-download" /> Mac 下载 </Button>
  <Button class="ml32" @click="onDownload('windows')">
    <i class="JMicon icon-download" /> Windows 下载
  </Button>
</div>
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]
},

判断当前浏览器版本

<LazyModal
  // 是Chrome返回Chrome版本号，否则返回空
  :title="`当前浏览器${isChrome ? '版本' : ''}不支持打开直播间链接`"
>
</LazyModal>
isChrome() {
  const browserName = window['dxy-live-browser']?.browser?.browser?.name || ''
  return browserName === 'chrome'
},

判断当前窗口是否关闭

:closable="false"

Element

Form表单组件验证功能

  • 通过rules属性传入验证规则
  • Form-Item中的prop属性,设置需要校验的字段名
  • 用法
<FormItem label="直播间邀请码：" prop="valiCode">
  <Input
    ref="login"
    v-model="form.inviteCode"
    :class="{ empty: !form.inviteCode }"
    placeholder="输入直播间邀请码"
    @on-enter.stop="handleClickSubmit"
  />
</FormItem>
data() {
  return {
    submitting: false,
    lg_dxy_live,
    form: {
      inviteCode: '',
    },
    rules: {
      inviteCode: { required: true, message: '请填写验证码' },
    },
    relogin: false,
    reloginModalVisible: false,
  }
},

Git

修改文件前一定要看清当前所在目录和分支

命名

函数名

动词+名词，实在不知道用什么动词可以开头用handle，命名中不建议用Array等数据类型

对象名

不加s，名称中带data

数组名

加s

组件名

首字母大写

常量名

要用下划线分隔

类名

小写，短横线分隔

其他

  • 先声明所有会用到的函数，再写执行逻辑，最后优化
  • 代码需要简洁清晰明了可维护
  • 数据在哪里定义就在哪里操作：修改原数据可以把操作函数写在原数据里，再导入数据和操作函数，

修改组件数据可以在组件内写操作函数

  • 有原生的属性可以直接用，不要重新写一个代替

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
微信小程序：3.页面开发
解决NameError: name ‘xxx‘ is not defined
基于OpenCV的自动批卷系统的设计与实现
关于响应式编程的理解与SpringCloudGateway的理解
【Verilog】实验六 移位寄存器的设计
使用AccessibilityService（无障碍服务）实现各种APP自动打卡功能
隐私计算头条周刊（2.13-2.19） 原创
centos8安装nacos并配置开机启动
java springboot基于 Java 的大学生国学自主学习平台的设计与实现万字文档和PPT(源码+lw+部署文档+讲解等)
Java 实现分页的几种方式详解
;