Не вождей, они должны знать, Vue некоторые небольшие операции (а)

Vue.js
Не вождей, они должны знать, Vue некоторые небольшие операции (а)
❝

Ты должен хорошо зарабатывать, тогда мы с ним будем *благословлены - Internet Sage

❞

При написании кода я часто блуждаю по миру, и я не знаю, что я буду делать, когда его напишу.В это время я хочу взглянуть на свои комментарии (которые пишут комментарии для серьезных людей). Оглядываясь назад и видя, вау, я! @#￥#@. После того, как босс в последний раз видел, что я опубликовал«При написании такого автономного хранилища женщина-босс больше никогда не просила меня работать сверхурочно. Использование localForage"После этого я месяц подряд работал сверхурочно, хей~. Воспользовавшись сегодня отсутствием сверхурочной работы, я начал записывать некоторые небольшие операции, которые могли бы сэкономить мне пять минут свободного времени. эммм.....

Вью часы

регулярное использование

смотрю, обычно просто набивают как сумасшедший во вью, вот так, хочу следить за сменой возраста босса

 watch: {
    age (val, old) {

    }
  }

Делайте вид, что используете продвинутый

Я пользуюсь немедленным и глубоким, так что у меня зоркий глаз, как бы глубоко ни был скрыт возраст хозяйки, от моего пристального внимания невозможно ускользнуть. В этом мире последнее слово за мной!

watch: {
    age: {
      handler (val, old) {

      },
      immediate: true,
      deep: true
    }
  }

Босс более продвинутый

Ничего себе, кажется, что старик не может управлять часами, иначе этого должно быть достаточно. Ведь это начальник мне платит зарплату, так что жена начальника, я все равно должен меня содержать

export default {
  data: () => ({
    age: 18
  }),
  methods: {
    myWatch () {
      const unwatch = this.$watch('age', function (val, old) {
        console.log(val, old)

        if (val > 40) {
          unwatch && unwatch()
        }
      }, {
        immediate: true,
        deep: true
      })
    }
  },
  created () {
    setInterval(() => {
      this.age++
    }, 2000)

    this.myWatch()
  }
}
</script>

$watchспособ отслеживания изменений данных. Возвращает функцию, которая может закрыть этот слушатель, который будет закрыт сразу после выполнения.

vm.$watchПринимает три параметра: контролируемый объект, контролируемую функцию и контролируемый элемент конфигурации.

Все почти в порядке, сдайте одежду Лао Ина, жена босса не большая проблема, она должна быть

На самом деле в разработке мы неизбежно будем сталкиваться с такими операциями, которые требуют отмены мониторинга, хотя в обычном обработчике часов используются условия для определения необходимости выполнения следующей операции, но обработчик все равно выполняется. В настоящее время вы можете также использовать его напрямуюvm.$watchВозвращаемое значение является универсальным. Например, мы можем написать прямо в сработавшей функцииunwatch && unwatch()Вы можете контролировать его только один раз, и его магия зависит от вашего собственного мнения.

Аннотации в шаблонах Vue

Хотите сохранить комментарии?

На самом деле эта проблема не является проблемой большую часть времени, и она не часто встречается, но если это произойдет случайно, это будет неловко.Как я сказал, чтобы не работать сверхурочно, это закончилось дополнительным месяцем, поэтому я еще понимаю.Бар.

<template comments>
<!--注释注释注释-->
</template>

Таким образом, вы можете хранить комментарии в одном файле.

На самом деле, документ vue также упоминал кое-что:comments, но он не подходит для одного файла, его можно использовать при создании экземпляра Vue.

Помню, когда тестировал, то обнаружил, что использовал эту штуку при инстанцировании main.js, и комментарии в шаблоне не отображались. . .

Но этот атрибут, похоже, сейчас не имеет большого значения, я очень ленивый, я слышал это раньше

Свойство имени Vue

Основная роль

Самая основная функция, конечно, состоит в том, чтобы назвать компонент, hhhh. Сотрудничатьkeep-alive组件когда я использую можно комбинироватьkeep-aliveизincludeа такжеexcludeсделать некоторую фильтрацию

рекурсивный компонент

Рекурсивный компонент, думает Гу Минси, этот компонент называет себя этим компонентом. данные, которые вписываются в древовидную структуру

<template>
  <div class="my-self">
    <my-self v-if=""></my-self>
  </div>
</template>
<script>
export default {
  name: 'my-self'
}
</script>

Заметьте, что v-if не может быть меньше рекурсии, на нее должна быть надежда...

директива v-модели

Реализуйте v-модель для ваших собственных компонентов

Реализовать v-model самостоятельно, что обычно очень удобно при наличии событий

<template>
  <div class="input">
    <input type="text" :value="value" @input="onInput">
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String
    }
  },
  methods: {
    onInput (e) {
      this.$emit('input', e.target.value)
    }
  }
}
</script>

Реализуйте v-модель с вычисляемыми свойствами

На самом деле часто в этом нет необходимости, и это может привести к потере производительности. Однако, если мы столкнулись с такой ситуацией — мы используем готовый компонент, этот компонент поддерживает v-model, мы хотим дважды инкапсулировать его, но он не предоставляет метод для запуска изменения значения, то вы можете использовать вычисляемые свойстваgetа такжеsetПеренесите v-модель, вот так:

<template>
  <div class="input">
    <input type="text" v-model="text">
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String
    }
  },
  computed: {
    text: {
      set (data) {
        this.$emit('input', data)
      },
      get () {
        return this.value
      }
    }
  }
}
</script>

В этой статье используетсяmdniceнабор текста

Категории