Category - Vue

2021-05-29 06:08:30    29    0    0
  1. let timer = setTimeout(()=> {})
  2. this.$once("hook:beforeDestroy", () => {
  3. clearTimeout(timer)
  4. timer = null
  5. })
2021-05-28 16:00:51    9    0    0

组件: countDown.vue

  1. <template>
  2. <div class="countDown_container">
  3. <slot v-bind="dateData"></slot>
  4. </div>
  5. </template>
  6. <script>
  7. import dayjs from "dayjs";
  8. export default {
  9. name: "countDown",
  10. props: {
  11. computeEndTimeFlag: Boolean, // 是否计算结束时间
  12. nowTime: {
  13. type: String | Number,
  14. default: () => Date.now()
  15. },
  16. startTime: {
  17. type: String | Number,
  18. },
  19. endTime: {
  20. type: String | Number,
  21. required: true,
  22. },
  23. showDay: Boolean,
  24. },
  25. data() {
  26. return {
  27. dateData: {},
  28. realEndTime: null,
  29. }
  30. },
  31. created() {
  32. const realEndTime = this.computeEndTimeFlag ? new Date(this.endTime).getTime() : this.getRealEndTime()
  33. this.realEndTime = realEndTime
  34. this.$emit("getRealEndTime", realEndTime)
  35. this.setDateData(realEndTime - new Date().getTime())
  36. this.updateState();
2021-05-24 10:41:24    5    0    0
  1. // this.$options.data()//是原始data中的数据
  2. // this.$data //是改变后的data中的数据
  3. this.$root //表示app.vue中data的数据
  4. Object.assign(this.$data, this.$options.data())
2021-05-08 07:43:00    3    0    0

两列表格(完整版)

  1. <template>
  2. <div class="permission">
  3. <div class="check_all_box">
  4. <el-checkbox
  5. v-model="checkAll"
  6. :indeterminate="!!checkedList && !! checkedList.length && isIndeterminate['all']"
  7. @change="handleCheckAllChange"
  8. >
  9. 全选
  10. </el-checkbox>
  11. </div>
  12. <el-checkbox-group
  13. v-model="checkedList"
  14. @change="handleItemChange"
  15. >
  16. <template v-for="(Ritem, Ridx) in allPermission">
  17. <div
  18. class="check_item_box rflex"
  19. :key="Ritem[allPermissionDataType.code]"
  20. >
  21. <div class="parent_box border_box rflex flex_align_items_center">
  22. <el-checkbox
  23. :label="Ritem[allPermissionDataType.code]"
  24. :indeterminate="getItemAll(Ritem)"
2021-04-25 09:11:31    1    0    0

main.js 或者全局路由钩子前面运行一次

  1. function syncSessionStorage() {
  2. if (!sessionStorage.length) {
  3. // 这个调用能触发目标事件,从而达到共享数据的目的
  4. localStorage.setItem('getSessionStorage', Date.now())
  5. }
  6. // 该事件是核心
  7. window.addEventListener('storage', function (event) {
  8. if (event.key == 'getSessionStorage') {
  9. // 已存在的标签页会收到这个事件
  10. localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage))
  11. localStorage.removeItem('sessionStorage')
  12. } else if (event.key == 'sessionStorage' && !sessionStorage.length) {
  13. // 新开启的标签页会收到这个事件
  14. var data = JSON.parse(event.newValue)
  15. for (var key in data) {
  16. sessionStorage.setItem(key, data[key])
  17. }
  18. // 额外的触发赋值store操作
  19. const { content = {} } = JSON.parse(sessionStorage[keyName + "login_data"]) || {}
  20. store.commit('SET_ACCESS_TOKEN', content.access_token)
  21. store.commi
2021-04-16 09:28:53    2    0    0

新建一个文件mock/index.js

  1. // 首先引入Mock
  2. const Mock = require('mockjs')
  3. // 设置拦截ajax请求的相应时间
  4. Mock.setup({
  5. timeout: '200-600'
  6. })
  7. let configArray = []
  8. // 使用webpack的require.context()遍历所有mock文件
  9. const files = require.context('.', true, /\.js$/)
  10. files.keys().forEach((key) => {
  11. if (key === './index.js') return
  12. configArray = configArray.concat(files(key).default)
  13. })
  14. // 注册所有的mock服务
  15. configArray.forEach((item) => {
  16. for (let [path, target] of Object.entries(item)) {
  17. let protocol = path.split('|')
  18. Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target)
  19. }
  20. })

main.js里引入

  1. import "../mock" //mock文件路径

定义接口

  1. import Mock from "mockjs"
  2. import { getUrlParams } from "@/util/util" // 截取get请求传递params时候url的参数
  3. export default {
  4. 'get|/mock/clouldStoreSKU/page': option => {
  5. console.log("option", option)
  6. const { page, page_size } = option.body || getUrlParams(option.url)
  7. let resData = Mock.mock({
  8. count: 10,
2021-04-15 09:43:37    1    0    0

什么是函数式组件

我们可以把函数式组件想像成组件里的一个函数,入参是渲染上下文(render context),返回值是渲染好的HTML

对于函数式组件,可以这样定义:

Stateless(无状态)`:组件自身是没有状态的
Instanceless(无实例):组件自身没有实例,也就是没有this
由于函数式组件拥有的这两个特性,我们就可以把它用作高阶组件(High order components),所谓高阶,就是可以生成其它组件的组件。就像日本的高精度的母机。

下面示例的完整Demo

那创造一个函数式组件吧
functional: true加上render function,就是一个最简单的函数式组件啦,show your the code, 下面就创建一个名为FunctionButton.js的函数式组件

  1. export default {
  2. name: 'functional-button',
  3. functional: true,
  4. render(createElement, context) {
  5. return createElement('button', 'click me')
  6. }
  7. }

就像上文所讲的,函数式组件没有this,参数就是靠context来传递的了,下面我们看下context有哪些属性呢

Render context
props
children
slots (a slots object)
parent
listeners
injections
data

其中上面的data包含了其他属性的引用,nibility。 在下面的范例中会有具体使用

现在创建一个App.vue来引入上面的函数式组件

  1. <template>
  2. <FunctionalButton>
  3. click me
  4. </FunctionButton>
  5. </template>

上面的click me就是FunctionButton.js的childern属性了,我们可以把组件改造下,由App.vue来定义组件的button按钮

2021-04-01 07:49:01    34    0    0

动态缓存组件

  • 使用keep-aliveinclude, 动态控制状态

不能缓存多层级路由

  • 解决: 干掉中间空白路由, 只支持3层路由

    1. 使用include或者exclude
    2. 二级router-view设置组件name属性
    3. router.beforeEach中加入如下代码

      1. if (to.matched && to.matched.length > 2) {
      2. for (let i = 0; i < to.matched.length; i++) {
      3. const element = to.matched[i]
      4. if (element.components.default.name === 'Blank') {
      5. to.matched.splice(i, 1)
      6. }
      7. }
      8. }
2019-11-14 07:46:35    6    0    0
### [官网文档](https://cn.vuejs.org/v2/guide/render-function.html#%E6%B7%B1%E5%85%A5-data-%E5%AF%B9%E8%B1%A1) - render函数 ``` render(createElement) { // @returns {VNode} 返回虚拟Dom节点 return createEle
2019-11-14 07:46:35    9    0    0
``` computed: { test(vm) { return vm; //vm是当前vue实例, computed默认的 } } ```
2/3